How to create a pop-up
Use pop-ups and start gathering contact information from your visitors
Pop-up forms let you gather data from your visitors. There are two ways to create them.
1. Go to Tools -> Pop-up.
2. Click Create new.3. You can either create your own pop-up with a form builder (a simple drag&drop editor) or with a code editor, which allows you to write your own form.
Drag&Drop pop-up builder
With this builder, you can create two type of pop-ups:
- Redirect pop-ups
Select the layout of the pop-up: whether it should appear in the bottom or top of the page or whether it should cover the entire screen. Select one of the app's templates depending on your needs, e.g. a discount, special offer, or rate request pop-up.
To change the pop-ups content, click Next. Here, in the fields under Style, you can write your own Header, choose the Buttons style, Text Color, Background Color, and select a Background image. Click the box, Inputs, and add more input fields or checkboxes, e.g. user acceptance of terms and policy. Click Next to save the changes. Name your form and click "Save". Your form is ready! You may now create an automation with it.
Add your own fields to the pop-up
Do not change the id of the button in redirect pop-ups! The id should stay as id=submitButton or which ever id the button has. If you change it it will no longer generate statistics for clicks and CTR%.
To edit the form from the code position, go to "Tools" -> "Pop-ups" and select "Form Code Editor". The automatic template appears in the editor; you can select existing templates by clicking the box Choose template. You can add your own code lines or select an existing one.
Make a one-line break between two lines of code that are associated with elements you want to put the new field between, as on the screenshot below:Click on the space then, from the drop-down menu, click on Insert Field. Click on the attribute you want to gather data for.On the preview page, you should already see the new field.
If you want to add a default text in the field, before the ending bracket of the form field code, enter the following: placeholder="your default text".
Read more about the correct preparation of input in this article.
How to display pop-ups
Displaying forms takes place in the module, "Automation", and can be done without any coding skills.
Below, you can find articles about action modules related to forms.
Exit intent pop-up
Learn how to create an “exit intent pop-up” here.
Learn about common mistakes here.