Customized Form

This example is built from several parts:

• Database Collection

• Page Design

• Page Code

Database Collection

We use a database collection to store the form submissions. So be sure to set the collection's permissions to Form Submission when you create it.

The structure of the collection needs to match the types of data that visitors are submitting using your form.

Our collection is named Bookings and contains the following fields:

• A field named Email of type Text whose field key is email

• A field named Name of type Text whose field key is name

• A field named Number of Guests of type Number whose field key is numGuests

• A field named Food Restrictions of type Array whose field key is foodRestrictions

The Email and Name fields contain sensitive information and should therefore be marked as PII.

Page Design

The page in this example contains a form with a section that is collapsed when the page loads. Depending on the visitor's selections, this section of the form may be expanded.

In our example, if visitors select the radio button that indicates they have a food restriction, an additional group of checkboxes are shown for them to mark their food restrictions.

Note: When implementing a form such as this one, we recommend you add the reCAPTCHA tool to your form to prevent spam and other types of automated abuse.

To create the form:

• Add all the input elements that will always show, no matter what a visitor selects. Be sure to change the element IDs and to set the type of the input element appropriately. In our case, we use the following elements:

• A text input of type Text with the ID nameInput.

• A text input of type Number with the ID numGuestsInput. We set the field as Required and its minimum value to 1.

• A text input of type Email with the ID emailInput. We set the field as Required.

• A radio button group with the ID haveRestrictionsRadioButtons. We set the field as Required.

• Add the additional input elements. In our case, we use a checkbox group with the ID restrictionsCheckboxes.

• Add a button and change its ID. We gave our button the ID submitButton.

• Add two text elements to show a status message when the form is submitted. We gave our messages the IDs successMessage and errorMessage.

Page Code

The page code handles the functionality of expanding and collapsing the additional section of the form. It also handles the submission of the form data to the database collection. Let's look at the implementation of this functionality one part at a time.

Before getting started, we need to import the wix-data API, which we use to submit the form data to the database collection. Imports must appear at the top of the code.

import wixData from 'wix-data';

Now let's add code to the $w.onReady event handler. This is the event handler that we use to set up the page while it loads. The onReady code needs to create a couple of event handlers for the form's elements. The first handler handles the expanding and collapsing of the additional section of the form. The second handler submits the form data to a database collection.

To create the onReady event handler:

• Start by calling the $w.onReady() function and passing it an event handler function. This code is already added by default on each page.

   $w.onReady(function () {});

• Inside the onReady event handler add an event handler that handles the event which causes the form to expand or collapse. In our example, the event to handle is the onChange event of the haveRestrictionsRadioButtons element. This event handler runs when a site visitor selects one of the radio button options.

   $w('#haveRestrictionsRadioButtons').onChange(() => {});

• Inside the onChange event handler, check if the Yes radio button is the one that is selected.

• If the Yes radio button is selected, expand the container that holds the additional input elements.

   if ($w('#haveRestrictionsRadioButtons').value === 'Yes') {

        $w('#restrictionsContainer').expand();

     }

• Otherwise, if the No radio button is selected, collapse the container that holds the additional input elements.

   else {

        $w('#restrictionsContainer').collapse();

     }

• Also inside the onReady event handler, add an onClick event handler on the submit button. The onClick event handler checks if the data entered into the form is valid using the validateForm() function. If the data is valid, it calls the submitForm() function described below to insert the form data into the collection. If the form is not valid, it calls the updateFormValidation() function to show the visitor which fields are not valid. Note that in this example we check the validity of some of the elements. You can always add code to check the validity of whatever elements you'd like.

   $w('#submitButton').onClick(() => {

     if (validateForm()) {

       submitForm();

     } else {

       updateFormValidation();

     }

   });

Next, let's take a look at the code for submitting the form data to the database collection. We've packaged this code in a function named submitForm.

To create the submitForm() function:

• Add a function named submitForm that doesn't take any parameters.

   function submitForm() {}
 

• Inside the function, start by getting all the form data. There is one form value that needs special treatment. The number of guests is stored in the collection as a number. But the value of a text input is always a string, even if its type is set to Number. So we need to convert the text input's value to a number before putting it in the collection.

   const numGuests = Number($w('#numGuestsInput').value);

• Now, we package the form data in an object so we can insert it into the collection. The object's keys are the field keys from the collection and their values are the corresponding values pulled from the form elements.

   const formData = {

     name: $w('#nameInput').value,

     numGuests: numGuests,

     email: $w('#emailInput').value,

     foodRestrictions: $w('#restrictionsCheckboxes').value

   };

• Then, we can reset any messages that may have been shown if the visitor had already submitted the form.

   $w('#successMessage').hide();

   $w('#errorMessage').hide();

• Finally, we insert the form data into the collection using the wix-data API we imported. Depending on the success of the insert, we show an appropriate message.

   wixData.insert('Bookings', formData).then(() => {

     $w('#successMessage').show();

   }).catch(() => {

     $w('#errorMessage').show();

   });