Create and Display Popup Forms | Maildroppa

Published: July 16, 2026

A Popup is displayed above the content of your website. It places the signup offer in the visitor’s direct line of sight while leaving the underlying page in place.

Popups are useful for newsletter offers, discounts, event registrations, lead magnets, and other focused calls to action. Because they interrupt the normal page experience, the timing and frequency are as important as the design.

This guide explains the Popup-specific settings. Layouts, content blocks, subscriber fields, tags, typography, layers, and signup flows are covered in the main Signup Form Builder guide.

Creating a Popup

Open “Signup Forms”, click “Create Form”, and select “Popup”. Enter a clear internal name and continue to the builder.

You can also edit an existing Popup by clicking its name in the Signup Forms Overview.

Use a name that explains the offer or placement, such as “Homepage Discount Popup”, “Webinar Registration Popup”, or “Guide Download Popup”. The internal name is not automatically shown to visitors.

Choosing a Popup Template

Popups offer a blank form, a standard form, and four designed templates:

• Clean discount
• Warm guide
• Dark webinar
• Soft community

Choose a template whose size and content structure fit the offer. All text, fields, colors, images, spacing, and layout can be changed afterward.

Designing the Popup

Use the visual builder to arrange the Popup. You can combine the signup form with text, images, video, lists, buttons, social links, a subscriber counter, spacers, and dividers.

Keep the main message short enough to understand immediately. A clear heading, one brief explanation, and a specific submit button are usually more effective than several competing messages.

Select the signup form block to configure fields, required information, hidden tags, progress indicator, subscriber counter, inputs, and submit button. Open “Page settings” to change the overall Popup background and appearance defaults.

The Popup appears over the website with a close control. Leave enough visual space around important text and fields so that the form remains easy to use on a small screen.

Configuring Popup Behavior

Select the signup form block and open “Widget Settings”. This section controls when the Popup is shown and how often a visitor can see it.

Display Delay

“Display Delay” defines how many seconds Maildroppa waits before displaying the Popup on an embedded website page.

Enter 0 to show it without an additional delay. Use a larger value when visitors should have time to read the page before the offer appears. The builder accepts a delay of up to 86,400 seconds.

Choose the delay based on the page. A short delay may be appropriate on a focused campaign page, while a longer delay can feel less disruptive in an article.

Display Frequency

“Display Frequency” controls the period after which the Popup can be displayed to the same visitor again. The available options are:

• Always
• Once per hour
• Once per day
• Once per week
• Once per month

Use “Always” carefully. A Popup that repeatedly interrupts the same visitor can become frustrating. A daily or weekly frequency is often a better starting point for a general website offer.

The frequency is stored in the visitor’s browser. Testing in another browser, private browsing window, or cleared browser storage can therefore produce a different result.

Using Exit Intent

Enable “Exit Intent Popup” when the Popup should be opened after the visitor moves the pointer out of the page area, indicating that they may be about to leave.

When exit intent is enabled, the Popup waits for this behavior instead of following the normal delayed display. The selected display frequency still prevents it from being shown again too soon.

Exit intent is based on pointer movement and is therefore mainly relevant on desktop and laptop browsers. Touch devices do not provide the same exit signal. Always make sure that mobile visitors can still discover your signup offer through the page itself or another appropriate form.

Using a Page Element as a Popup Trigger

Enable “Open popup when a customer clicks a page element” when a button, image, or link on your website should open the Popup.

After saving and activating the Popup, open “Show Code Snippet” in the Signup Forms Overview. The dialog shows an element ID in this format:

maildroppa-popup-btn-[form-id]

Copy the complete ID and add it to the id attribute of the page element that should open the Popup.

For example:

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

The Maildroppa Popup script must be loaded on the same page. If the trigger button is present but the form script is missing, clicking the button cannot open the Popup.

Use each HTML ID only once per page. If several elements should open the same Popup, ask the person implementing the website to connect those elements without duplicating the same ID.

Connecting the Signup Flow

Review the assigned signup flow in the builder header. It controls the immediate submit response, the Double Opt-in email, and the result after confirmation.

You can select an existing flow, edit it, or create a separate flow for this Popup. A dedicated flow is useful when the offer needs its own confirmation message or lead magnet delivery.

Previewing and Saving

Click “Preview” to check the Popup design and behavior without changing the version used on your website. Review the layout, close control, field order, validation space, and submit response.

Click “Save changes” when the Popup is ready. Then return to the Signup Forms Overview.

Activating and Embedding the Popup

Activate the Popup from its three-dot actions menu if it is not already active. Then click “Show Code Snippet” and copy the complete code from the “JavaScript” tab.

Add the script to every website page on which the Popup should be available. The code contains the Popup’s unique form ID and loads its current saved configuration.

The “HTML” tab provides the generated markup for custom implementations. If you use it, test all behavior and submission steps carefully because your website code and styles can affect the result.

For general embedding instructions, see Building and Embedding an Embedded Form.

Testing the Popup on Your Website

Test the Popup on the real website page after adding the code:

1. Check the configured delay.
2. Test the close button and clicking outside the form.
3. If enabled, move the pointer out of the page to test exit intent.
4. If enabled, click the configured page element to test the manual trigger.
5. Check the layout on a narrow screen.
6. Submit the form and complete the Double Opt-in process.
7. Verify the subscriber and hidden tags in Maildroppa.

The frequency setting may stop the Popup from appearing again during repeated tests. Use a private browsing window or clear the relevant browser storage when you need a clean test visit.

Updating or Deactivating the Popup

To update the Popup, open it in Maildroppa, edit the design or behavior, preview it, and click “Save changes”. The JavaScript snippet continues to use the same form ID.

To stop displaying it temporarily, choose “Deactivate” from the actions menu. Deactivation preserves the Popup and its previous report data. Remove the script or trigger element from the website as well if they are no longer needed.