Form Builder

Empower a section, column or sublayout as a form area, set form fields and trigger actions after a successful submission.

TIP

Make sure Essentials for YOOtheme Pro is installed and Forms Addon is enabled.

How to enable Forms Addon

Open the Customizer -> Essentials -> Advanced panel and spot the Forms Addon checkbox. If is off, enable it, save the changes and refresh the page.

Notice that Forms is a premium addon not available in Essentials freemium.

Create a Form Area

An Essential form is structured inside a form area. Lets create one.

1. Open the layout builder you want to create the form at.
2. Create a new Section and access it Advanced Tab settings.
3. Toggle the Enable as Form Area checkbox.

Add After Submit Actions

The secton has now been declared as a form area and we can add and after submit actions to greet the submitter with a custom message.

TIP

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 After Submit Actions add a new action of the type Display Message.
3. Input in the Message field Thank you for your submission, your comment was {comment}!.

Notice the {comment} part

It's what we call Data Placeholders, and is one of the simplest and direct ways to reference submitted data.

Add Form Fields

Essentials comes with prebuild elements to structure a form as needed. Let's add a textarea to collect the comment and a submit button.

1. Go back to the builder main panel and add an Textarea Element from the Form Essentials group.
2. Open it configuration panel and input comment in the Control Name setting.
3. Repeat the process adding a Button Element which will render a submit button by default.

Test The Submission

Let's give it a try!

1. Locate the form in the builder preview.
2. Input a message in the Comment textarea and Submit.

You should see a modal with the submitted message!