The Form Widget allows you to add multiple form fields to your page to build opt-in forms or survey forms.

When you add a Form Widget, 3 form fields will be displayed, while a Form Field Widget will only give you 1 form field.

Add a Form to the Page

Click the Add [+] Button to slide out the Page Elements menu. Click the Form element from the menu, then drag it to a section on the page.

Property Settings Menu

Click the [settings icon] to load the property settings of the Form element to change the following:

• Form Builder

• Field Font

• Position & Padding

• Field Spacing

• Field Size

• Alignment

• Borders & Shadow

Form Builder

• Add a form field

• Delete a form field

• Edit a form field

• Change the order of the form fields

Edit a Form Field

As a default, a text form field will be the form field selected. When you click edit, you'll be able to select other types of fields.

• Text fields: name, email, company, address fields and credit card information fields

• Custom Fields: text, password, checkbox, text area, select, date, content, number, currency and dropdown

Placeholder text - this is the text that appear in the field

This field is Required - if enabled, the form can only be submitted if there is content

Other Form Options

The other form options allow you to add more information about your form field. Click the 3 dot menu beside the required field option.

• Set the Label - this will appear on top of the field

• Set the Form Item Name

• Set the Description - this will appear on top of the field, below the label

• Set the Columns - allows you to adjust the size of each field so that they can all fit in 1 row. In 1 row, there are 12 columns, so if you want your 3 fields to be equally placed in a row, you need to select 4 columns for each of your fields. In the example below, First Name occupies 4 columns, Last Name occupies 5 columns and Email occupies 3 columns.

• Set the Initial Value - the field will be pre-filled with this text. In the example below, the user is asked to enter their URL, but we have pre-filled the first part with "http://www." so that they will only have to type in their domain.

• Set the Icon Selector - allows you to select an icon that appears in the field.

Tips: If you have placeholder text, add some space before the text so it does not overlap with the icon. Adjust the padding if the field height becomes smaller.

Field Font

You can change the following text settings for the form fields:

• Font Style

• Font Size

• Font Color

Position & Padding

• Position - You can move the object’s position upward or downward.

• Padding - You can control the space around the text inside the text form field.

Field Spacing

Use the dials to adjust the space between fields.

Field Size

Use the dials to adjust the width of the form fields.

Alignment Settings

You can set alignment of the text field to the left, center, or right.

Borders & Shadow Settings

You can adjust the following border settings:

• Border Style (solid or dashed)

• Border Color

• Border Thickness

• Rounded Corners

• Border Shadow

Other Element Options

Click the dropdown arrow next to the settings icon of the element or right click on the element to show the the other options.

• Cut - the element will be removed from the page and can be pasted in another part of the page or on a different page

• Copy - the element will be copied and can be pasted in another part of the page or on a different page

• Paste Below - a copied or cut element will be pasted below the selected element

• Rename - the element will be renamed instead of having the default element label

• Duplicate - the element will be duplicated and placed below the selected element

• Delete - the element will be deleted from the page

• Form Settings - it will open the settings menu on the left side of the screen

• Help with Forms - it will open up a new tab and redirect to a help article about the element