To add a form:
- Open the extended add menu on the left bar.
- Click on ‘Box’ tab at the top
- Drag and Drop one of the ready made forms
Adding input fields to a form
To add input fields to an existing form, simply copy & paste one of the fields already on the form, then customize it as you wish.
To change settings to inputs, select the form object you want to edit, and then click on the <input> or <text area>.
You can edit the following settings:
- Tag: It refers to HTML tags. Setting this is not compulsory. Learn more about HTML tags here(link)
- Item name: The title of the input field.
- Item placeholder: The text that shows on the input field before a user enters something.
- Type: There are two possible types of input data: email & text. If you choose email, the user won’t be able to enter information that’s not in the email address format. There is “phone number” input data type, so text must be used in that case.
- Required: Check this option if you want an input field to be compulsory.
Customizing Form Style
You can customize the style of a form in the same way that you customize boxes & text boxes.
For example, you can change text style & font, button color & style, background and so forth.
Learn more about styling boxes here (link).
Learn more about styling text here (link)
You can add additional effects to make the form look more interactive, such as hover and active effect for submit button or focus effect for input fields.
Learn more about how to set hover, active and focus effects here.
Set notification email address
To get a notification when you receive a new form submission, select the form and click on Recipient settings/notification on the pop up window.
The project dashboard will open: enter your email address in the field.
See form submission results
You can visualize form submissions by going to your project dashboard under the Forms tab.
To access the project dashboard:
- From editor→ Click on the project name from the top bar.
- From STUDIO dashboard→ Hover on a project and choose ‘Dashboard’