How to Open a Pop-up Form on Click

Pop-up subscription forms in MailPoet typically appear automatically after a delay or when a visitor tries to leave the page. Starting with MailPoet 5.24.0, you can also configure a pop-up form to open only when a visitor clicks a specific element on your page, such as a button or a link. You can also open pop-up forms programmatically using JavaScript.

This is useful when you want to let visitors choose to subscribe — for example, by clicking a “Subscribe to our newsletter” button on a landing page — rather than showing the pop-up automatically.

Prerequisites

Method 1: Open on Click Using a CSS Selector

This method connects your pop-up form to any element on your site — a button, link, or any clickable element — using a CSS selector. No coding is required.

Step 1: Create or identify the trigger element

First, make sure the page where you want the pop-up to appear has a clickable element (button, link, etc.) with either a CSS class or an ID. You can add both using the WordPress block editor’s Advanced panel:

  • HTML Anchor: Sets a unique ID on the element. For example, entering signup-button makes the element targetable with the CSS selector #signup-button.
  • Additional CSS class(es): Sets one or more CSS classes on the element. For example, entering open-newsletter-popup makes it targetable with .open-newsletter-popup.

Tip: Use the HTML Anchor field when you have a single, specific element that should trigger the pop-up. Use a CSS class when you want multiple elements on the same page (or across pages) to all open the same form.

Step 2: Set the pop-up trigger mode to “On click”

  1. Go to MailPoet > Forms and edit the pop-up form you want to use.
  2. In the right sidebar, open the Form Placement panel and select Pop-up.
  3. Make sure the pop-up is toggled on (Enable).
  4. Under How should this popup open?, select On click.
  5. In the Click trigger selector field, enter the CSS selector for your trigger element. For example:
    • #signup-button (targets the element with the HTML Anchor “signup-button”)
    • .open-newsletter-popup (targets all elements with the class “open-newsletter-popup”)
    • a[href="#newsletter"] (targets links with a specific href attribute)

Step 3: Configure placement and save

Make sure the form is set to display on the pages where your trigger element appears. Under the pop-up placement settings, choose All pages, Specific pages, or whichever option matches where your button or link is located.

Click Save to apply your changes.

Note: When “On click” mode is selected, the delay and exit-intent display settings are disabled. The pop-up will only open when a visitor clicks the trigger element.

Step 4: Test

Visit the page with your trigger element and click it. The pop-up form should appear immediately with the overlay background.

Tip: In “On click” mode, the pop-up ignores the dismissal cookie. This means the form will open every time the trigger element is clicked, even if the visitor previously closed it.

Method 2: Open Programmatically with JavaScript

If you need more control — for example, opening the pop-up after a custom event, from a third-party plugin, or based on specific conditions — you can use the JavaScript function window.MailPoetForm.openPopup().

Finding your form ID

You will need the numeric ID of your pop-up form. You can find it in one of these places:

  • Form editor URL: When editing your form, look at the browser address bar. The URL contains id= followed by the form’s ID (for example, admin.php?page=mailpoet-form-editor&id=5 means the form ID is 5).
  • Shortcode: In the form editor, go to Form Placement > Shortcode and other. The shortcode shows the ID, for example [mailpoet_form id="5"].

Using the function

Add the following JavaScript to your site (for example, using a custom HTML block, your theme’s JavaScript file, or a code snippets plugin):

// Open pop-up form with ID 5
window.MailPoetForm.openPopup(5);

The function accepts the form ID as a number or a string and returns true if the form was successfully opened or false if it was not (for example, if the form ID is invalid or the form is not present on the current page).

Example: Open on button click

<button onclick="window.MailPoetForm.openPopup(5)">
  Subscribe to our newsletter
</button>

Example: Open after a delay using custom JavaScript

<script>
  // Open the pop-up form 10 seconds after the page loads
  setTimeout(function() {
    window.MailPoetForm.openPopup(5);
  }, 10000);
</script>

Requirements for the programmatic method

  • The pop-up form must be enabled in the form’s placement settings.
  • The form must be configured to display on the current page (via the placement targeting options: all pages, specific pages, etc.).
  • The form does not need to be set to “On click” mode — the programmatic method works regardless of the trigger mode setting.

Troubleshooting

  • The pop-up does not appear when clicking the trigger element: Verify that the CSS selector in the Click trigger selector field matches your element exactly. You can test the selector in your browser’s developer console by running document.querySelector('#your-selector') — if it returns null, the selector does not match any element on the page.
  • window.MailPoetForm.openPopup() returns false: Confirm that the form ID is correct and the pop-up form is enabled and configured to display on the current page.
  • The pop-up opens automatically instead of on click: Make sure “On click” is selected under How should this popup open? in the pop-up form settings.
  • A caching plugin prevents changes from appearing: Clear your site cache and any server-side or CDN cache after making changes to form settings.

Related Articles