Form
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
