Introduction

The Wix Forms app lets site visitors enter values for fields in a Wix Form and then submit it. With this app you can:

  • Create your own customized form from scratch.

  • Define conditional rules to change fields based on site visitor’s answers. For example, if in some field a site visitor selects "Yes" as an answer, more fields will appear.

  • Add steps to your form. You can make it easier for site visitors to complete long forms by breaking them up into pages.

Setting up the WixFormsV2 element

You can create a form in the following ways:

  • To work with a WixFormsV2 element from a template: add and set up the Wix Form app on your site.

  • To work with a WixFormsV2 element when creating a form from scratch:

    1. Click Add Elements on the left side of the Editor.

    2. Click Contact & Forms.

    3. Click Create New Form.

    4. In the pop-up window create the form how you like by drag and dropping various fields and the submit button.

    5. Click Save.

Note: Depending on the form you choose, a Wix app starter collection is added to your site. You can see it in the sidebar in Content Collections in the Databases section. Every time a site visitor creates a submission, this submission is automatically added into the collection. You can't add fields into the collection, but you can select which fields to hide/display in a submission. To do this, click on a submission, and then Manage Fields.

Working with the WixFormsV2 element

Note the following when working with the WixFormsV2 element:

  • The ID that is shown when you hover over the form is actually an element ID. You can change the ID at any time using the Properties & Events panel. Example of a default element ID: #form1.

Note: Before a certain date, the element ID was a long string such as #371Ee199389C4A93849Ee35B8A15B7Ca2. Now, that element ID is like #form1.

  • To get the form ID, call querySubmissionsByNamespace(). Example of a form ID: 21bcb6c7-02b3-4ed1-b6db-7856094fac03.

  • If you have several elements based on the same form (for example, you copy-pasted a form on the same site), the functions applied to a form ID will run on all elements.

  • You can only use the default field name keys in the Velo code. To check the key name, click on the form field in the form edit mode and then the Advanced tab.

  • You need at least a Standard Premium plan to be able to upload files in your form. Also, different premium plans allow you to have different quantity of fields, rules, and pages you can add.

  • You can see the submissions both in the form dashboard and Wix Forms collection. The collection is read-only. You can manage submissions only in the Forms & Submissions dashboard page under Customer & Leads in the menu.

Event Handling

Use the WixFormsV2 APIs to handle events and submit data to the server for processing.

When a visitor clicks the Submit button:

  1. The submit() function performs built-in, general validations (such as checking that all email fields contain valid email addresses).

  2. onSubmit() runs a callback when a site visitor submits a Wix Form yet before the Wix Form is actually sent to the server.

  3. If form validation is successful, the form is sent to the server.

    • If the Wix Form submission succeeds, the onSubmitSuccess() callback runs.

      Use this callback to handle client side operations, such as displaying a message indicating the successful submission.

    • If the Wix Form submission fails, the onSubmitFailure() callback is fired.

      Use this callback to define client side operations for failed submits, such as displaying a message requesting the visitor try again later.

Did this help?