How to Set Up a Custom Pop-up Form
You can create a pop-up, select the element type you want to include, collect the information you need, and save it to your variables for further segmentation and personalized interactions.
Let's take a look at how to create and set up a custom form.
Create a new pop-up, or start editing an existing one. In the "Target action" field, select "Custom form.”
Set Up Fields
By default, any custom form already has one entry field. If you want to add another element, you can skip this step and delete the input field.
Select a Data Type
To select the data type you want to transfer, click {}, and select an existing field, or create a new one.
If you want to create a new field, enter its name — it will be displayed in the placeholder — and select a data type.
| String | Used to enter up to 255 characters. |
| Number | Used to enter numbers. |
Used to enter email addresses as example@example.com. |
|
| Phone | Used to enter phone numbers. We recommend using the international format with a country code. |
You can also include an additional title that will be displayed above the field. Turn on the toggle, and enter your title.
Set Field Requirements
Select your field type.
| Required | User data can be sent only after the user fills in all the required fields. Such a field will be marked with an asterisk (*) to notify users that this field is required. |
| Optional | User data can be sent without filling in optional fields. |
Link with a Variable
You can automatically prefill pop-up fields for user convenience. Pop-up data will be added via Local Storage and Cookies (to retrieve data from a user’s browser local storage) or via API (to retrieve data from your system) and transferred after a user submits a form.
Next to the field, click {}, and select a variable you have created in the pop-up settings.
Learn more: How to Transfer Custom Variables.
You can also hide fields if they are prefilled with variable values. For example, if users have already registered on your website, you don’t have to ask them for this information the second time.
By default, if your system or users have available values for a variable, your widget automatically inserts these values into the fields. Your users can view and edit them and submit the form afterward.
If you enable the "Hide this field if prefilled" option, your prefilled fields will be hidden from users, and their values will be transferred when a user submits your form.
Add More Elements
To add other elements to your pop-up, click Add element, and select an element type.
You can add up to 5 elements to one pop-up. To show more information or collect more data, we recommend that you create pop-up flows.
You can add and set up the elements described in the table below.
| Entry field |
A field where users can provide their data. When creating a new field, you can add a field name and select the following data types: string, number, email, or phone. Data points will be transferred to the linked variables in the same way they were collected from users. |
| Checkbox |
An element where users can select a checkbox. For example: "I consent to personal data processing." When a user selects a checkbox, the field text will be transferred to a variable of the "String" type. |
| *Multiselect |
An element where users can select several checkboxes. For example: "I consent to personal data processing" and "I agree to receive email campaigns." Data points are stored in a shared variable as an array. For each field, add a text users will see, and select a value that will be transferred to a CRM variable. |
| *Dropdown |
An element where users can select one item from a list. For example, a campaign category they like. For each field, add a text users will see, and select a value that will be transferred to a CRM variable. |
| *Radio buttons |
An element where users can select one value from a list using a radio button. For each field, add a text users will see, and select a value that will be transferred to a CRM variable. |
| NPS survey |
An element where users can rate a service or a product using buttons. You can display your rating options as stars, emoji, hearts, or numbers. You can also add a field where users can enter their comments. Data will be saved to a variable depending on the selected format. Learn more: How to Create an NPS form. |
| Pop-up flow |
An element that launches another pop-up to create a pop-up flow. You can select another pop-up and add a name for a button that launches this pop-up. Learn more: How to Create a Pop-up Flow Scenario. |
*When adding several options (in the "Multiselect," "Dropdown," and "Radio buttons" elements), you can leave one option blank or mark it to prompt users to select it.
Set Up Your Element Order
To change the order in which your fields or elements are displayed, hover over the icon on the left, and drag and drop it to the required place.
Set Up a Button
When users click the submit button, their data will be transferred from the filled form to the "Lead" section, email service, and CRM system provided you set up the corresponding options.
We recommend that you keep your pop-up size in mind and come up with a clear and concise call-to-action button name.
Set Up Additional Options
You can also set up additional pop-up options or select where to save your subscribers’ data. Turn on the corresponding toggle, and set up your elements.
| Open this pop-up upon launcher click | Opens your selected pop-up once a user clicks the launcher
Learn more: How to Create a Launcher Pop-up. |
| Request subscription confirmation |
Sends a confirmation email once a user fills in your email address field. Data will be transferred only after a user confirms their subscription (double-opt-in). You can select an email from the ones created in the subscription tool settings and add a message that will be displayed once a user submits your form. |
| Save to a mailing list | Saves data to your selected mailing list. A variable name will be retrieved from a placeholder or element, and a value will be retrieved from a filled field or a pop-up element a user selected. |
| Create a deal in CRM |
Saves data as a deal and contact to your CRM system. You can select a pipeline, enter a deal name, and choose a deal stage. When contact data points are saved to your CRM system, new contact fields will be created. |
Set Up Display Conditions and Publish Your Pop-up
Go to the “Display condition” tab to customize your pop-up display scenario to user actions on your website. You can add multiple conditions using the “Or” or “And” binding operators and select the order of their execution.
Read more: Condition Types.
Once you set up all your conditions, click Save and publish.
The created pop-ups will be displayed within your project in the “Pop-ups” tab.
Last Updated: 10.11.2023
or