Work with field items
A form can be used by visitors on your website for a variety of use cases, such as collecting contact information, surveying customers, ordering products, and much more. To create forms that are visually appealing and easy to use, you can add different types of items.
Field items are items on a form that the user can interact with.
In the right pane, you can edit the styles for your fields, labels, placeholders, and help texts. If you have multiple pages on your form, you can style each page individually.
When you've defined the style for one item, you can click Apply to all to apply it to all items of that type (action button, checkbox, radio button, or input field such as, for example, text, email, or date).
Add a field item to your form
To add a field item to your layout:
-
On the Items tab, in the Fields section, drag a field into a layout slot in the editing area.
When you've added the first field, a submit button is automatically added to the page.
-
To make the field item a required field, in the right pane, click the option Required.
-
You can continue to add more fields and add another page.
Most fields have a predefined name, which is not displayed to the user. You use the name when you specify a webhook to define the destination of the data that the user submits in the field. In the field settings, you can edit the Name field. The name must be unique on the form.
Move an item
To move an item:
-
In the editing area of the form editor, hover your mouse over an item to display the Actions menu.
-
Click and hold Move
to drag the item to a different row in the editing area.
Delete an item
You can delete items from a form.
To delete an item:
-
On the Items tab, clear the item check box. The item is removed from your design.
Alternatively, in the editing area, click the item you want to delete, then in the Actions menu, click Remove
.
After you have deleted an item, you can add it again.
Add a prefill value
You can add a prefill value to Email, Short text, Long text, Date, Phone, and Number fields. The prefill value will be displayed instead of the default value (for example, Enter text, or an example phone number).
To add a prefill value:
-
In the form in Design mode, click the field item you want to add a prefill value to.
-
In the right-hand pane, in the Prefill value field, enter the text you want displayed on your form.
-
In the top toolbar, click Preview to see the field with the prefilled value.
The user will be able to edit the value on the form.
Hide an item
You can hide an Email, Short text, Long text, Date, Phone, or Number field on your form to make it invisible for the users. This functionality is often used in conjunction with having a prefilled value for the hidden field, so your form can forward data to a third-party through the webhook without needing any user input.
To hide an item:
-
In the form in Design mode, click the field item you want to hide.
-
In the right-hand pane, click the Hidden field.
-
In the top toolbar, click Preview to check that the field has been hidden.
The field, together with any prefill value you have previously set up, will still be part of the JSON payload you can see in the preview.