The Form Widget allows you to add multiple form field to your page to build optin forms or survey forms.
When you add a Form Widget, 3 form fields would appear, 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:
Position & Padding
Borders & Shadow
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 allows 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 that it does not overlap with the icon. Adjust the padding if the field height become smaller.
You can change the follow text settings for the form fields:
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.
Use the dials to adjust the space between fields
Use the dials to adjust the width of the form fields
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)
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