As I was writing an article about creating a Contact Form widget (Setting up a contact form on your website with the Elfsight Contact Form widget), I realized that it would be a good idea to explains the types of elements in greater detail, and to touch upon the algorithm of breaking your form into steps. It is fairly easy, once you know how to do it, so I’m going to make sure that you do 🙂
What are form elements?
Form elements are basically the building blocks that allow you to construct your form. Our Contact Form and Form Builder apps 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 checkout each of them one by one.
Form Elements available with Contact Form and Form Builder
The first type of elements is Inputs:
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. It wasn’t originally part of the widget’s settings, but many of our people have requested it, and as we’re always happy to give you what you really need, we’ve implemented this option. Here’s how it works.
When you select File, you get to the File input editor:
The label field (1) 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 (2) and File Drag Text (3) fields allow you to set your own messages if that is necessary.
In the Description (4) 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 (5) – please, pay extra attention to it, and keep in mind that the size of attached images should be below 25 mB. All the available file types are checked by default, so if you only need some specific types of files, make sure that you check the right ones.
So 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.
The next element type featured in our app is Selects.
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:
The Label (1) 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 (3) 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 (2) field.
After you’re done editing the options, you can break your radio buttons field into several columns by selecting the value in Columns (4) 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. As an example, let’s use header and text paragraph right before the radio button choice.
To add a static header to the vote, all you need to do is enter the text you need to the header field. You can also fill in the caption field, or keep it blank:
To add a static text, select Text Paragraph option and enter the text you need. You can also break the static text into columns, if you like:
And now let’s see what we’ve got 🙂
Please, remember that you can rearrange the sequence of elements by moving them up or down in the list on Form Tab
The next element type is rating scales. It 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 (1) field and choose the maximum rating in Stars Count (2) field. You can also add a description (3) or break this field into several columns (4).
And so we’ve gone over all the available types of elements but one. Let’s move on to it, and find out why is it so important that it gets to have its own section 🙂
Using structure elements to break your form into steps
The last but not the least – this totally applies to the last type of form elements, as the Structure element is tremendously important. It is the structure element that allows you to break your form into several stages or steps.
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 or group.
Fill in Name (1) and Descripton (2) fields and move on to adding the elements you need:
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 I’ve described above. Let’s add the select element again.
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.
That’s about it for now, I believe I’ve covered the most crucial points! If you have any other questions about elements arrangement, or any suggestions or requests, please, feel free to message us at your convenience!