Pop-up forms

Pop-up forms are an effective way to connect with visitors to your website. They appear at the right moment, encouraging users to take a specific action, such as subscribing to a newsletter. Unlike intrusive ads, modern pop-ups are thoughtfully designed – aligned with the website’s content, discreet, and genuinely valuable for the user.

Why are they effective? Because they show up exactly when the user might be interested in taking advantage of an additional offer or information.

Their strength lies in simplicity and relevance. With forms, you can:

• Collect information about customer preferences, helping you better match your offer and marketing communication to their needs.
• Survey customer opinions about products, services, or shopping experiences. Implementing changes based on this feedback shows that you value their opinion.

Requirements

Before you start creating forms, make sure that:

• The Web Tracking channel is properly configured. This step requires installing tracking code on your store’s website.
• You have marketing consents configured in the platform. When filling out the form, customers will need to give consent for contact. In the platform, you can configure the following consents for use in forms: for email messages, SMS, or general consent. You can add consents in Settings > Consents > Create new consent.
• Your website has data layer implemented. This is a layer in the website code that stores and organizes information about your store users’ behavior, such as clicks, form interactions, and placed orders. We send information available in the data layer to the platform using the tracking code.

Pop-up form settings

Click Create form > Pop-up and go to the editor. Adjust the form settings in the following steps:

Basic settings

1. Give your form a name. It will be visible in the table and make it easier to find the form.
2. Choose the website where the form should be displayed.
3. Set the time range during which the form should be shown to your website visitors.
4. Choose the frequency of form displays: once per session or according to your own schedule.
5. Select which indicators you want to track for this form.

Form behavior, display conditions, and audience type

1. Choose the event that will trigger the pop-up form:
   • Visit – pop-up form will appear when the user enters the page.
   • Exit intent – the form will appear when the user moves the cursor outside the store window.
   • Scroll – the form will appear when the user starts scrolling the page. Set a threshold (page scroll depth in %) that will trigger the pop-up.
   • Custom event — your form will appear when a user takes a specific action in your store, like clicking a button or link, instead of showing up right when they land on the page. To use custom events, you’ll need to complete a few extra steps. You’ll find the instructions in the How to set up a custom event section.
2. Decide if users can close the form window by clicking on the background behind it.
3. Decide what happens after form submission.
4. In the same section, check the Confirmation message option if you want to send customers an automatic confirmation message after submitting the form:
   • Default confirmation available in Settings > Consents > Confirmation messages > Default message
   • Other confirmation, e.g., designed specifically for this form.

5. Set additional form display conditions: page type and address, session duration, number of visited pages, or opt-out from showing the form again to customers who have already submitted it.
6. Decide who will be the recipient, what consents are necessary to display the form, and where the customers you’ll show the form should come from.

How to set up a custom event

How to live test a form triggered by a custom event?

Method 1: Trigger your form using the browser’s «Inspect» function:

1. Go to the Behavior tab in the content editor.
2. In the Events section, select Custom event.
3. You’ll see a script snippet: $$ecdp.api.getContent(«type», id, maxWaitTime).
4. Copy it and run it on your website — you’ll find instructions on how to do this in the next section.

If you don’t run the script, your custom event won’t work.

Parameters used in the method:

• type — content type, like form.
• id — content identifier.
• maxWaitTime — optional parameter (in milliseconds) that sets how quickly the system will try to display the form after it’s ready (0-10,000 ms).

You don’t have to include the maxWaitTime parameter.

Example 1:

Display form with ID 123 immediately after it’s ready.

$ecdp.api.getContent("form", 123);

Example 2:

Display form with ID 456 with a maximum wait time of 5 seconds.

$ecdp.api.getContent("form", 456, 5000);

Run the script in your browser

1. Go to your store’s page and open the Inspect function:
   • using your keyboard by pressing F12,
   • or right-clicking and selecting it from the context menu.
2. Select the Console tab.
3. Type or paste the copied script with your form parameters.
4. Press Enter to run the script.

This will trigger the form directly from the console, which is necessary to activate the custom event.

Method 2: Trigger your form by clicking a button or link

Instead of running the script manually from the console, you can attach it to a specific element on your page — like a button or link. This way, your form will appear automatically when someone clicks that element.

Below you’ll find two examples — using a button and a link. Both use the getContent method, which triggers the form with the specified ID.

Example 1: Button

<button id="myButton">Display a form</button>

<script> 
document.getElementById("myButton").addEventListener("click", function() {
    $ecdp.api.getContent("form", 586);
});
</script>

Example 2: Link

<a href="#" id="formLink">Display a form</a>

<script>
document.getElementById("formLink").addEventListener("click", function(event) {
event.preventDefault(); // Prevents the link from navigating
    $ecdp.api.getContent("form", 586);
});
</script>

In both cases, the script:

• points to an element (like #myButton or #formLink),
• «listens» for clicks,
• triggers the form with ID 586 after clicking.

Make sure your chosen form has Active status, otherwise it won’t display.

Important notes

• Your form will only load after the script is triggered.
• Your form will display only once per page view, for the same combination of type and ID parameters.
• Custom events only work for forms with Active status.

Form window placement on the page

You can set how the form will display on computer, phone, or tablet screens during the form content design stage.

1. Go to the Content step.
2. Select the Pop-up tab in the right panel.
3. In the tab, you can set:
   • Form position on screen – center, left, right, top, bottom.
   • Form window width and height – in pixels or percentages; you can also choose automatic window adjustment options.
   • Rounded corners – this option allows you to round the corners of the displayed form window.
4. In the following sections, you’ll set:
   • Content – appearance and alignment of content displayed in the pop-up, font type and color, and background color.
   • Overlay – background color that will appear under the pop-up. This makes the form window more visible and helps users focus on the form.
   • Close button – appearance and placement of the button to close the form window.
   • Links – color, underline, and hover state appearance of links.

Design form content

In the editor’s Content section, you’ll design the form’s content and appearance. You’ll find a ready-to-edit template here, but you can also design your own.

1. Click the Content section in the right panel.
2. Drag and drop the Heading and Text block to the workspace.
3. Place the Form block under the Text block.
4. Add an engaging copy.
5. Click the block to open the editing menu in the right panel.
6. In the Display conditions section, you’ll set additional rules for how the form should display. If the options available in the Behavior, Conditions and recipients, and Placement stages aren’t sufficient, you can refine how the form displays and behaves here.
7. In the Attributes and consents section, choose:
   • Attributes (data) of customers you want to collect through the form, e.g., name, email address. If the attribute you’re interested in isn’t on the list, you can add it here: Settings > Customers > Custom attributes.
   • Consents that customers must give when submitting the form. You can add consents available in the form here: Settings > Consents.
8. In the same section, you’ll set the display order and appearance of fields with attributes, consents, and the form submission button. What can you do?
   • Add a label displayed above the attribute field, e.g., email address, name.
   • Add helper text that will display in the selected field.
   • Decide if filling in a particular field is mandatory.
   • Add consent name and decide if the consent should be hidden (the consent will be given along with submitting the form, no checkbox and consent statement will be visible int the form).
   • Choose how consent should be displayed: radio buttons or switch.
   • Set the displayed field width.

In subsequent sections, you’ll set the appearance of the entire form, individual elements, and whether the form should be displayed in desktop or mobile view. You can also see how the pop-up form will present directly on your page with the Live test option.

You can find a description of other editor functions in the article: How does the editor work?

Design the thank-you page

In the editor, you can also design a thank-you page – the view that will appear to customers after submitting the form.

Displaying a thank-you page confirms to customers that their data has been submitted and maintains their positive experience in interacting with your store and brand.

The thank-you page will also help you track conversion and campaign effectiveness through traffic analysis.

You can set thank you page display options in the Behavior > After form submission section.

After selecting this option, go to the Content section. Above the workspace, on the left side, you’ll find a switch.

Set it to the After submission position. The thank-you page is ready for editing.

This is what a sample thank-you page looks like, consisting of the Headingr, Text, and Image blocks.

Measuring your results of your pop-up form#

You can track form effectiveness using two metrics:

• Views – shows the total number of form displays in your set time period, across all subpages of your store.
• Submitted – shows the number of forms filled out and submitted by customers.

You can find these metrics in the table available in Automation > Forms.