Embedded vs Popup Forms

This guide explains how to choose between an embedded form and a popup form in Sender, including how each type displays, how their builder settings differ, and how to distribute them.

Where to Find This Feature

In the Sender dashboard, go to Forms in the left sidebar. The Forms list shows all your existing forms with their type label (Embedded form or Pop-up) displayed below the form name. To select a form type, click Create a new form in the top-right corner. The New form page presents three form type cards: Embedded form, Popup form, and Spin-to-win wheel. The form type is set at creation and cannot be changed afterward.

Steps to Choose and Configure the Right Form Type

Step 1 — Decide Which Form Type Fits Your Use Case

Choose Embedded form when you want the form to sit directly inside your page content, always visible to visitors without any overlay or trigger. Choose Popup form when you want an overlay that appears based on visitor behavior, such as time on page, scroll position, or exit intent.

Embedded forms are best for persistent signup placements like sidebars, footers, or in-content sections. Popup forms work best for attention-grabbing, time-sensitive, or behavior-based prompts.

Step 2 — Create the Form with the Selected Type

Go to Forms and click Create a new form. Enter a name in the Form name field. Click Create new embedded form or Create new popup under the corresponding card.

For embedded forms, a layout selection dialog appears with options such as Default and Basic. Select a layout to open the form builder.

Step 3 — Review Builder Tabs for Your Form Type

The form builder for an embedded form has two tabs in the right panel: Design and Settings. The Settings tab includes Options (such as Use Google reCaptcha, Confirmation checkbox, Redirect after submit, and Text direction Right to Left), Fields, and Groups.

A popup form has three tabs: Design, Settings, and Behaviour. The Settings tab is the same for both types. The Behaviour tab is exclusive to popup forms.

Open the Behaviour tab in the popup form builder. Under When to show popup?, enable one or more triggers. After X seconds on page displays the popup after a set delay. Show when user scrolls to X % triggers at a scroll depth. Show when trying to leave page fires on exit intent after a minimum wait time (does not work on mobile devices). Show when clicked on element triggers the popup when a visitor clicks a specified page element.

Still in the Behaviour tab, expand Frequency to control how often the popup re-appears for visitors who haven’t subscribed. Toggle Always show or set a cooldown period in days.

Under Schedule, choose Instant to activate immediately or Specific time to set a start and end date. Under Visibility, select Always show, Hide on specific pages, or Show on specific pages, and optionally check Hide on desktop, Hide on mobile devices, or Hide on tablet devices.

Step 6 — Save and Review Publishing Settings

Click Save and continue in the top-right corner of the form builder. The Publishing settings page opens, displaying the form’s type tag (EMBED or POPUP), status (DRAFT or published), Double opt-in settings, Your form URL, the Get your QR code section, and the JavaScript snippet and JavaScript explicit rendering tabs.

Both form types share the same Publishing settings layout except that embedded forms include an additional HTML <div> placement element alongside the JavaScript snippet.

Step 7 — Install the JavaScript Snippet on Your Website

Under the JavaScript snippet tab, copy the <script> block and paste it before the closing </head> tag on your website. You only need to add this snippet once, even if you use multiple forms.

For embedded forms, also copy the <div> element (with the class=”sender-form-field” and data-sender-form-id attributes) and place it in your page HTML where you want the form to appear. Popup forms do not require a placement <div> — the popup overlays the page automatically based on your Behaviour settings.

Step 8 — Publish the Form

On the Publishing settings page, click Publish in the top-right corner. The form status changes from DRAFT to active. Visitors on pages where the snippet is installed will now see the form according to its type and configuration.

Form Type Comparison

Embedded form — Use when you want a stationary form placed directly in your page content, such as a sidebar, footer, or inline section. The form is always visible and does not overlay the page. The builder includes Design and Settings tabs. Requires both a JavaScript snippet and an HTML <div> element for placement.

Popup form — Use when you want an overlay form triggered by visitor behavior. The builder includes an additional Behaviour tab with trigger, frequency, schedule, and visibility settings. Only the JavaScript snippet is needed — no <div> placement element is required.

Spin-to-win wheel — Use when you want a gamified lead capture experience that motivates visitors to sign up with the chance to win a reward. Like the popup, it overlays the page and includes behavior-based trigger settings.

Distribution Tips

Use the form URL for non-website sharing — Copy the URL from the Your form URL field on the Publishing settings page to share your form directly via email, social media, or messaging without embedding it on a site.

Download or share the QR code — In the Get your QR code section, select a size from the dropdown and click Download to save the QR code image. Use it on printed materials, event signage, or any offline channel to direct people to your form.

Use JavaScript explicit rendering for custom control — Switch to the JavaScript explicit rendering tab on the Publishing settings page to prevent automatic form loading. Add explicit=true and onload=yourCustomCallback parameters to the resource URL, then call senderForms.render() in your code to control exactly when and where the form appears.

Send the snippet to your developer — If you don’t have access to your website code, click Send code snippet at the bottom of the JavaScript snippet tab to email the integration instructions to a team member.

Install the snippet once for multiple forms — The JavaScript snippet is account-level. Add it to your site once, and all published forms (embedded and popup) tied to your account will load on pages where the snippet is installed, subject to each form’s visibility and trigger rules.

Common Issues

Embedded form does not appear on the page → The HTML <div> element with class=”sender-form-field” and the matching data-sender-form-id attribute is missing or placed incorrectly. Verify that both the <script> block is before the closing </head> tag and the <div> is in the page body where you want the form to render.

Popup does not trigger on the website → The form is still in DRAFT status. Go to the Publishing settings page and click Publish. Also confirm the JavaScript snippet is installed on the page and check the Behaviour tab to ensure at least one trigger is enabled.

Popup shows on every page load → The Frequency setting under the Behaviour tab may be set to Always show. Uncheck Always show and set a cooldown period (e.g., 30 days) so the popup only reappears after the specified interval.

Exit intent trigger does not work on mobile → The Show when trying to leave page trigger does not work on mobile devices. This is a browser limitation noted in the Behaviour tab. Use After X seconds on page or Show when user scrolls to X % as alternative triggers for mobile visitors.

Cannot change a form’s type after creation → The form type is locked at creation. To switch from embedded to popup (or the reverse), use the Duplicate option from the action menu on the Forms list or the Actions dropdown on the Publishing settings page, then create a new form with the desired type and reconfigure the settings.

FAQs

What is the difference between an embedded form and a popup?

An embedded form is placed directly within your page content using an HTML <div> element and is always visible. A popup overlays the page and appears based on trigger rules you define in the Behaviour tab, such as time on page, scroll depth, or exit intent.

Can I share my form without embedding it on a website?

Yes. Every published form has a direct form URL you can copy from the Publishing settings page and share via email, social media, or messaging. You can also download or scan the QR code from the same page to share the form offline.

Can I use the same form on multiple pages?

Yes. The JavaScript snippet from the Publishing settings page can be added to any page on your website. The form will appear on every page where the snippet is installed, subject to your Visibility settings in the Behaviour tab (for popups) or the <div> placement (for embedded forms).

Can I change a form’s type after creating it?

No. The form type is set during creation. To switch types, click the dropdown arrow next to the form on the Forms list, select Duplicate, then create a new form with the desired type and reconfigure the settings.

Does a popup form need an HTML element on the page like an embedded form does?

No. A popup form only requires the JavaScript snippet in your site’s <head> section. It overlays the page automatically based on the trigger rules in the Behaviour tab. Only embedded forms need the additional <div> element with the data-sender-form-id attribute placed in the page body.

What triggers are available for popup forms?

The Behaviour tab offers four trigger options: After X seconds on page, Show when user scrolls to X %, Show when trying to leave page (exit intent, desktop only), and Show when clicked on element. You can enable multiple triggers simultaneously.