No results were found...

How to create a pop-up form

Don't know which version of MailerLite you're using? Click here to find out!
Interested in the New MailerLite? Visit the New vs Classic comparison page.

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 the Forms page.

  2. Click on the Pop-ups tab.

  3. Click Create new.

4. Name your pop-up and make sure the form type: Pop-up is selected.

5. Click Save and continue.

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

7. Click Continue.

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

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

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

11. Click on the signup 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.

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

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

These 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:

  • Trigger - 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.

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.

Want to turn your text, images and buttons into clickable pop-ups?

To use the Pop-up on click event feature:

  1. Go to the Forms tab.

  2. You can use either the Pop-ups tab or the Embedded forms tab.

  3. Locate a form that you have created and click Overview.

  4. Scroll down to the JavaScript tracking snippet section. Here you will find the scripts you need, which should be inserted on each page of your site that you wish to add the pop-up too. Usually, the CMS has a special spot to implement this code and showcase it on every page.

  5. Click Show on click event. Here you'll have access to all the click event Javascript codes. If you want the pop-up to show on a click event, then the Javascript code must be added.

To create a button pop-up, copy the code in the second grey table. This will create a button in your post. The code under it is for when you want to show your pop-up whenever a link is clicked. You can use this code to display your form when someone clicks on text or an image.

For the button, copy and paste the code and replace the sentence Click here to show pop-up with your own button CTA. The button style is the same as you have set on your blog. If you want to change your button, you need to change the design settings on your blog.

For the link click pop-up, copy and paste the code and replace the sentence Click here to show pop-up with text or the image code.

Click Publish and view your new pop-up post.

Note: If you’re using WordPress, sometimes when you change between the visual and text editor tabs, the pop-up information in the source editor gets lost. Just refresh the page and your information will be back. Avoid pressing the Update button, then you’ll need to add the information again.

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.

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.

4. Name your pop-up form.

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

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

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

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

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

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

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

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

Want to turn your text, images and buttons into clickable pop-ups?

To use the Pop-up on click event feature:

  1. Go to the Forms tab.

  2. You can use either the Pop-ups tab or the Embedded forms tab.

  3. Locate a form you’ve created and click Get embed code. Here are all the scripts you need, these should be inserted on each page you want to add the pop-up too. Usually, the CMS has a special spot to implement this code and showcase it on every page.

  4. Click Show pop-up on click event . Here you'll have access to all the click event Javascript codes. If you want the pop-up to show on a click event, then the Javascript code must be added.

To create a button pop-up, copy the code in the second grey table. This will create a button in your post. The code under it is for when you want to show your pop-up whenever a link is clicked. You can use this code to display your form when someone clicks on text or an image.

After copying the code, go to your CMS and add a new blog post. We use WordPress for this example. When creating a new blog, make sure you’re using the source code editor (this is the Text tab next to Visual in WordPress).

For the button, copy and paste the code and replace the sentence Click here to show pop-up with your own button CTA. The button style is the same as you have set on your blog. If you want to change your button, you need to change this setting on your blog.

For the link click pop-up, copy and paste the code and replace the sentence Click here to show pop-up with text or the image code.

Click Publish and view your new pop-up post.

Note: If you’re using WordPress, sometimes when you change between the visual and text editor tabs, the pop-up information in the source editor gets lost. Just refresh the page and your information will be back. Avoid pressing the Update button, then you’ll need to add the information again.

Ready to try MailerLite?

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.

Last time edited: Feb 16, 2024