Velo form

You can work with Forms using Velo APIs in two different ways:

  • Use the Wix Forms app and its APIs.
  • Create your own custom form with input elements and submit buttons. Then use Velo to save the data to a collection.

Let’s discuss each approach so you can decide which to use.

Wix Forms APIs

Wix Forms is an app solution that provides you with a built-in suite of form functionalities such as an out-of-the-box submission button, database collection creation, and auto-generated emails after submission.

First, use the Wix Forms app to set up your forms quickly and efficiently by taking advantage of the Wix Forms’ features. You even get a starter collection for your form that you can use to store the form data.

Then, use the Wix Forms Velo APIs to customize the visitor experience even more. For example, you can display a personalized thank you message when a visitor submits the form.

Check out the benefits of the Wix Forms app!WIXFormAppBenefits

Using Wix Forms Starter Collections

When you add the Wix Forms app to your site, you pick the type of form you want. Depending on the form you pick, you get a collection specifically built for that form. In addition to the form appearing in the Form Submissions tab in the Dashboard’s Customer Management area, you can also see the collection in the Database section of the Velo Sidebar.

We call these collections starter collections because that’s exactly what they are for: to help you get started. You can use the collection “as is” or you can change the collection to meet your needs. For example, when we add a Donations form to our site, we get a starter collection called Donors with basic fields. Here we customized the collection by adding a Signature field:

The fields on the Donations form are connected to the fields in the Donors collection. This means that each time a visitor submits a form, the form field data is stored in the corresponding field in the collection.

The opposite is not true. Adding a field to a starter collection does not add a corresponding field to the form.

Using the WixForms API

  1. Add and set up a Wix FormaddAndSetupWIXForm on your site in the Wix Editor.

  2. Enable Dev Mode.

    You will see a WixForms wixForms1 element and its corresponding form element form1 on your page.

The Form element is a container for the input elements and buttons in the Wix Form. If you hide or collapse either the WixForms or Form element, the other element is also hidden/collapsed.

  • Note that we apply the WixForms functions and events to the WixForms element and not to the Form element.

  1. Client-side event handlers:

    Write the code for the client-side event handlers onWixFormSubmitted( ) and onWixFormSubmittedError( ) to handle what happens when a visitor submits the form.

    onWixFormSubmitted() provides information –— such as field names and field values —– that is only available only on the client side. You can code operations to run on the client side, such as displaying a message after form submission. This event fires when the server indicates that the submission was received, even if the server is still asynchronously processing.

    Here is sample code for displaying a personalized message on the page thanking the visitor for a donation:

$w("#wixForms1").onWixFormSubmitted( {fields} => {
   let firstName = fields[0].fieldValue;
   let lastName = fields[1].fieldValue;
   let donation = fields[2].fieldValue;
   let email = fields[3].fieldValue;
   $w('#text1').text = `Thank you, ${firstName} ${lastName}, for your generous donation of ${donation}.`;
});
/* fields array of objects:
 * [
 *  {
 *    "id":"inputFirstName",
 *    "fieldValue":"Maria",
 *    "fieldName":"Enter first name"
 *  }
 *  {
 *    "id":"inputLastName",
 *    "fieldValue":"Santora",
 *    "fieldName":"Enter last name"
 *  },
 *  {
 *    "id":"inputDonation",
 *    "fieldValue":"1000",
 *    "fieldName":"Enter donation amount"
 *  },
 *  {
 *    "id":"inputEmail",
 *    "fieldValue":"ms@theCompany",
      "fieldName":"Enter email"
 *  }
 * ]
 */

  1. Backend Event Handler:

    Write the code for the backend onFormSubmit() event handler function to perform operations on the server side when the visitor submits a form. onFormSubmit() provides additional information that the page does not have, such as the form’s submission time and the contact ID. Keep in mind that the functions on the server run asynchronously and do not hold up onWixFormSubmitted( ) operations.

Custom forms

To provide your site visitors with a fully customized form experience that you totally control, you can create custom forms manually. Add user input elements and buttons to the page, and code their usage to act like a form.

Using Velo APIs to create your own custom forms may take a bit more time and coding than using the Wix Forms app, but it can offer some advantages such as enabling additional field types and using advanced functionality with code without having to add Ascend to your site.

Using APIs for custom forms

  • Use standard $w input elements and buttons to create your form. The user input elements on your form can use functionality provided by FormElement.
  • Write code for the event handlers to customize your visitors’ experience.

Creating a custom signup form

A signup form lets your visitors register to become members of your site. There are three types of member signup forms to choose from: default, custom, or Velo form.

You can create the custom signup form that you can design to look exactly how you want. You can add any element you want to your form and customize the form title, fields, background, buttons, and more!

Custom Sign Up form

Step 1 | Choose a custom signup form

  1. Click Menus & Pages on the left side of the Editor.
  2. Click Member Signup.
  3. Click Member Signup Form.
  4. Click the drop-down menu and select Custom Form.
  5. Click Add to Site.

Note: If you prefer to use a pre-designed form that already matches your site, choose Default Form in step 4.

Step 2 | Customize your form

You can customize your form in several ways. Below are some ideas of things you may want to do to your custom signup form:

  1. Add elements to your formaddElementstoForm

  2. Change and add form fieldsFormFields

  3. Customize the form background (Container box)customizeBackground

  4. Customize the form designcustomizeFormDesign

  5. Change the buttonchangeButton

  6. Change the email notification settingschangeEmailNoti

When you are finished customizing your form, click Exit Lightbox Mode on the top bar.

Enabling custom site registration

You can create a custom member signup form using code and then enable custom site registration.

Steps to enable the custom site registration

  • Add a lightbox to your site.
  • Create a custom registration formcreateCustomRegForm in the lightbox using Velo.
  • Enable custom signup settings.
  • Click Menus & Pages on the left side of the Editor.
  • Click Member Signup.
  • Click Member Signup Form.
  • Click the drop-down menu and select Velo - Form.
  • Select your form from the What does it link to? drop-down menu.