When you hover your cursor over a form field, you’ll see several icons:
1. The gear icon – opens the field settings.
2. The multi-directional arrow – allows you to move the field elsewhere in the form.
3. The two pieces of paper – copies the field, which can then be pasted below other fields in the form.
4. The red cross – deletes the field from the form.
When you click the gear icon, the field settings menu will be different depending on the field type you’re accessing the settings of.
Label and Label Position
The “Label” is the text that appears above the field.
The “Label position” lets you choose where the label is positioned around the field.
Placeholder Text
This is the text that appears inside the field to guide the user.
Custom CSS Class
This allows you to add a class to the input field.
This can be very useful if you know CSS, rather than dealing with nth-child fields.
Other Options (Checkboxes)
Most of these you won’t use, but the following are particularly useful depending on your use case:
- Hidden – hides the field completely from the form. If you use a default value (explained later), this can be useful.
- Hide Label – removes the label from the input field. You’d need to use placeholder text instead to explain the field to end users.
- Initial Focus – makes the form scroll to that field on load.
Data Tab
This tab isn’t always available for all field types.
It allows you to populate default values and customize the type of input.
Validation Tab
This is the second tab for most form fields.
You can set custom error messages based on different types of errors such as input too long, too short, or not the correct format.
However, the most popular use for the validation tab is the “Required” checkbox, which you can toggle on or off.
Field Tab
This tab allows you to change the “Property Name”.
For fields like firstname, email, or phone – do not edit this, as they are set up to push data directly to the CRM.
For custom fields like text field, text area, or select, it can be useful to rename the field.
Conditional Tab
This tab is for simple conditional logic.
You can choose whether the field should show or not based on the value of another field.
It’s straightforward to use, but there is a walkthrough on this in the tutorials section of the help docs.
Logic Tab
This tab allows you to perform more advanced logic, such as:
- Forcing fields to be required or not based on the input of other fields
- Editing placeholders and labels based on the input of another field
- Applying input masks
- Applying CSS classes
- Adding tooltips
This section is really only for advanced users, with the exception of forcing fields to be required.
