With Studio.Design, you can easily add forms to your website. Once placed, you can customize the fields and design of each form.
In this article, we'll use [Form 1] as an example to walk you through how to edit and add fields.
Related article: Placing a form and configuring overall settings
Adding form parts
Open the Add panel from the navigation on the left side of the screen.
Click the [Basic] tab.
Click any form part under [Form Parts] to place it on the screen.
Drag the form part you placed—either on the screen or in the Layer panel—into the form's parent box.
You can edit the style and layout of each box inside the form just like any other box.
Note: Form parts will not work if placed outside the [Form1], [Form2], or [Form3] boxes added from the Add panel.
Types of form parts
(1) Input / Textarea boxes
Both of these boxes are designed for text input.
The Input box works well for short, single-line text entries.
The Textarea box is better for longer text, especially when it spans multiple lines.
How to set it up
Select the Input box. If it's hard to select on the screen, use the Layer panel instead.
Open the [Input] tab on the right panel. If the right panel is closed, open it first.
Configure the following settings.
Field name: The name used in the form dashboard for managing responses.
Required field: Check this to make the response mandatory.
Type: Choose the input type from text, email, or phone number.
Placeholder: Set the guide text shown in the input field before someone clicks it.
Note: Currently, when [tel] is selected, the form can still be submitted with non-numeric input.
(2) Select box
Use this when you want to show multiple options in a dropdown for users to choose from.
How to set it up
Select the Select box. If it's hard to select on the screen, use the Layer panel instead.
Open the [Select] tab on the right panel. If the right panel is closed, open it first.
Configure the following settings.
Field name: The name of the field.
Required field: Check this to make the response mandatory.
Placeholder: Set the guide text shown in the input field before someone clicks it.
Options: Configure the choices. You can reorder, rename, or delete them.
(3) Radio buttons
Use this when you want to present all options and have users pick just one. (Currently, Studio.Design's built-in features don't support pre-selecting a button by default.)
The options use the List feature, so the same style (font, font size, color, etc.) applies to all options. Because of this, the tab you use in the right panel depends on what you're configuring:
Overall settings: [Radio] tab
Design settings: [Box] tab and [Transform] tab. *Editing options for radio button design are limited.
Content of each option: [Data] tab
How to set it up
Select the RadioList box. If it's hard to select on the screen, use the Layer panel instead.
Open the [Radio] tab on the right panel. If the right panel is closed, open it first.
Field name: The name used in the form dashboard for managing responses.
Required field: Check this to make the response mandatory.
4. Open the [Data] tab on the right panel. If the right panel is closed, open it first.
5. Rename, reorder, add, or delete options.
(4) Checkbox
Use this when you want to present all options and allow users to select one or more. (Currently, Studio.Design's built-in features don't support pre-selecting a button by default.)
The options use the List feature, so the same style (font, font size, color, etc.) applies to all options. Because of this, the tab you use in the right panel depends on what you're configuring:
Overall settings: [Checkbox] tab
Design settings: [Box] tab and [Transform] tab. *Editing options for checkbox design are limited.
Content of each option: [Data] tab
How to set it up
Select the RadioList box. If it's hard to select on the screen, use the Layer panel instead.
Open the [Checkbox] tab on the right panel. If the right panel is closed, open it first.
Configure the following settings.
Field name: The name used in the form dashboard for managing responses.
Required field: Check this to make the response mandatory.
Open the [Data] tab on the right panel. If the right panel is closed, open it first.
Rename, reorder, add, or delete options.
(5) Confirm (single checkbox)
Use this when you want to ask viewers to confirm something.
How to set it up
Select the Checkbox. If it's hard to select on the screen, use the Layer panel instead.
Open the [Checkbox] tab on the right panel. If the right panel is closed, open it first.
Configure the following settings.
Field name: The name used in the form dashboard for managing responses.
Required field: Check this to make the response mandatory.
(6) File upload box
This lets form respondents upload files. For more details, see the article below.
How to set it up
Select the File box. If it's hard to select on the screen, use the Layer panel instead.
Open the [File] tab on the right panel. If the right panel is closed, open it first.
Configure the following settings.
Field name: The name used in the form dashboard for managing responses.
Required field: Check this to make the response mandatory.
Placeholder: Set the guide text shown before someone uploads a file.
(6) Submit box
This is a dedicated box for the form submit button. The default text is "Submit".
How to change the button text
Select the text layer inside the input box. If it's hard to select on the screen, use the Layer panel instead.
Open the [Text] tab on the right panel. If the right panel is closed, open it first.
Replace the text.
Things to keep in mind when editing form part field names
Field names are shown in the form dashboard.
If you change a field name after it's already been set, the old field name stays in place, and the new field name is added as a separate column for tracking responses.
If you add a new field or rename an existing one after the form is live, the changes won't show up in the dashboard until a response is submitted (for example, through a preview).
We recommend testing the form by submitting a response through the Live Preview URL.
check box checkbox checkbox checkboxlist