How to add a popup to a landing page?
Adding popups to your landing page can motivate customers to take specific actions. Popups can include subscription forms or be used to promote sales and events. Popups can be triggered by certain actions or displayed with delay you can set.
Adding a popup
- In the landing page editor, click on the Add elements button.
- Drag and drop the Popup element to your page.
- Add elements into the popup by dragging them from the toolbar on the right. You can add multiple elements as signup form (use Form element and select Signup type), image or text box.
Popup settings
When you have the popup open in the editor, click on the blue Popup label in the top-left corner of the popup frame to open its settings.
You can configure/specify the following:
- Name – to easily differentiate between multiple popups when managing elements.
- Size – select from 5 predefined sizes or set up a custom one.
Custom size values are referring to the percentage of the page size that the popup will occupy when shown. - Position – choose where to show the popup on your landing page. Select from nine predefined positions.
- Display – choose what should trigger the popup, when, and how frequently.
- Block settings – the popup block is a framed workspace with a Popup label on the left. You can only see the blue frame after clicking on the object. It won’t be visible on your landing page.
You can customize its color, padding, border, radius, shadow, and overlay.
Overlay setting will affect how the rest of your landing page looks when the popup is displayed. - Hide on mobile devices – to hide your popup while your page is opened on a mobile device.
You may want to use this option to make your page simpler for mobile users.
Note: Popups set to On exit in Display settings won’t show up on mobile devices, as it’s not possible to track the visitors’ behavior there. Because of that, it’s a good idea to enable the Hide on mobile devices option for On exit popups.
Editing, duplicating or deleting previously saved popups
All popups created for your landing page are shown in the Manage pages element, under all pages.
Find Edit, Duplicate and Delete options under the vertical ellipsis on the right, next to the popup.
Steps for legacy landing pages
Use the forms to direct the visitors’ attention to your calls-to-action. Give the people who want to click off another opportunity to sign up. Here are the forms you can use:
- a signup form,
- an exit popup,
- a download popup,
- a fixed bar,
- an image form,
- a scroll form.
Learn more about the types of forms and when to use them
You can customize the design by clicking any form section to edit the text, style, and button. Or, do an A/B test to see which converts better by adding different form types or different designs to the page variants.
Note: The forms let you collect the visitors’ name and email address only. It’s not possible to add more custom fields or mark any of them as required. Also, keep in mind that the forms don’t work on thank-you pages and aren’t mobile-friendly.
Adding popup forms to a landing page
You add popup forms in the landing page editor. After you’ve selected a form, a placeholder is added to the template you’re editing.
You can move it around, but we recommend you add the placeholder and edit the form as the last step in editing the page.
1. In the landing page editor, move the mouse over the Forms icon.
2. In the Forms menu, double-click the Popup forms icon to view the available forms.
3. In a popup modal, click the icon of the form type you want to use.
The editing tools will open after you’ve selected the form type you want to use.
4. Customize the form. Click on the text and button to display the editing toolbar. Double-click the text to change it.
5. Edit the display settings.
For a signup form, exit popup, download popup, and image forms, you specify the:
- background: whether it should be transparent, dark, or light,
- delay: how soon should the form appear,
- effect: how should the form appear to the visitors,
- show again: how often it should appear to a visitor.
- file location (for download box only): the URL of the file the new subscribers can download,
- image (for image box only): double-click the default image and click the image icon to open Files and images. Then select the image you want to use.
For a scroll form and fixed bar, select the:
- position: where the form should appear,
- effect: how the form should appear.
6. To make your form compliant with GDPR or other data processing agreements, move the Consent fields switch to ON. The Consent fields you’ve created in your account will become available. Then, select the fields you want to add to the form. If you want to make any of the fields required, move the Required switch to ON. Everyone who signs up will be able to give their consent to your marketing or data processing policies before they’re added to your contact list.
7. Click Save.
8. (Optional) To run an A/B test to see which of the forms converts better, repeat steps 2-6 for each landing page variant.
You can preview the form before you save and publish the landing page. This way you can check if you’re satisfied with how the form looks on the page. To do it, click the Preview button in the top toolbar of the landing page editor.
If you decide to edit or delete the form:
- To edit the form, double-click the placeholder to open the editing tools. If you want to use a different form altogether, click the Choose different form link.
- To delete the form, click the placeholder and then click the Bin icon.
Viewing subscription statistics for popup forms on landing pages
Contacts who subscribe using popup forms show as subscribed via the landing page the form was added to.
- to view subscription statistics by method for a list or lists, go to Contacts > Statistics and locate Landing page. Learn more about subscription statistics
- to search for contacts who subscribed via a landing page, or to check which landing page converts better, use Advanced search. Here’s how to do it
Note: In Marketing automation, the subscription method Landing page in the Subscribe via condition will also include contacts who sign up via popup forms added to a landing page.
