Types of elements available with Contact Form
In this article
What are form elements?
Form elements are basically the building blocks that allow you to construct your form. Our Contact Form app offer five different types of elements that do different things – inputs, selects, static text fields, rating scales and structure.
To get to the list of elements, you need to click on Add button on Form tab of the widget’s settings:
This will redirect you to the screen with the different elements. Let’s examine them one by one.
Form elements available with Contact Form
These elements are crucial from the point of view of allowing your visitors to interact with your form, submitting the information you need. Whenever there’s a field that needs to be filled in by your visitors, this is going to be one of the Input fields.
Most of these fields are pretty obvious, and they don’t require any explanations, but I’d like to draw your attention specifically to the File input. What this input does is allow to add attachments to the form. When you select File, you get to the File input editor:
The Label field is where you can name the file field. You’re welcome to keep the default name, or enter your own.
To upload a file to the form, you can either select the right file from your computer, or drag and drop it into the file area. File Button Text and File Drag Text fields allow you to set your own messages if that is necessary.
In the Description field you can add a description of the field that will be displayed below the label. You can add your own description, or keep this field blank.
The next field is Allowed File Types – please, pay extra attention to it, and keep in mind that the size of attached images should be below 25 mB. This field offers two options - Any and Specified. If you select Any, your user will be able to upload files of all formats that are supported by our widget. Selecting Specified will let you choose which file types you need. All you have to do is check the right ones:
After you’ve configured the file element, it will appear right on your form and allow your users to add images or other additional files to the form.
Add one of these elements when you need to offer a choice to your visitors. Please, keep in mind that Checkboxes select allows for multiple choice, while the other types let you choose only one option.
To add a select, choose the type you need from the list, and you’ll get to the select editor screen:
Label field is where you enter your question or any statement that your visitors need to answer by making a choice. You can use the Description field to add an extra call to action.
By default, the radio button select offers only two options, but you can add extra ones by entering the options one under another to Options field.
After you’re done editing the options, you can break your radio buttons field into several columns by selecting the value in Columns field:
Static text is the next form element on the list. It allows you to add a header, a text paragraph or a label:
You need to use static text whenever you need to add some text directed to your visitors, that’s going to stay pinned to a certain place after you’ve finished editing:
Rating scales allows you to let your visitors rate your products or services. There are four types of scales available with our app:
Let’s take up the Star Scale as an example of setting the rating field. Enter the call to action line to Label field and choose the maximum rating in Stars Count field. You can also add a description or break this field into several columns:
Using structure elements to break your form into steps
To beak your form into steps, you need to use structure elements. Please, keep in mind that you can’t add an already existing form element to a step. If you need to create a form made up of several steps you need to add a structure element to the form before you add any other elements.
All the elements to be displayed on one step of the form have to be added to one and the same group, as each group equals one step. To start creating a form with several steps you need to select the structure element you need to use – divider, group or hidden.
When you click on Add, you’ll get redirected to the list of elements screen, where you can add the elements you need to the form the way described above. After you add an element to the group, this element will be displayed on group editor screen:
The group as such will be displayed on Form tab, and when you create a second group, it will be displayed on the Form tab as well. After you’ve added several groups, your form will automatically display Back and Next buttons, to let your users navigate between the steps:
When you’re creating a form of several steps, you can also add separate elements that are not going to be included in any groups. In these cases, the elements will be automatically placed separately and treated as separate steps.