Skip to main content

How to Create and Embed a Pop-Up Form in SendX

S
Written by Sauhard Srivastava
Updated this week

What This Feature Does

Pop-up forms help you capture leads directly on your website. SendX lets you create two distinct types of pop-ups: CTA pop-ups (for actions like downloading content or joining events) and Convert Visitors to Subscribers pop-ups (specifically designed for growing your email list).

When You Need This

Use pop-ups when you want to grow your email subscriber list, promote a specific offer, or capture leads with custom information. They are also highly effective for reducing bounce rates using exit-intent triggers or targeting specific visitors based on their behavior and device type.


Step 1: Start a New Pop-Up

  1. Go to Forms in the main navigation menu.

  2. Click Popups.

  3. Click Create Pop-up.

  4. Give your pop-up a clear internal name (visitors will not see this).

Available Pop-Up Types:

  • CTA Pop-up: Best for downloads, events, or content offers. The email field is optional.

  • Convert Visitors to Subscribers: Best for list building. The email field is required and automatically included.


Step 2: Choose and Customize Your Design



Browse the available templates and click one that matches your goal to open the editor.

Adding Custom Fields in Popup Forms

You can collect more than just an email address by adding custom fields. Custom fields allow you to gather specific data which are saved directly to the contact's profile in SendX for future segmentation.

Creating Custom Input Fields:

You can create the following standard custom fields to capture specific text or numerical data from your visitors:

  • Text: For names, company names, or short custom answers.

  • Boolean: For simple yes/no questions.

  • Date: For birthdays or event dates.

  • Phone: Includes automatic formatting for phone numbers.

  • Number: For specific quantities, ages, or metrics.

Adding Selection Fields (Checkboxes & Dropdowns):

For multiple-choice or categorical data, you can add selection fields separately:

  • Checkbox: Use for multiple-choice questions where users can select more than one option (e.g., "What topics are you interested in?"). You can assign tags to each option so contacts are automatically segmented based on their choices.

  • Dropdown: Use for single-choice selections where users must pick only one option from a list (e.g., "How often do you want to hear from us?").

Using ReCaptcha in Popup Forms

To protect your email list from bot submissions and spam, you can enable ReCaptcha.

  1. Navigate to the builder settings in your pop-up editor.

  2. Locate the ReCaptcha option.

  3. Toggle it to the ON position.

Note: ReCaptcha V2 adds the "I'm not a robot" checkbox to your form. This is only available on supported themes. If you do not see this option, select a different template.


Step 3: Style Your Pop-Up

Click on any element in the editor to customize its appearance, including font family, size, background colors, and button hover states.

How to Add Custom CSS in Popup Forms

For users who want precise design control beyond the standard editor settings, SendX supports Custom CSS.

  1. Navigate to the Advanced section of the design editor.

  2. Locate the Custom CSS block.

  3. Paste your CSS code directly into the field.

  4. Target specific form classes to override default margins, padding, or animations.


Step 4: Define Pop-Up Targeting

What is Targeting in Popup Forms?

Targeting dictates who sees your pop-up and where it appears on your website. Instead of showing the same message to every single visitor on every page, targeting ensures your pop-up is highly relevant to the context of the page and the identity of the user.

How to Define Targeting

You configure targeting in the Targeting tab of your pop-up settings. You can mix and match rules to create precise audience segments.

URL Targeting Rules:

  • All pages: The pop-up appears site-wide.

  • Specific URLs: Enter exact URLs or use wildcards (e.g., /blog/*) to show the pop-up only on relevant pages.

  • Exclude URLs: Hide the pop-up on sensitive pages, like your checkout or "Thank You" pages.

Targeting Anonymous vs. Identified Contacts

SendX tracks visitors using cookies. This allows you to serve different experiences based on their relationship with you.

  • Anonymous Contacts: Visitors who have never subscribed or clicked a SendX email link. Target them with "Subscribe for 10% off" forms.

  • Identified Contacts: Existing subscribers recognized by SendX. Target them with product announcements, webinar invites, or upsell CTA pop-ups instead of asking for an email they have already provided.

How to Hide and Show Popups to Specific Contacts

You can control visibility using SendX Tags.

  • Whom to Show: Display the pop-up only to contacts holding a specific tag (e.g., Tag = "VIP Customer").

  • Whom to Hide: Suppress the pop-up for contacts holding a specific tag (e.g., Tag = "Newsletter Subscriber" to avoid asking them to subscribe twice).

Managing Popup Visibility on Different Devices

Mobile users experience websites differently than desktop users. SendX allows you to restrict your pop-up to specific screen sizes to protect user experience.

  • Desktop Only: Best for complex forms with multiple custom fields.

  • Mobile Only: Best for simple, single-field forms designed for tap targets.

  • All Devices: The default setting. Pop-ups will automatically scale to fit the screen.


Step 5: Define Pop-Up Behaviour

What is Behaviour in Popup Forms?

If targeting controls who and where, behaviour controls when. Behaviour dictates the specific action or timeframe required to trigger the pop-up on the user's screen. Proper behaviour settings prevent you from interrupting the user experience too early.

How to Define the Behaviour of a Popup Form

Navigate to the Display Triggers section to set your rules. You can combine multiple triggers.

Available Behaviour Triggers:

  • Page Enter: Appears instantly when the page loads (use with caution).

  • Time Delay: Appears after a set amount of time (e.g., 10 seconds).

  • Scroll Percentage: Appears only after the user scrolls down a specific portion of the page (e.g., 50%).

  • Exit-Intent (Page Exit): Triggers when the user's mouse cursor moves toward the browser's close or back button, signaling they are about to leave.


Step 6: Embed Your Pop-Up

Once designed and configured, click Save and navigate to the Embed Instructions tab. Click Copy Code to grab your unique JavaScript snippet. The code must be placed just before the closing </body> tag on your website.

<script type="text/javascript">
var _scq = _scq || [];
var _scs = _scs || {};
_scs.teamId = "<TEAM_ENCRYPTED_UD>";

(function() {
var dc = document.createElement('script');
dc.type = 'text/javascript';
dc.async = true;
dc.src = '//cdn.sendx.io/prod/<TEAM_ENCRYPTED_UD>.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(dc, s);
})();
</script>

Integration Guides for Popular Platforms

Shopify

  1. Go to Online Store > Themes > Actions > Edit Code.

  2. Open the theme.liquid file.

  3. Scroll to the very bottom, paste your SendX snippet right above the </body> tag, and click Save.

WordPress

  1. From your WP Admin dashboard, go to Plugins > Add New and install WPCode (or Insert Headers and Footers).

  2. Navigate to the plugin's Footer section.

  3. Paste your SendX snippet and click Save Changes.

Custom HTML

  1. Open your HTML index file.

  2. Locate the closing </body> tag.

  3. Paste the snippet directly above it and upload the updated file to your server.

Crucial Step: After embedding the code, return to SendX and toggle the pop-up status to Active. The pop-up will not display on your site until this toggle is on.


Troubleshooting & FAQs

How to Troubleshoot Popup Forms

  • Popup isn't appearing: Verify the toggle in SendX is set to Active. Next, open your website in an Incognito window to bypass cached data and ensure you haven't already triggered a "Stop showing after 1 view" rule.

  • Code is missing: Right-click your webpage, select "View Page Source", and hit CTRL+F to search for "sendx". If it's missing, re-paste the embed code into your footer.

  • Wrong people are seeing it: Check your Targeting and Tags. Ensure you aren't accidentally hiding the popup from the audience you are currently testing as.

How to Fix a Popup Form Showing on Multiple Websites

SendX tracking code is tied to your workspace, not a specific domain. If you manage multiple websites (e.g., brand-a.com and brand-b.com) and paste the same SendX workspace code into both, your pop-up will appear on both sites by default.

The Fix: Navigate to Step 4: Targeting in your pop-up builder. Under URL targeting, change the setting from "All Pages" to "Specific URLs". Enter the strict domain where the pop-up belongs (e.g., https://brand-a.com/*). This ensures the pop-up only fires on that exact domain, even if the base code lives on multiple sites.


Advanced Feature: Personalisation in Popups

Note: This feature is only available if you have enabled the Smart Website Personalisation add-on for your SendX account.

Personalisation increases conversion rates by making the pop-up feel custom-tailored to the reader.

If you are targeting Identified Contacts (visitors already in your SendX database), you can use merge tags directly in your pop-up headlines and descriptions. For example, using {{.Name}} in the headline will automatically render as "Welcome back, John!" when that specific subscriber visits your page. This level of dynamic content requires the Smart Website Personalisation add-on to function.

Did this answer your question?