Introduction

Forms on your site are an analog of a questionnaire. You can use forms to collect data from your site visitors. We will consider the following topics:

How to Add a Form on Your Site

To add a form on your site, start editing the site by clicking the edit icon or any place within the site. nullFigure 1. Edit Icon

After that, click the “Add” button in the upper left-hand corner. Select “Form”.nullFigure 2. Clicking the “Add” Button

Now the form is added. By default, it contains four fields: Email, Phone, First Name, Last Name. You can customize the form fields by deleting existing ones and adding new ones. We will discuss it in more detail below.nullFigure 3. The Form Added

By clicking on the form, a pop-up window with settings will appear. Once all the needed changes are made, click “Done”. After that, you can publish your site.nullFigure 4. Clicking the “Done” Button

If you want to delete a form from your site, go to its settings and click “Delete”.nullFigure 5. Clicking the “Delete” Button

You can also copy a form by clicking a copy icon.nullFigure 6. Copying a Form 

Form Settings

By clicking on the form, a pop-up window with settings appears. You can drag and drop this window within the page.nullFigure 7. Form Settings Pop-up Window

In the pop-up window with settings, there are four sections: Content, Settings, Tags, and Appearance. Let's have a look at each. 

Content

In the Content section, you can set Form Fields and a Form Submit button.nullFigure 8. Content Section

Form Fields
By default, there are four fields: Email, Phone, First Name, Last Name. The Email field is mandatory for filling in. 

You can delete any field by clicking the trash icon in front of the field.nullFigure 9. Trash Icon

You can also add a new field. To do this, click the “Add New Field” button. nullFigure 10. Clicking the “Add New Field” Button

When adding a new field, set up field type, field source, and field caption. nullFigure 11. Setting Up Field Type, Field Source, and Field Caption

You can make the field mandatory for filling by checking a corresponding box.nullFigure 12. Making the Field Mandatory for Filling

Choose a field type from the dropdown list. Six types are possible: Text, Number, Email, Phone, Message, and File.nullFigure 13. Choosing a Field Type

In the Field Source field, you can select in what system fields the information from the form will be saved.nullFigure 14. Filling In the Field Source Field

In the Field Caption field, enter the field name that the site users can see.nullFigure 15. Filling In the Field Caption Field

You can change the field type, field source, and field caption. To do this, click the arrow icon.nullFigure 16. Arrow Icon

Form Submit Button
To set up the Form Submit button, click the arrow icon as seen in Figure 17.nullFigure 17. Arrow Icon

You can set up button text.nullFigure 18. Setting Up Button Text

Choose the submit action type from the dropdown list. 

Figure 19. Choosing the Submit Action TypenullIf you select “Message”, enter the text of the message that will be displayed after form submission in the “Submit Message” field. 

Figure 20. The Submit Message Fieldnull

If you select “Redirect”, enter the link to follow after form submission in the “Submit Redirect Link” field.nullFigure 21. The Submit Redirect Link Field

Tags

In this section, you can manage tags of contacts. 

To add a tag to a contact, enter the tag you need to add into the “Add Tag” field and click “Enter”. After that click “Done” (see Figure 22). This tag will be added to the contact that will fill in the form.nullFigure 22. Adding a Tag

If you want to remove a tag assigned to a contact, enter this tag into the “Remove Tag” field and click “Enter”. 

After that click “Done” (see Figure 23). This tag will be removed from the contact that will fill in the form.nullFigure 23. Removing a Tag

To get more information about tags, please see the article How to Segment your Audience in Messaging.

Form ID and Autoresponders Settings

In this section, you can set up the form ID and autoresponders.nullFigure 24. Form ID and Autoresponders Settings Section

Form ID

In the “Form ID” field, enter the form identifier. The form ID is required to identify a certain form in the form statistics collection. 

For the first added form, the form ID should be named “FRM-1” by default. The next following forms added for this site automatically get the following identifiers: PAGES_FRM-1, PAGES_FRM-2, PAGES_FRM-3 etc.

Only the site administrator can see the form ID.nullFigure 25. The Form ID Field

Autoresponders

This section contains a list of autoresponders. The two autoresponders are created automatically: “Message to site admin” and “Message to site visitor”.nullFigure 26. Autoresponders Created Automatically

You can activate or deactivate a responder. To do this, use a toggle.nullFigure 27. A Toggle Enabled (Autoresponder Activated)

You can edit and delete an autoresponder. To do this, click the kebab menu and choose the option you need.nullFigure 28. Editing/Deleting an Autoresponder

You can also add a new autoresponder by clicking the “Add New Autoresponder” button. nullFigure 29. The “Add New Autoresponder” Button

When adding a new autoresponder, enter its name in the “Autoresponder Name” field. After that, select the autoresponder type. The two types are possible: Form Submitted (sent to a user once the form is submitted) and Submit Notification (sent to a site administrator once the form is submitted).nullFigure 30. Adding a New Autoresponder

Appearance

In this section, you can configure general appearance settings as well as settings related to appearance of form fields and form submit button.nullFigure 31. Appearance Section

General Appearance Settings

To go to general appearance settings, click the arrow icon as seen in Figure 32.nullFigure 32. Arrow Icon

You can set up the form fields’ layout, width, spacing, and margins.nullFigure 33. Setting Up Layout, Width, Spacing, and Margins

In the layout section, Column and Row are possible options.nullFigure 34. Column and Row Options

If Column is chosen, form fields are located under each other.nullFigure 35. The Column Option Chosen

If Row is selected, form fields are located in a row. nullFigure 36. The Row Option Chosen

Form Fields Appearance Settings

To go to these settings, click the arrow icon.nullFigure 37. Arrow Icon

The form fields' appearance settings are divided into two groups: Inputs and Labels.

In the Inputs section, there are settings related to the text entered into the form fields, form fields color and size. 

The Labels section contains settings related to the labels of the form fields.nullFigure 38. Inputs and Labels Sections

Inputs Section
Inputs settings include form fields style and size, corner rounding, border thickness, form fields text settings (font, size, weight, and letter spacing), and color settings.

In the Style section, there are two options: Outline (form fields that have a border) and Solid (form fields that have a fill without a border).nullFigure 39. Outline and Solid Options

If you select Outline, you can choose the color of the form fields’ border in the Color section (see Figure 40).nullFigure 40. Choosing the Color of the Form Fields Border

In addition, you can set the color of the form fields’ border displayed when you hover over them. To do this, go to the Focus section (see Figure 41). You can see how the color of the form fields’ border is displayed when hovering over them after publishing a site.nullFigure 41. Selecting the Color of the Form Fields’ Border Displayed when Hovering over Them

You can also set the border thickness in the “Thickness” section.nullFigure 42. Setting the Border Thickness 

If you choose Solid, you can select the fill color for the form fields in the Color section (see Figure 43).nullFigure 43. Selecting the Fill Color for the Form Fields

You can also set the fill color for the form fields displayed when you hover over them. To do this, go to the Focus section (see Figure 44). You can see how the fill color of the form fields is displayed when hovering over them after publishing a site.nullFigure 44. Setting the Fill Color for the Form Fields Displayed when Hovering over Them

In the Color section, regardless of which style is chosen, you can also find a setting called Text. In the Text section, select the color of the text entered into the fields.nullFigure 45. Selecting the Color of the Text Entered into the Fields.

Now let’s have a look at other settings you can customize regardless of which style is chosen.

In the Size section, there are two options: Inputs (setting the height of the form fields) and Text Areas (setting the height of the field of the Message type).nullFigure 46. Setting Inputs and Text Areas

In the Corner Rounding section, you can set up the rounded corners for the form fields.nullFigure 47. Setting the Corner Rounding

In the Field Text section, you can set up font, size, and weight for the text entered into the fields. Choose font and weight from the dropdown list.nullFigure 48. Setting Up Font, Size, and Weight

In the Letter Spacing section, you can set up letter spacing for the text entered into the fields.nullFigure 49. Setting Up Letter Spacing

Labels Section 
Here you need to select the style of the field labels from the dropdown list. Two options are possible: Inline (labels are displayed inside the form fields) and Standard (labels are displayed above the form fields).nullFigure 50. Selecting the Style of the Field Labels

If Inline style is chosen, you don’t need to set up anything else.nullFigure 51. Inline Style Chosen

If Standard style is chosen, you need to set up labels color, font, size, and weight as well as line and letter spacing and text alignment. Let’s review these settings in detail.nullFigure 52. Standard Style Chosen

In the Color section, select the labels’ color.

Figure 53. Selecting the Labels’ Colornull

In the Font section, select the labels’ font from the dropdown list.nullFigure 54. Selecting the Labels’ Font

In the Size section, set the labels’ size.nullFigure 55. Setting the Labels’ Size

In the Weight section, select the labels’ weight from the dropdown list.nullFigure 56. Selecting the Labels’ Weight

In the Line Spacing section, set the distance between labels and form fields.nullFigure 57. Setting the Distance between Labels and Form Fields

In the Letter Spacing section, set the letter spacing for the labels.nullFigure 58. Setting the Letter Spacing

In the Text Align section, select the labels’ alignment from the dropdown list.nullFigure 59. Selecting the Labels’ Alignment

Form Submit Button Appearance Settings

To go to these settings, click the arrow icon as shown in Figure 60.nullFigure 60. Arrow Icon

Form Submit button settings include button style and size, corner counding, button text settings (font, size, weight, and letter spacing), and color settings.

In the Style section, there are two options: Outline (button that has a border) and Solid (button that has a fill without a border).nullFigure 61. Outline and Solid Options

If you select Outline, you can choose the color of the button border in the Color section (see Figure 62).nullFigure 62. Choosing the Color of the Button Border

In addition, you can set the color of the button border displayed when you hover over the button. To do this, go to the Hover section (see Figure 63). 

You can see how the button border color is displayed when hovering over the button after publishing a site.nullFigure 63. Setting the Color of the Button Border Displayed when Hovering over the Button

You can also select the button border thickness in the “Thickness” section.nullFigure 64. Setting the Button Border Thickness

If you choose Solid, you can select the fill color for the button in the Color section (see Figure 65).nullFigure 65. Selecting the Fill Color for the Button

You can also set the fill color for the button displayed when you hover over the button. To do this, go to the Hover section (see Figure 66). 

You can see how the fill color of the button is displayed when hovering over the button after publishing a site.nullFigure 66. Setting the Button Color Displayed When Hovering over the Button

In the Color section, regardless of which style is chosen, you can also find a setting called Text. In the Text section, select the button text color.nullFigure 67. Selecting the Button Text Color

Now let’s review other settings you can customize regardless of which style is chosen.

In the Size section, you can set the button width and height.nullFigure 68. Setting the Button Width and Height

In the Corner Rounding section, you can set up the rounded corners for the button.nullFigure 69. Setting the Corner Rounding 

In the Button Text section, you can set up font, size, and weight for the button text. Select font and weight from the dropdown list.nullFigure 70. Setting Up Font, Size, and Weight for the Button Text

In the Letter Spacing section, you can set letter spacing for the button text.nullFigure 71. Setting the Letter Spacing 

Once you have made all the changes you need, click the “Done” button.nullFigure 72. Clicking the “Done” Button

Conclusion

Now you are familiar with forms and its settings. You can set up a form on your site now.