Forms Addon Integration

Follow through to learn how to create a Form Area. Even if you are already familiar with the concept you might learn something new.

Ensure Essentials has been installed correctly by following the installation guide. From there, open the Customizer -> Essentials -> Advanced section and enable the Forms Addon, then save the changes and refresh the page.

1. Create a Form Area

A form must be structured inside of a Section or Column enabled as a Form Area, which can be done easily with just a few clicks.

1. Access the Customizer Builder area.
2. Locate a Section or Column which should be enabled as Form Area.
3. Open it Advanced Settings Tab and toggle the Enable as Form Area checkbox.

2. Add After Submit Actions

At least one After Submit Action must be set for every form, otherwise, it will not trigger any action. In this case are going to greet the user adding a Message Action, but for more advanced scenarios, adding Email and SaveTo actions would be necessary to send an email and save the submitted data.

1. Open the Form Area configuration created in the previous step.
2. In the Actions tab add a new action of the type Display Message.
3. Input in the Message field a Thank you for your submission, your comment was {comment}!.

3. Add Form Fields

Now we need to add fields to our form. Let's include a Comment field and a Submit button.

1. Go back to the builder main panel and add an element of a type Textarea from the Form Essentials group.
2. Open it configuration panel and input comment in the Control Name setting.
3. Add a Submission button by adding a Form Button element from the same group.

4. Test The Submission

Let's give it a try!

1. Locate the form in the Builder preview.
2. Input a message in the Textarea and Submit.

Congratulations if you can see a modal with the submitted message!