Getting Started

A Form is essentially a Builder Layout Section or Column enabled as a Form Area. This guide will walk you through the steps of setting up your first Form Area assuming you already are comfortable with the YOOtheme Pro Builder (opens new window) basics.

Structure

1. Create a new Section in the Layout and drop in a Textarea and Form Button elements, access the textarea element configuration, and set the Control Name as Message.
2. Go back to the Section and access it Settings Panel, locate the Enable as Form Area checkbox in the Advanced Tab, and toggle it. Notice that the Configuration button has been enabled.

At this point, our Form Area is ready to accept submissions but is missing the logic that would process those. Let's fix that by adding After Submit Actions.

Actions

1. Access the Form Area configuration by pressing the previously enabled button under the Section Advanced settings. Or simply press the Form Area icon.
2. Locate the Actions field and add a new Action of the type Message.
3. The action panel configuration will open, write in the message field the words Your message was {Message}!.

Notice the {Message} part, it's what we call Data Placeholders, a reference to the Submitted Data by its control name. Use them across Actions to customize the workflow as required.

Submission

Try and submit the form inputting some text in the textarea, if all went well you should see the submitted text in a Modal. That is our previously set action being triggered after a successful submission. Congrats!

TIP

By default Forms will not process or log any data, it's all delegated to the Actions. Your next steps could consider adding an Email Action to send a notification and a SaveToCSV Action to save the submission data.