Form Builder

Transform any sublayout into a form area, configure form fields, and define actions to execute after a successful submission—all within a streamlined workflow.

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 where you want to create the form.
2. Create a new Sublayout and access its Advanced Tab settings.
3. Toggle the Enable as Form Area checkbox.

Add After Submit Actions

The section has now been declared as a form area and we can add 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 type Display Message.
3. Input Thank you for your submission, your comment was {comment}! in the Message field.

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. Return to the builder main panel and add a Textarea Element from the Form Essentials group.
2. Open its configuration panel and input comment in the Control Name setting.
3. Add a Button Element which will render as 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!