# How to add a popup to a landing page?

Adding popups to your [landing page builder](https://www.getresponse.com/features/landing-page-creator) 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
--------------

1.  In the landing page editor, click on the **Add elements** button.  
      
    ![landing page add element](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1220/lpv1.png)  
      
    
2.  Drag and drop the **Popup** element to your page.  
      
    ![add popup to lp](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1403/lppp.png)  
      
    
3.  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.  
      
    ![add elements](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1406/lppp2.png)  
    

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.  
  
![popup settings](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1151/ppup.jpeg)  
  
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.  
      
    ![popup settings in lps](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1414/CleanShot-2024-12-18-at-15.13.50-2x.png)

Editing, duplicating or deleting previously saved popups
--------------------------------------------------------

All popups created for your landing page are shown in the **Manage pages** element, under all pages.  
  
![edit popup in lp](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1410/lppp3.png)

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](https://www.getresponse.com/help/what-are-list-builder-apps.html)

You can customize the design by clicking any form section to edit the text, style, and button. Or, do an [A/B test](https://www.getresponse.com/help/a-b-tests.html) 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](https://www.getresponse.com/help/custom-field.html) or mark any of them as required. Also, keep in mind that the forms don’t work on [thank-you pages](https://www.getresponse.com/help/thank-you-page.html) 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.

![](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1258/popup-placeholder.png)

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.

![](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1258/Popups-icon-in-menu.png)

2\. In the **Forms** menu, double-click the **Popup forms** icon to view the available forms.

![](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1301/popups-popup-menu-icon.png)

3\. In a popup modal, click the icon of the form type you want to use.

![](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1302/popups-form-type-menu.png)

The editing tools will open after you’ve selected the form type you want to use.

![](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1302/popup-modal-with-editing-options.png)

4\. Customize the form. Click on the text and button to display the editing toolbar. Double-click the text to change it.

![](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1302/popup-edititng-tools.png)

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.  
    ![Popup settings](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1303/popup-settings.png)
*   **file** location (for download box only): the URL of the file the new subscribers can download,  
    ![Download box settings](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1304/popup-download-box-settings.png)
*   **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.

![](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1306/popup-scroll-form-and-fixed-bar-settings.png)

6\. To make your form compliant with [GDPR](https://www.getresponse.com/help/how-do-i-get-my-account-ready-for-gdpr.html) or other [data processing](https://www.getresponse.com/help/data-processor.html) agreements, move the Consent fields switch to ON. The [Consent fields](https://www.getresponse.com/help/how-do-i-create-and-use-consent-fields.html) you’ve created in your [account](https://www.getresponse.com/help/account.html) 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.

![Consent field setting on list builder apps.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1156/image.png)

7\. Click **Save**.  
8\. (Optional) To [run an A/B test](https://www.getresponse.com/help/how-to-set-up-a-b-testing-on-legacy-landing-pages.html) 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.  
    

![](https://us-wd.gr-cdn.com/help/sites/9/2021/02/1307/popups-bin-icon.png)

**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](https://app.getresponse.com/statistics/contacts)** and locate **Landing page**. [Learn more about subscription statistics](https://www.getresponse.com/help/where-can-i-find-out-how-my-contacts-were-added-to-a-specific-list.html)
*   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](https://www.getresponse.com/help/how-can-i-find-contacts-by-subscription-method.html)

**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.