The main benefit of using forms is to allow viewers a way to contact you directly from your site. Forms can be used to collect contact information as well as any number of other things.
Search for the “Form” Widget
The first step, once you are logged into the page editor is to search the widgets for “Form”.
Click & Drag Widget
Once you have found the widget, click and drag it where you would like it to appear.
Name the form
Naming the form is important. When you look through form responses, it is helpful to know what form the individual filled out.
Add, Duplicate, & Delete fields
You can add a new field by clicking “Add Item”. You can also duplicate and delete existing forms.
To reorder the items, click and drag them into the order you prefer.
Edit a Field
To edit a field, simply click on it, and all of its settings will be displayed.
Field Types
The type is the type of field you want. You can choose from all of these options:
- Text – A simple text field. Good for things like a name
- Email – An email. Includes validation for email
- Text Area – A text area type. You can set the number of rows. Helpful if someone is going to be typing a message or certain details
- URL – For website URLs
- Tel – For phone numbers
- Radio – Single choice. You can slide the Inline List for a horizontal style
- Select – Dropdown list of options. Can set to multiple selection
- Checkbox – A checkbox type. Check one or more options. You can slide the Inline List for a horizontal style
- Acceptance – Add a terms checkbox for the viewer to accept
- Number – Only allows numerical values
- Date – Allows you to choose a date from the calendar
- Time – Allows you to choose a time
- File Upload – Allow users to upload files
- Password – Add a password field
- HTML – Add an HTML field
- Hidden – Add a hidden field. Hidden to the user, but visible to the Admin
- reCAPTCHA – Add a reCAPTCHA. reCAPTCHA verifies the user is not a robot
- Honeypot – Adds a Honeypot to your form. A honeypot is a hidden field designed as a decoy for spambots that are filling out forms. Humans won’t see the field, so they won’t fill it out. Because a bot cannot tell that the field is hidden, it will fill it out. If a honeypot field is not empty upon submission, the form is obviously a bot-filled spam submission and will be automatically rejected.
Field Labels & Placeholders
The “Field Label” is the name of the field displayed to the viewer. It also will be the name of the field when the information is sent to you. This is helpful and important when it comes to collecting the data.
- Be sure to set the label even if you plan on hiding it.
The “Placeholder” is the text displayed in the field to show the viewer what contents go in that field. This is only displayed on the front end.
- You can leave this blank if you wish as long as you have a clear label
Required Field
To set a field as “required” meaning they cannot submit the form without putting a value in that field, simply toggle the button next to “required”.
Column Width
This allows you set to the width of the field. If you want a form with two fields in one row – set each field to 50%.
Show Required Fields Mark
If you wish to show a “*” next to the required fields, make sure to toggle “Required Mark” as shown below:
Button Settings
Click on the “Buttons” dropdown to access button settings.
- The size changes the size of the button at the bottom of the form.
- Column width changes the width of the button.
- Alignment determines the placement of the button
- To change the text that is displayed on the button, edit the “Submit” section under “Submit Button“
- To add an icon to your button, click the “Icon Library” button and choose an icon of choice.
Email Dropdown
In the “Email” dropdown you can control where the responses to the form get sent. Below is a screenshot of what to do with this dropdown.
Custom Messages
If you would like to customize the success messages that pop up after the user submits the form, toggle “Custom Messages under the “Additional Options” dropdown, and replace any of the messages you wish to change.
Styling Form
Now all that is left to do is style your form. Here is a quick tour of the “Style” tab.