Search MailerLite
Start typing to search

No results

How to create a pop-up form

A pop-up form is usually a small window with a message that appears while a visitor is browsing your website. They’re an excellent way to promote your newsletter and collect subscribers.

To create a pop-up form:

  1. Navigate to Forms.

  2. Click on the Pop-ups tab.

  3. Click Create pop-up.

  1. Name your pop-up form.

  1. Select at least one group for your pop-up form. When subscribers complete your pop-up form they will be added to the group(s) you select here.

  1. Select a template pop-up form template. Once selected, the pop-up form editor will open.

  1. Edit the heading and text of your pop-up form by clicking the block you wish to edit and typing directly into the block on your pop-up form.

  1. Change the image on your pop-up form by clicking on the image block, then clicking on the image in the sidebar.

  1. Click on the form block to edit it in the sidebar. To edit the input field, click the pencil icon next to the field you wish to edit.

  1. Edit your pop-up form’s success page by clicking the Success button along the top navigation bar.

  1. Once you’re finished editing your form, click Next to exit the form editor and apply some behavior settings to your pop-up form.

Behavior settings are the rules you apply to your pop-up form that determine when and where the pop-up appears.

There are four factors in the behavior of your form to which you must apply settings:

  • Mode - Choose when your pop-up form will appear. For example, five seconds after the page is opened, when the visitor scrolls to 50% of the web page, or when the visitor intends to exit the page

  • Frequency - Choose how often your pop-up appears for the same visitor if they don’t subscribe the first time they see the pop-up

  • Schedule - Have your pop-up go live immediately or set a start date and finish date for your pop-up form

  • Visibility - Choose whether you want to hide your pop-up on specific devices, or hide/show your pop-up on specific webpages

Once you’re satisfied with your pop-up’s behavior settings, click Save and continue to carry on to the next step: installing your pop-up form.

You will need to install the JavaScript tracking snippet to install the pop-up form on your website,

To install the JavaScript tracking snippet to your website:

  1. Navigate to Forms.

  2. Click the Pop-ups tab.

  3. Click on the title of your pop-up form.

  4. Scroll all the way down until you see the JavaScript tracking snippet.

  1. Copy and paste the universal tracking snippet into your website’s HTML just before the closing </head> tag. (You only need to do this once, even if you plan on installing multiple forms on your website).

Your website is made up of sections of HTML called elements. The very first element is the <head>, it starts with the opening <head> tag and ends with the closing </head> tag. If you’re unsure how to edit your website HTML, we recommend contacting the support team of the platform on which you created your website.

Note: Using WordPress or Shopify? Install the MailerLite plugin for WordPress or the MailerLite plugin for Shopify to install your forms on your website without using any code.

When you create a pop-up form it will show on every page of your website by default. However, in your Visibility settings you can decide whether to have that pop-up form show on every page of your website, some pages of your website; or you can choose to hide it on specific pages of your website.

To hide your pop-up form on specific pages:

  1. Select Hide on specific pages.

  2. Copy and paste the webpage URL(s) of the pages you do not want your pop-up to appear on. Paste each URL onto its own line.

  3. Checkmark the box labeled Apply strict equality to have your pop-up hidden only on pages that match the entered URLs exactly.

To show your pop-up form only specific pages:

  1. Select Only show on specific pages.

  2. Copy and paste the webpage URL(s) of the pages you want your pop-up to appear on. Paste each URL onto its own line.

  3. Checkmark the box labeled Apply strict equality to have your pop-up show only on pages that match the entered URLs exactly.

Note: If you do not check the box labeled Apply strict equality, then all URLs that contain the URL you entered will be included in your visibility settings.

For example, if you set your pop-up form to hide on www.mailerlite.com and you don’t check Apply strict equality, then your pop-up will be hidden on all web pages containing www.mailerlite.com, including www.mailerlite.com/blog and www.mailerlite.com/about, etc.

The pop-up form editor is divided into two sections by two tabs found in the sidebar: the Blocks tab and the Design tab.

Blocks tab

Under the Blocks tab, you can drag and drop additional content blocks in your pop-up form.

There are six blocks to choose from:

  • Text - Use this block to add more text to your pop-up form

  • Image - Use this block to add an image or GIF to your pop-up form

  • Image and content - Use this block to add an image, GIF or video to your pop-up form with accompanying text next to it

  • Countdown - Use this block to create urgency by adding a countdown timer to your pop-up form

  • Social links - Use this block to add links to your social media pages to your pop-up form

  • Divider - Use this block to break up the content in your pop-up form by adding a divider

Design tab

The Design tab allows you to edit the visual design of your pop-up form. Within the design tab you’ll find four sections; Form type, Design settings, Sign up form settings, and Additional settings.

Form type

This is where you select what you want the pop-up box to look like. For example you may want your pop-up to appear as a box in the centre of the webpage, or you may want the pop-up to take up the entire screen.

Design settings

This is where you decide the overall design of your pop-up form. Each design element has an associated design bubble that you can click in order to alter the design settings such as fonts, formatting, and colors. For example, if you want to change the font of all heading one text:

  1. Navigate to the Design tab.

  2. Click Design settings.

  3. Under Content elements, find the design bubble labeled Heading 1 and click it.

  4. A window will appear in which you can edit the font of all Heading 1 text.

Sign up form settings

Here you can apply different settings to your form. These settings include:

  • Privacy policy - Add a privacy statement to your pop-up form.

  • Confirmation checkbox - Add a user-consent checkbox to your pop-up form.

  • Hidden segmentation field - Add a hidden field to segment your subscriber list. You can select a field and a value so that all subscribers of this form have that value added to that field.

  • Marketing permissions fields (GDPR-compliant) - Include GDPR compliant marketing permissions checkboxes to your pop-up form.

  • Interest groups - Give subscribers the option to choose their own subscriber group.

  • reCAPTCHA - Add an “I am not a robot” checkbox to your pop-up form. This helps prevent potentially harmful spam bots from joining your subscriber list.

Additional settings

Under Additional settings, you can opt to add an additional sidebar to your form by checking the box labeled Show sidebar.

You can add text to your sidebar by clicking in the center of the sidebar and typing in your content. You can also edit the color or choose an image for your sidebar in Design settings under Background.

Still have questions?
If you have any questions, feel free to contact us at support@mailerlite.com.
A member of our support team will gladly assist you.