Form Fields – A list of the fields in your form. You can duplicate, add or delete fields as you please. You can drag and drop to change their order.

Click on a field to view its settings.

1. Type – Choose the type of field you want (A list of types here)
2. Label – The name of the field, displayed on the form and on the email you receive from the user.
3. Placeholder – The frontend display name of the field.
4. Required – Switch it on to set the field as a Required field.
5. Column Width – Lets you set the width of the field. If you want a form with two fields in one row – set each field to 50%.

Types of Fields #

1. Text – A simple text field. i.e. Name
2. Email – An email type. Includes validation for email
3. Text Area – A textarea type. You can set the number of rows
4. URL – A website URL field
5. Tel – A telephone number type
6. Radio –  A radio type. Single choice. You can slide the Inline List for a horizontal style. Click for more options
7. Select – A select type. Dropdown list of options. Can set to multiple selection. Click for more options
8. Checkbox – A checkbox type. Check one or more options. You can slide the Inline List for a horizontal style. Click for more options
9. Acceptance – Add a terms checkbox for the user to accept
10. Number – A number type
11. Date – Add a date picker field
12. Time – Add a time picker field
13. File Upload – Allow your users to upload files
14. Password – Add a password field
15. HTML – Add an HTML field
16. Hidden – Add a hidden field. Hidden to the user, but visible to the Admin
17. Step – Add a step field for a multi-step form
18. reCAPTCHA – Add a reCAPTCHA. reCAPTCHA verifies the user is not a robot
19. Honeypot – Adds a Honeypot to your form

1. Input Size – Set the height of the fields. 
2. Label – Show or hide the labels on the form.

Form Style #

1. Column Gap – Set the space between the columns
2. Row Gap – Set the space between the rows
3. Label – Set the spacing, label color, and typography of the labels.
4. HTML Field – Set the spacing, color, and typography of HTML fields on your form, if any exist.

Form Advanced #

1. Margin – Set the margin of the form
2. Padding – Set the padding of the form
3. Z-Index – Set the Z-index of the form
4. CSS ID – Set the form ID
5. CSS Classes – Set the form classes

Actions After Submit #

Add actions that will be performed after a visitor submits the form (e.g. Open or close a Popup, Send an email notification, Connect to a third-party such as MailChimp, Redirect, etc.)

Content #

Actions After Submit #

Add new actions by clicking inside the Add Action field. This will bring up a list of available actions to choose from.

Send Results Via Email to the Site Administrator(s) #

Choose Email action. This will add an Email tab. The Email tab is used to send the form results to the admin user of your website. If you also need to send an additional email to the user who submitted the form, please see the Email2 option below.

Click Email tab to open its options.

1. To: The email address(es) the form submission results will be sent to. Add additional email addresses separated by commas.
2. Email Subject: The subject of the email
3. Email Content: The body of the email. By default, all form fields are sent via the shortcode: [all-fields]. Want to customize which fields are sent? Copy the shortcode that appears inside the fields you want to send and paste them here.
4. From Email: The “sent from” email address
5. From Name: The “sent from” name
6. Reply-To: The email address to send replies to
7. CC: Email addresses to CC
8. BCC: Email address to BCC
9. Meta Data: Available meta data is included by default. Click the “x” on each to delete any that you don’t wish to include in the email.
10. Send As: Select the format in which to send the email, either HTML or Plain

Redirect To A Thank You Page #

Choose Redirect action. This will add a Redirect tab.

Click Redirect tab to open its options.

1. Redirect To: Enter the URL of the page to redirect the user after form submission.

Multi-Step Forms allow you to create a form that has multiple steps, such that the user fills out a few fields, clicks Next, fills out a few more, clicks Next or Previous, etc. until the last step is completed, at which time the form can be submitted.

Steps are special form fields that act as separators and allow users to: 

• Choose the step indicator (e.g. Next / Previous)
  • Icon
  • Text
  • Icon + Text
  • Number
  • Number + Text
  • Progress Bar
  • None
• Add icon per step
• Customize steps appearance
• Control over Next and Previous items
• Validate each step fields immediately

Content #

See the Form Widget documentation for additional form elements.

Form Fields #

Form Name: Enter a name for the form

Form Fields – A list of the fields in your form. You can duplicate, add or delete fields as you please. You can drag and drop to change their order.

Click on a field to view its settings. For Step fields, specifically, the following options are available.

1. Type – Choose Step to create a new Step field
2. Label – The name of the field, displayed on the form and on the email you receive from the user.
3. Previous Button – Type the button’s label (e.g. Previous, Go Back, etc.)
4. Next Button – Type the button’s label (e.g. Next, Continue, etc.)
5. Icon – Select Button’s Icon, either None, Upload SVG, or select from Icon Library

1. Input Size – Set the height of the fields. 
2. Label – Show or hide the labels on the form.

Steps Settings #

1. Type: Select the design of the Steps indicators, selecting from None, Text, Icon, Number, Progress Bar, Icon and Text, or Number and Text
2. Shape: Select the border surrounding the Step indicator, either Circle, Square, Rounded, or None

Style #

Steps #

Typography: Change the typography options for the Steps numbers

Spacing: Set the amount of space between the Steps and the form fields

Padding: Set the amount of padding around the Steps numbers

Inactive | Active | Completed #

Primary Color: Set the color of the Steps numbers, for inactive, active, and completed states

Secondary Color: Set the color of the Steps background, for inactive, active, and completed states

Divider Width: Set the thickness of the divider line that separates each Step number

Divider Gap: Set the gap spacing between the divider line and each Step number