Home Page Elements Form Field

Form Field

Last updated on Aug 19, 2024

The Form Field Widget allows you to add a single form to your page to build opt-in or survey forms.

Add Forms 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 Field element to change the following:

  • Text Field Settings

  • Field Font

  • Position & Padding

  • Field Size

  • Alignment

  • Borders & Shadow

Text Field Settings

As a default, a text form field will be the form field selected. When you click the dropdown, 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

  • 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 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 Size

Use the dials to adjust the width and height of the form

Alignment Settings

You can set the 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 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 into 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

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

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