How to create a web form

Open "Weblayer" and then "Forms" in the main menu. You will see a list of all forms. You will see a list of all forms. Click "Create" in the top toolbar to go to the editor.

All your actions can be divided into three steps:

1. Basic form settings
2. Adding fields
3. Design

Let's create a customer satisfaction survey and use it to analyze each step in detail.

Step 1. Basic form settings

1) Enter a name for in-house use. You can also briefly describe the tasks that the form solves. Set access groups and tags for quick search.

2) Change the form ID, if necessary. ID is used when adding data from a form to an email template.

3) Select the language. All buttons and tooltips will be displayed in this language in your form. For example, if the user enters an invalid email address in the email field, they will see a tooltip in the selected language.

4) Activate the form by clicking "Published" in the upper right corner. Users can see and fill out only published forms. You can hide the form at any time by clicking on toggle switch again.

5) You can also set the start and end dates of the form publication. To do this, use the fields "Publish the form on the date" and "Hide the form on the date". This option will come in handy if you work with a short-term form, for instance, a form for joining a webinar. When the user tries to fill out an expired form, they will see this message:

Let's go back to our customer satisfaction survey. To get more feedback from our customers, we promise to give them a promo code for completing the survey. This offer will only be valid for ten days. This is what the settings will look like:

6) Option "Hide the send button" will hide not only this button from the user but also the buttons for switching between the form pages, until they fill all the required fields.

7) Now let's move to the settings of the final page of our form:

Final page is a page that the user sees after filling out the form and successfully sending it. The following options are available here:

• A link for a successfully completed form. It's a link that the user can follow after filling out the form. Once the user have filled out all the fields, they will see the "Go to the website" button. They may or may not click on it.

• Redirection to the specified link bypassing the final message. If you've specified the first option (a link for a successfully completed form) and now you also activate this one, the user will be immediately redirected to the specified link after clicking the "Send" button. They won't even see the final page.

• The text on the final page comprises a title and a message. The user will see it after filling out all the fields and pages of the form. By default it looks like this:

8) You can also add an additional code to the form.

With this code you can:

• stylize form pages (HTML + CSS);
• add scripts, for instance, for analytics or target registration (JavaScript).

Step 2. Adding fields to the form

The form comprises pages and fields. One field - one question. One page can contain any number of fields.

If the form is simple, one page is enough. However, if you create a long form it's better to divide it into several pages. This way you will be able to divide questions into meaningful groups. You can also divide your form into several pages if you add complex logic to it. For example, switching between pages depending on the user's response. If the form contains several pages, the user can switch between them using the "Next" and "Previous" buttons.

Go to the "Builder" tab:

"New Form" is the name of the web page where the form will be published. This name will be displayed on the browser tab. You can change it. For example, you can name the form "A Customer Satisfaction Survey".

At the moment, the form is empty. To start working in builder, add the first page - the "Add page" button:

Now you can add fields to the page. All fields are located in the panel on the left. To add a field, click on the element with the left mouse button.

Fields that are available in the form:

The basic settings of the fields in the form are the same. Almost all elements have:

• Title. It is displayed above the field in the form. It usually contains a question.

• Default value. This text is displayed inside the field and serves as a prompt for the user. If a person doesn't understand what to enter and in what format, the default value will help them.

• "Hidden form element" option. Use this option if you need to enter data in the form that shouldn't be changed by the user. The default value will be entered as the data.

• The "Add comment" button. This text is displayed under the field. Explain to the user in detail what information you want to get from them.

For example, settings of the Email field look like this:

And here's how the user will see this field in the published form:

Validation settings are available for each field. Using it, you check whether the data entered by the user meets your requirements. If the data does not pass validation, the user will not be able to send the form until this data is corrected.

Let's create a form with two pages. On the first page we will ask general questions to understand which segment the respondent belongs to. The second page will contain questions to find out the degree of customer satisfaction with our service.

1) Add the field "Paragraph". There is no title here, but there is text. Let's tell the user why they need to spend time on this survey.

2) Next, add the field "Short text" to find out the position of the respondent. In the title, enter "Your position:". We won't make this field required: maybe some people do not want to share this information.

3) After that, we need to find out how long the respondent has been using our service. You can use the "Short text" or "Number" field here. Then each user will be able to enter their own value. Most likely, it will look like this: "three months", "4 years", "5 years 8 months and 12 days". It will be quite difficult to process all this information flow, won't it?

To avoid such a situation, we will offer several ready-made answers. The "Single choice" field suits this option. The "Add option" button will allow you to add as many possible answers as you want. However, the user will only be able to select one of them.

We will make the field required: the period of use of the service is an important factor for analyzing responses.

The first page is ready. Here's what it looks like:

4) The next question to the respondent is why they chose our service. Here we will also give the options to choose from. However, the user could choose the service for more than one reason. So it is necessary to provide an opportunity to select several answers. To do this, use "Multiple choice". We will also make this field required. We will also allow the respondent to enter their own answer, if there is no appropriate one in our list (the "Allow your own option" button).

5) Learn about weak and strong points of our service. To do this, we will add the "Long text" field. We will give the user an opportunity to give their opinion in detail. Но пусть не переусердствует. But still we will limit the number of characters in the response to 800 so that the answer will not be extra long.

6) And finally, let's evaluate net promoter score (NPS).

NPS is a metric that shows how customers feel about your company. It is calculated based on user responses to the question "Would you recommend the company to your friends?". It is suggested to give a score on a scale of 1 to 10.

To evaluate NPS, add the element "Range". The scale range will be from 1 to 10, so let's set the number of items to 10. Let's choose to display the range as stars. The default value will be 5. We will also add a comment.

The second page is ready. This is how users will see it:

This completes the work in the builder: we have added all the necessary fields. The next step is to stylize the form.

Step 3. Designing the form

Go to "Design".

1) A preview of the form is available on the right - this is how users will see it. Any changes (adding fields, editing styles) are instantly displayed in the preview. The preview is not a static process. You can enter data in the fields, select answer options, switch between pages and even send the form to see what the final page will look like.

2) The fields for changing form styles are on the left:

• fonts (family, size)
• colour scheme (text, background, buttons)
• alignment (no alignment, left/right, centre)

3) You can also edit the text and icons in the buttons:

• "Forward" and "Back" (to switch between form pages)
• The button to go to the website on the final page