Skip to content
Essentials for YOOtheme Pro

Form Builder

Essential Forms integrate seamlessly with YOOtheme Pro's layout builder, letting you send emails, save submissions, display custom messages, or connect with external services—all configured visually.

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.

Enable {{ $frontmatter.addon }} Addon

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

Create Your First Form

An Essential form is structured inside a Form Element. Let's create one.

Create a Form Area

  1. Open the layout builder where you want to create the form.
  2. Add a Form Element from the Essentials group in the builder elements panel.
  3. The Form Element is now ready to contain your form fields.

Add After Submit Actions

The Form Element can now have after submit actions configured 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.

Add After Submit Actions

  1. Open the Form Element settings created in the previous step.
  2. Go to the Actions tab and 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.

Add Form Fields

  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!

Form Submission Test

  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!