How to Create Popup Forms in 2026 (Free Guide)

A signup or contact popup lets you talk to people while they're still on your site.

You use it to grow a list, collect leads and gather the customer data your marketing campaigns run on. Sales follow from that list.

This guide walks through the build in Popupsmart, then uses our own data to answer the questions that decide whether the form works: how many fields to ask for, what the button should say, and when to show it. Across 3,034 Popupsmart popups that ask for an email or phone number (January 2024 - September 2026, each with at least 1,000 displays and 14 active days), the median converts 0.83% of its displays into leads; the top 25% reach 1.96% and the top 10% reach 3.87%. The full method is in our popup conversion benchmark report.

What You’ll Need to Launch Your First Popup Form

What you'll need:

• A website where you can add a JavaScript snippet (Shopify, WordPress, Wix, Squarespace, or any custom site)

• A free Popupsmart account (the free plan covers one website, one live popup and 5K pageviews a month)

• Your brand colors and logo (optional but recommended)

• Time estimate: Popupsmart says most customers build and publish a campaign in under 5 minutes once they're set up. Your first popup form takes longer, because you also add the embed code and verify your site.

• Skill level: Beginner-friendly, no coding required

Quick overview of the process:

1. Sign up or sign in to Popupsmart

2. Navigate your dashboard and add your website domain

3. Create a new popup campaign

4. Choose a form popup template

5. Customize your popup form design and fields

6. Set up visitor targeting rules (including button-click triggers, if you want them)

7. Connect your email automation service

8. Save and publish your popup form

Step 1: Sign Up or Sign In to Popupsmart

Creating your first popup form starts with a free Popupsmart account. Registration doesn't require a credit card.

Go to Popupsmart's registration page. Enter your email address and create a password (or sign up with Google). You'll land directly on your dashboard, ready to build. If you already have an account, skip straight to Step 2.

You'll know it's working when: You see the Popupsmart dashboard with a "New Campaign" button in the top-right corner.

Step 2: Navigate Your Dashboard and Add Your Website

Before building any popups, you must install the Popupsmart embed code and verify your website. Go to Account → Websites on your dashboard, click New Website, enter your domain, and save it; your site will initially appear as Unverified. To complete verification, click the Unverified button, choose Verify website (which opens your site in a new tab), then return to the dashboard and click Refresh. Once the embed code is detected, the status switches to Verified.

Step 3: Create a New Popup Campaign

With your domain connected, you can start building. This step opens the popup builder, where you'll design the form and, later, publish it.

From the dashboard, locate the "New Campaign" button in the top-right corner. Click it to open the campaign creation wizard.

Step 4: Choose a Form Popup Template

Every popup campaign in Popupsmart starts with a business objective. Pick yours on the left side: it filters the templates and sets default form fields that match your goal.

A template is a starting design, so you aren't working from a blank canvas. There are dozens to choose from, and you can customize every one of them.

You can pick a template that already has form fields or a layout that supports them. Some templates don't include form fields by default.

Want to see all available designs? Browse the ready-made popup templates, or open the full Popupsmart popup template library inside the app.

Step 5: Customize Your Popup Form Design and Fields

Give this step most of your time. It's where you shape how the popup looks, write the copy, add the form fields and set the validation rules.

1. Click "Customize" to make changes on your popup template's content.

2. Go to the "Style" to adjust the button color, background, border-radius, and font

Preview changes in real time on the right panel. For detailed customization options, see the documentation on how to customize your popup.

How to Write Effective Popup Headlines and CTAs

Visitors read the headline and the button, then decide: fill in the form or close the popup. Keep both short, and make both about what the visitor gets.

Good headlines follow a simple pattern: tell visitors what they get. "Get 20% Off Your First Order" gives a visitor a reason that "Subscribe to Our Newsletter" doesn't. For the button, our data favours the visitor's own voice: first-person buttons ("Send my code") convert 1.18% vs 0.80% for neutral wording (English popups, median campaign). So "Send Me the Guide" is a better bet than "Submit".

How to Add and Configure Form Fields

1. Click "Add a new element" in the builder and choose "Form."

2. Select the form element you need:

• Email (most common for lead gen)

• Phone (with built-in validation)

• Short text (for names or company)

• Long input (for messages or feedback)

• Dropdown (for predefined choices)

3. Change placeholder text to match your needs

4. Toggle "Required" on for fields that must be filled before submission

The help center's guide to adding new form fields covers the notification and autoresponder settings on the same form element.

How to Add a Privacy Policy Checkbox

1. Select "Notice and Consent" form element.

2. Turn the "Required" toggle on

3. Write your privacy policy text or paste a link to your privacy page

4. Enable the checkbox if you need explicit opt-in consent (required under GDPR Article 7 for EU visitors)

Form Popup Design Customization Mistakes to Avoid

• Adding too many form fields: Every field you add is one more reason to stop. For email lead generation, stick to 1-2 fields (email + first name at most). The next section has our numbers on field count.

• Using "Submit" as your CTA text: Generic button text gives visitors no reason to click. Write benefit-driven copy: "Get My Free Guide," "Claim My Discount," or "Start My Free Trial." The button should complete the visitor's thought about what happens next.

• Ignoring mobile preview: Always toggle to mobile view in the builder. A popup that looks fine on desktop can cover the whole screen on a phone. That breaks Google's interstitial guidelines, and it annoys the visitor.

Pro tip: Match your popup's background color to your website's dominant color, but make the CTA button a contrasting color. The popup then looks like part of the site, and the button still stands out. Don't expect the colour itself to move the numbers, though: in our benchmark, button colour, dark vs light popup backgrounds, urgency words and question headlines show no measurable effect on conversion; the data are too noisy to rule out modest effects.

How many fields should a popup form have?

One or two. Popups asking for one or two fields convert 0.88% and 0.94%, against 0.56% for three fields (median campaign; spin-to-win and other gamified popups are counted separately). That's the clearest form finding in our 2026 benchmark, and it's why the templates you pick in Step 4 should start from an email field, not a contact sheet.

What the other form questions look like in the same data:

Phone capture is growing anyway: the share of popup leads that include a phone number rose from 21.3% (2024) to 26.3% (2025) to 33.5% (2026) (all leads pooled); much of that comes from a few high-volume accounts that collect phone numbers, while most lead-collecting campaigns collect email only. If you need numbers for your SMS tool, test a phone field against your email-only form rather than swapping one for the other. Popupsmart collects the number and passes it to the tool that sends your texts.

Multi-step forms are a separate case. The first step (a question or a yes/no button) is there to earn a click, and the contact field comes second. Our data doesn't show a lift from the format alone, so treat it as a design choice, not a shortcut. Our guides to multi-step popups and multi-step forms on Shopify show when the extra step is worth it.

Step 6: Set Up Visitor Targeting Rules

Targeting decides who sees your popup, when, and on which pages. Get it wrong and a good form turns into an annoying one.

How to Configure Display Settings

1. Click the "Segment" tab in the popup builder

2. Choose your segment type:

• After X seconds: Show the popup after a time delay

• After scrolling x%: Trigger when a visitor scrolls past a set share of the page

• Exit intent: Display when the visitor's cursor moves toward the browser's close button

• On click: Open the popup when a visitor clicks a button, link or image; Popupsmart generates a code snippet you paste where that element sits. It suits "Get a quote" or "Download" buttons. Our guide to a popup that opens on button click covers the setup.

• Set URL targeting: choose specific pages or URL patterns where the popup appears

• Configure visitor device targeting: desktop only, mobile only, or both

For the full targeting documentation, see Popupsmart's audience targeting guide.

You'll know it's working when: Your targeting summary shows the correct page URLs, trigger conditions, and frequency caps before you move to the next step.

Targeting Mistakes to Avoid on Popup Forms

• Showing the popup immediately on page load: Visitors who haven't read a single word on your page aren't ready to give you their email. In our data, popups that wait before appearing convert 0.83% vs 0.61% for popups shown the instant the page loads (median campaign); the direction holds in every year of data but the difference is not statistically reliable, so treat it as a lean, not a rule. How long you wait matters less: the exact delay length (0-5 seconds vs 21-60 seconds) makes no measurable difference to conversion.

• Not setting frequency caps: A popup that shows on every single page view will annoy returning visitors. The first two times a visitor sees a popup in a week convert at similar rates (1.33% and 1.22% of displays, pooled); from the third view conversion falls, and from the sixth view it is 0.41%, 31% of the first-view rate. Cap it at two views a week.

• Targeting all pages with the same popup: A discount popup makes sense on product pages. On your About Us page it makes none. Use URL targeting to match the popup message to the page context.

Pro tip: Exit-intent triggers are a polite first choice because they only show the popup when someone is about to leave, so they don't interrupt the browsing experience. Don't expect them to convert more on their own, though. Exit intent shows no statistically reliable advantage: popups on the most sensitive exit-intent setting converted 1.10% vs 0.78% without exit intent (median campaign), a gap that could be chance. Our analysis of whether exit-intent popups work goes through the numbers in detail.

Step 7: Connect Your Email Automation Service

A lead that never reaches your email tool is a lead nobody follows up. This step connects the popup form to your email marketing platform, so new subscribers are added there automatically.

How to Set Up Email Integrations

1. Click the "Integrations" under "Publish" tab in the popup builder

2. Click "Add integration" and browse the available integrations: Mailchimp, HubSpot, ActiveCampaign, Zapier, and the other destinations listed in the help center (19 at the last count)

3. Click "Connect" on your email marketing provider

4. Authenticate by entering your API key

5. Select the email list or audience where new subscribers should be added

6. Map your popup form fields to the corresponding fields in your email platform

Explore all available integrations on the Popupsmart integrations page, including Mailchimp popup integration and WordPress popup setup.

Integration Setup Mistakes

• Skipping the test submission: Always submit a test entry after connecting your integration. An integration can look connected and still carry a field-mapping error, so the popup collects leads while nothing reaches the email platform.

• Forgetting to set up a welcome email sequence: Capturing an email is step one. If you don't have an automated welcome email ready to send within minutes of signup, you're wasting the moment a new subscriber is paying the most attention.

Pro tip: If you're collecting email leads for a newsletter popup, set up at least a 3-email welcome sequence before going live, and don't activate your popup until your email automation is tested and ready.

Step 8: Save and Publish Your Popup Form

The form is built and configured. Time to go live.

1. Review your popup one final time in the builder preview

2. Click "Save" to store the campaign without publishing (useful if you need approval from a teammate)

3. Click "Publish" to push it live immediately

After publishing, use Popupsmart's built-in analytics to track impressions, submissions, and conversion rates. You can also integrate with Google Analytics for deeper reporting.

Other Ways to Build a Popup Form

A no-code builder isn't the only route, and the right one depends on where your list lives and who maintains the site.

If you code it yourself, the native HTML <dialog> element does most of the hard work: showModal() makes the rest of the page inert, and the Esc key closes it. A minimal signup form:

<button type="button" id="open-signup">Get the checklist</button>

<dialog id="signup" aria-labelledby="signup-title">
  <h2 id="signup-title">Get the checklist by email</h2>
  <form action="/subscribe" method="post">
    <label for="signup-email">Email address</label>
    <input id="signup-email" name="email" type="email" autocomplete="email" required>
    <button type="submit">Send me the checklist</button>
  </form>
  <button type="button" id="close-signup" aria-label="Close">×</button>
</dialog>

<script>
  const signup = document.getElementById("signup");
  document.getElementById("open-signup").addEventListener("click", () => signup.showModal());
  document.getElementById("close-signup").addEventListener("click", () => signup.close());
</script>

That snippet opens on a button click. Showing it on a timer, on exit intent or only to new visitors, and capping how often it appears, is the code you'd write next, and it's most of what a popup builder does for you. The W3Schools popup form tutorial shows a CSS-only variant.

Why Should You Use Popup Forms on Your Website?

Popup forms are still one of the most direct ways to collect leads in 2026. They interrupt passive browsing with one focused message, and the visitor has to answer it, even if the answer is a close.

Popup Forms Actually Convert

Plenty of marketers avoid popups because they remember the spammy full-screen ads of the early 2000s. That's a mistake. A modern popup form with targeting has little in common with those ads.

Here's what a realistic result looks like. Across the 3,034 lead-collecting popups in our benchmark, the median converts 0.83% of its displays into leads, the top 25% reach 1.96% and the top 10% reach 3.87%. Personalized popup forms that match your brand and target the right visitors at the right time sit in that top group.

Higher Visibility Than Static Forms

Visitors don't want to hunt through your site for a contact page. A popup form appears right where they are, whether that's a blog post, product page, or homepage. It's the next best thing to live chat for capturing attention.

Contact form popups beat standard contact pages on visibility alone, because they show up in context while the visitor is paying attention. Picture a shopper who can't decide whether to buy and won't dig through your navigation to find support. A contact form popup catches that lead before they bounce.

URL Targeting Lets You Show Forms on Specific Pages

Not every page needs the same popup. With URL targeting, you can display a free e-book offer only on related blog posts, show a discount code only on product pages, or trigger a demo request form only on your pricing page.

This kind of smart targeting keeps your popups relevant instead of annoying. We covered the targeting setup in Step 6 above.

Popup Forms Look Better Than Inline Forms

Nobody enjoys a 12-field contact form crammed into a sidebar.

Popup forms solve this by limiting visible fields. A well-designed popup asks for one or two inputs, uses your brand colors, and closes cleanly. You can deploy them across blog posts, landing pages, homepages, or any page on your site. Format matters too: center modal popups convert 0.88% vs 0.49% for corner/slide-in boxes (median campaign). Our popup design best practices cover the layout details.

What Happens After Publishing Your Popup Form?

Here's roughly how the first few months go.

Week 1: You'll see your first form submissions trickle in. Conversion rates at this stage are unreliable because of small sample sizes. Focus on checking that the form works, leads arrive in your email platform, and the popup doesn't cause usability issues.

Weeks 2-4: Your conversion rate stabilizes. Compare it with the benchmark above: 0.83% of displays is the median for a lead-collecting popup, 1.96% puts you in the top quarter. Don't compare it with your website's conversion rate; that divides by visitors, not popup displays, and measures a different thing.

Month 2-3: This is when A/B testing starts to pay off. By now, you should have tested 2-3 headline variations, different trigger timings, and possibly different form layouts.

Key Popup Form Metrics to Track

Popup Form Best Practices for Higher Conversions

The steps above get your popup live. The practices below are what make it convert. For the full list, tested against the same data, see our popup best practices.

The Six Principles That Drive Popup Form Performance

1. Keep form fields to a minimum. For top-of-funnel email capture, one field (email) is often enough. Need a name too? Make it optional. Popups asking for one or two fields convert 0.88% and 0.94%, against 0.56% for three fields (median campaign).

2. Write benefit-focused CTA copy. "Get My Free Guide" tells the visitor what happens; "Submit" doesn't. Your button text should answer the visitor's question: "What do I get by filling this out?" First-person wording ("Send my code") converted 1.18% vs 0.80% for neutral wording in English popups (median campaign).

3. Pick the trigger for the visitor, not for the number. Exit intent and a short delay are both polite choices, and neither is a guaranteed lift in our data. What does show up: 71% of visitors who close a popup do so within 5 seconds of it appearing, and 61% of popup leads are submitted within 30 seconds of the popup appearing. The first seconds decide it, so the offer has to be clear at a glance.

4. Make every popup mobile-responsive. Preview your popup on both desktop and mobile before publishing. On mobile the median popup converts 1.02% vs 0.57% on desktop, so the phone version is not an afterthought.

5. Match the popup to the page context. A "Download our SEO guide" popup on a cooking blog makes no sense. Use URL targeting to display relevant offers on relevant pages. Explore 33 website popup examples for inspiration on matching popup messages to page context.

6. Run A/B tests consistently. Change one variable at a time: headline, trigger timing, design, or CTA copy. Give each variant enough displays before drawing conclusions; our benchmark only counts campaigns with at least 1,000 displays and 14 active days for that reason.

Common Popup Form Mistakes and How to Fix Them

Check for these before you publish, and again once the first data comes in.

Mistakes That Hurt User Experience

Showing popups before any content loads. If your popup fires before the page finishes rendering, visitors see a form before they even know what the page is about. Add a short delay or use scroll-based triggers.

No easy way to close the popup. Always include a visible close button (the X icon) and allow clicking outside the popup to dismiss it. Trapping visitors with a popup they can't close is the fastest way to increase bounce rates.

Asking for too much information. A contact form popup doesn't need a company name, job title, phone number, email, and message field all at once. Ask for one piece of information now and progressive-profile the rest later. For a deeper look at form optimization, check out our guide on ecommerce optimization strategies.

Mistakes That Hurt Conversions

Generic messaging. "Sign up for our newsletter" doesn't give anyone a reason to subscribe. Offer something specific: a discount, a free resource, or exclusive access. Specificity wins.

No value exchange. Why should a visitor give you their email? If your popup doesn't answer that question in the headline, it won't convert. The best popup forms clearly state what the visitor receives in return.

Ignoring analytics data. If your popup has 10,000 impressions and 20 submissions (0.2% conversion), it's well under the 0.83% median for lead-collecting popups. Check your headline, form field count, trigger timing, and targeting. Don't leave a low performer running and hope it recovers.

Popup Form Examples That Convert Well

Advice is easier to use with an example in front of you. Here are three popup form patterns: one for a blog, one for a store and one for a SaaS pricing page.

Email Signup With Content Upgrade

A blog post about email marketing offers a downloadable "50 Email Subject Line Templates" PDF in exchange for an email address. The popup uses exit-intent targeting, has one form field (email), and the CTA reads "Send Me the Templates." This pattern works because the offer directly relates to what the visitor was already reading.

Exit-Intent Discount for E-commerce

A Shopify store shows a "Wait! Here's 15% off your first order" popup when the cursor moves toward closing the tab. One field (email), and a coupon code delivered by email after signup. The offer does the work here. In our benchmark, signup popups that offer a discount code convert 1.46% vs 0.75% for signup popups without one. Our discount popup guide covers how big the discount needs to be.

Contact Form Popup for B2B

A SaaS company adds a "Talk to Sales" button on their pricing page. Clicking it opens a popup with name, email, and a short message field. It sits between "I'm interested" and "Let me fill out your 10-field contact page": three fields, on the page the visitor is already reading. Expect more work addresses from desktop visitors: emails collected on desktop are about twice as likely to be at a business or other non-consumer domain: 21% vs 9.5% on mobile.

Start Building Your First Popup Form Today

Creating a popup form doesn't require a developer or a big budget. With a no-code builder like Popupsmart, you can go from zero to a live popup form in one sitting, on the free plan.

Here's what to do right now:

1. Create your free Popupsmart account

2. Follow the steps in this guide to build your first popup

3. Run it for 7 days, then check your analytics

4. Create a second variation and start A/B testing

Keep the first version simple: one field, a clear offer, a first-person button, and a cap of two views a week. That's what our data points to, and it gives you a clean baseline to test against.

Frequently Asked Questions About Popup Forms

How Do You Create a Popup Form?

Sign up for a no-code popup builder like Popupsmart, add its embed code to your site, choose a template, customize the design and form fields, set targeting rules (which pages, what trigger), connect your email platform, and publish. No coding required. If you prefer coding, you can also build a popup form with HTML, CSS, and JavaScript using a W3Schools popup form tutorial or the native HTML dialog element, though a no-code builder is faster for most teams.

What Is a Popup Form?

A popup form is an overlay that appears on a web page to collect visitor information, typically an email address, phone number, or feedback. Unlike embedded inline forms that sit within the page content, popup forms display on top of the page and demand attention. They can trigger based on time delays, scroll depth, exit intent, or button clicks.

How Many Fields Should a Popup Form Have?

One or two. In Popupsmart's 2026 benchmark, popups asking for one or two fields convert 0.88% and 0.94%, against 0.56% for three fields (median campaign; spin-to-win and other gamified popups are counted separately). Start with the email address and collect the rest later.

What Is the Difference Between a Popup and an Overlay?

In practical terms, they're the same thing. An overlay is the technical term for any element that displays on top of the existing page content, usually with a dimmed background. A popup is the common name for that pattern. Some marketers distinguish between popups (which can be new browser windows) and overlays (same-window modals), but modern popup tools like Popupsmart exclusively use in-page overlays, not separate browser windows.

How Do You Create a Popup Form in WordPress?

The simplest way is to use Popupsmart's WordPress integration. Install the one-line JavaScript snippet in your theme's header (via Appearance > Theme File Editor > header.php or a header-code plugin such as WPCode), then build your popup in Popupsmart's dashboard. The popup will appear on your WordPress site based on your targeting rules. For a Wix site instead, see our Wix popup integration guide. You can also follow our detailed walkthrough on how to create popup ads in 7 steps.

How Do You Open a Popup Form on Button Click?

Use an on-click trigger. In Popupsmart, add On-Click Targeting to the popup's segment and paste the code snippet it generates onto the button, link or image that should open the form, so the form only appears to people who asked for it. In plain HTML, call the dialog element's showModal() method from the button's click handler.

What Are the Best Tools for Popup Forms in 2026?

For no-code users, Popupsmart is an easy-to-use recommendation because it combines a visual builder, smart targeting, and email integrations in a free plan. If you already send email with Mailchimp, its popup forms (still labelled beta) are available to Mailchimp marketing plan users at no additional cost, according to Mailchimp's forms page on 1 October 2026. For developers who want full control, building with HTML, CSS, and JavaScript gives the most flexibility but requires ongoing maintenance. The right tool depends on your technical skills, budget, and how many popups you plan to run.