Wisepops logo

Last updated Thu Jan 25 2024

Popup Forms: How to Create Easily [+Examples]

So, you decided to try popup forms?

Although their reputation is not perfect, they are one of the most effective ways to generate leads and collect data from your visitors. There’s no denying that.

That’s why I created this guide: to help you get started with popup forms the right way and make them work without sacrificing your visitors’ experience.

Not only you’ll see examples and best practices, but also be able to create your first popup form—without coding or website design knowledge.

You’ll learn:

What is a popup form?

A popup form is a window that appears on top of a website's content and asks visitors to take some action (go to a different page, give an email, or provide feedback). Popup forms can be shown in different places on the screen and can be customized to match the website design.

There’s a big misconception that popup forms are good only for collecting emails. Although capturing emails remains the most common use case, popup forms also drive traffic to other pages, share promotional messages, collect feedback, generate sales by sharing discounts, and more. 

A typical popup form looks like this:

popup form
Shop now sales popup
Free templates

Get a head start on designing popup forms. Browse our library of designer-made templates:

➡️ Get started

Popup forms: to use or not to use? 

Let’s be honest: popup forms can be intrusive.

But here’s the thing:

Whether you love them or think of them as the worst thing in the world, the truth is, using a popup form is still one of the best ways to convert website visitors.

Because popup forms make it clear what action you want your visitors to take, and you’re making it easy for them by focusing their attention.

And—

If a popup form feels like a natural part of a website and contains a relevant offer, it can convert up to 23.7% of visitors (according to our study of top-performing popups).

So—

If you get the design and the offer right, popup forms would be anything but annoying. Quite the opposite, they can improve website experience, and of course, become a source of new leads and even sales.

Still, to help you decide, let’s review the pros and cons of popup forms.

ProsCons
Visibility (can appear on every page or on pages of your choice)Can be intrusive (if implemented incorrectly)
Can be used for many goals (email capture, sales promotions, discount distribution, cart recovery, etc.)Can increase website’s bounce rate (the percentage of visitors who leave after viewing one page) if displayed too many times to the same visitors
Can speed up lead generation and sales
Can improve visitor engagement by focusing their attention on special offers, services, and sales events
Work on all devices (both desktop and mobile) and website platforms

An interesting thing here is that… You can take care of the cons.

For example:

If you set your popup form with a promo offer to be shown only one time to every new visitor, you won’t annoy them. Besides, if your offer is personalized, chances are good that you’ll get a sweet amount of conversions.

Blume, an online store, needed to build their email list. So, they used a popular strategy: first-time customer discounts. Since popup forms have great visibility, they created this campaign to share them:

popup form example blume

This single campaign was quite successful—

Blume converted 5% of their visitors (here’s the case study with insights).

Although 5% might not sound like a lot, it actually translates to hundreds of new leads (the final number always depends on the website's traffic, too).

So, if you don’t overdo it with popup forms, they can be extremely helpful for building the list of potential customers.

To get you started with popup forms right, here are some helpful pointers to know.

Use Avoid
If the form has something of value (a discount code, product announcement details, giveaway entry, etc.)Auto-triggered forms on all website pages that appear immediately after landing
If a popup form is relevant to visitors’ experience on your websiteForms that display large amounts of data and multiple visuals
If you need to give more information about something visitors are interested inForms that display the same message to every visitor at every landing
If you need to convert a visitor that viewed at least several pages (which suggests interest)Popups with signup forms that contain five or more fields to fill in

Popup form examples

Let’s now see different examples of popup forms along with the best practices. After this section, you’ll have a much better idea of how to design the popup forms you need.

1. Sway Coffee Roasters: simple popup form without images

This is a straightforward popup form with a little bit of text and one signup field. It’s a great example of a form that gets both design and readability right.

The white background really makes a difference here. It causes the headline and the button to command attention—a perfect way to convey the message fast.

simple popup form example

What this popup form does right:

  • Clear headline 

  • Short and sweet text

  • Only one signup field (so signing up is quick and effortless)

  • Lightbox effect (the popup is light while the background is darkened)

  • Extra motivation to sign up (the promise of good content)

More about the lightbox effect: What is a lightbox popup?

logo
See how online businesses use popup forms to convert thousands of visitors:

Ecommerce case studies (+examples of successful popup forms)

2. Art of Play: simple popup form with good placement

Unlike many popup forms we see, this one appears in the right bottom corner of the screen. Once again, the lightbox effect is used to focus our attention on the message. This time, the text is even shorter, containing only the call to action with the benefits of signing up.

artofplay popup form

What this popup form does right:

  • Matches the ecommerce website design beautifully

  • Mentions the benefits of subscribing

  • Has a contrasting, attention-grabbing CTA button

3. Flaus: Popup form with a product image and discount

This ecommerce popup comes from one of Wisepops users. I chose it because it’s a wonderful example for those who sell a limited range of products. Flaus sells only one main product (but a really cool one!) so it’s the star of this campaign—which makes total sense!

flaus popup form

What this popup form does right:

  • Beautiful product image

  • Prominent CTA button

  • Clear proposition of how visitors can benefit

Try Wisepops for free to create popup forms in minutes (unlimited free trial, no cc needed):

"Excellent Popup and Embed Form Tool"

"Before Wisepops, our popup campaigns were broad and tedious to set up. With Wisepops, we have very personalized popup campaigns and can launch more campaigns faster."

Sophie, Capterra

4. Elder Statesman: a stripped-down popup form

Sometimes even the top Shopify stores reduce the design of popup forms to bare essentials so they cover just a tiny area on the screen. This is exactly what Elder Statesman did: their newsletter subscription popup form is literally the smallest on this list.

elder statesman popup form

What this popup form does right:

  • Minimalist design that prioritizes the essentials

  • Visitors can continue browsing the site with the opened popup form

  • Popup’s design looks natural and non-pushy

elder statesman
More Insights

Elder Statesman is one of the top stores on Shopify, making $11 million annually. See more examples: 30+ top Shopify stores

5. Miller Lite: popup form that leads to a subscription page

Sometimes, there’s a lot that you want to include in your popup, which could be too much. Why not make a special subscription page and use the popup to drive visitors there? That’s Miller Lite’s strategy. If you visit their homepage, you’ll see a popup form in the bottom right corner:

colorful popup design idea

What this popup form does right:

  • Looks very natural on the homepage

  • Does not prevent visitors from browsing the website

  • Contains the image of the product

Once you click Subscribe

The website will take you to the signup page where you can finish the job:

newsletter subscription page

Related content:

💡 Examples of signup forms

6. Find a Bottle: Sales-oriented popup form

This one is a great example of how popup forms can help sell. We all know that online shoppers appreciate things like discounts and free shipping, and popups are a fantastic way to share them. This Find a Bottle popup makes the value and the promo code prominently visible, which means every visitor will be aware of the offer.

popup form with discount

What this popup form does right:

  • Immediately establishes the value for visitors

  • Makes taking advantage of the offer super easy

  • Clearly explains the conditions of the offer (the minimum purchase)

Did you know…

That you can create unique Shopify discounts in Wisepops? In just a few clicks, you can generate and share unique discounts from your Shopify dash in your popups.

Learn more: How to make unique Shopify discount codes in Wisepops

7. Pedego Harlem: a popup with a countdown

In ecommerce, the overall popup design can have a huge impact on whether visitors click CTA buttons or hit the “close” buttons. That’s why this popup form example emphasizes the beautiful visual and contains the countdown timer.

popup form with countdown

What this popup form does right:

  • Beautiful design with brand’s colors

  • Countdown generates a sense of urgency

  • Popup copy generates interest by mentioning specific discounted products

Want to sell more with sales and other offers?

Adding countdowns to popups can increase conversions by 41%.

[Wisepops study of 514 million popup displays]

8. Highway Robery: a full-screen popup form

This brand uses another way to focus the attention of visitors on their offer: a full-screen popup form. Although the campaign covers the screen almost entirely, only unsubscribed visitors will see it. Besides, the offer is really good—a free product!

full screen popup form

What this popup form does right:

  • Engaging visual

  • Clear value proposition

  • Multiple ways to close the popup (this matters because it’s a full-screen campaign)

Product giveaways are a popular way for Shopify stores (like Highway Robery) to keep adding new emails to the list of potential customers.

Here are more ways:

9. Ardent: a B2B popup form (free consultation)

In this popup form example, Ardent, a marketing agency, gets submissions for free consultations. This is one of the most popular ways B2B businesses use popup forms to convert visitors into leads. And subscribing is simple: there’s only one field to take care of (fewer fields mean the form is easier to fill in).

b2b popup form

What this popup form does right:

  • Color scheme matches the website beautifully

  • Lightbox effect focuses our attention on the offer

  • Concise copywriting that makes it easy to read the offer quickly 

Ardent used Wisepops to create this popup form. You can give it a go, too (just choose a template and customize), for free:

Make your popup copy as engaging as it can be:

10. Virtuance: a webinar signup form

Let’s take a look at two popup forms—

You’ll see how one popup template can be used to create multiple campaigns.

Virtuance is a B2B business that helps real estate professionals promote listings with stunning photography, 3D tours, and other amazing technology. 

The first popup form example from Virtuance promotes a webinar. Again, we see a lightbox effect (always a good idea to bring attention to the popup form) and a nice visual giving us all the details about the event. Note the structure of the form: the visual is on the top, with the headlines and the signup field at the bottom:

webinar popup form

What this popup form does right:

  • Lightbox effect (really needed here because of the colorful background)

  • Helpful visual that summarizes the event and lists co-hosts 

  • Only one signup field that makes it easy to subscribe

Now, the second example—

This time, Virtuance converts visitors with a lead magnet. Note the structure once again: it’s exactly the same as in the first example (visual > headline > signup field).

popup form example b2b

What this popup form does right:

  • Question headline

  • Description of how the checklist could be helpful

  • Popup form is the only visible element on the page

And last but not least—

The two examples show us how B2B businesses use popup forms for different purposes (not just for newsletter signup). Virtuance shares lead magnets and announces webinars (and gives discounts, too, in the third campaign that we didn’t cover here).

If you want to make popup forms work for your business—

Try different designs and incentives.

Experimenting is really important! Just take Asphalte, a brand whose marketing officer tried different popup designs—he now generates up to 4,000 emails a month.

lead generation quote business owner

Related content:

How to promote products (guide with examples)

11. OddBalls: a spin-to-win popup form

While traditional popup forms can be extremely effective, sometimes you need to engage your visitors in different, more creative ways.

The campaign from OddBalls is a fantastic example of such a popup form. It’s a spin-to-win popup (also called wheel popup) that visitors spin to win prizes.

Such popups can generate even 5,000 emails monthly (here's a case study as proof):

popup form spin to win wheel

What this popup form does right:

  • Nice-looking background that uses the brand’s colors

  • Clear description of the rules and the prizes

  • Only one signup field

oddballs-logo
Case study

Find out how OddBalls generated £50k with clever onsite notification campaigns: OddBalls success story

12. Wild Souls: a creative design popup form

Another cool way to make popup forms. Wild Souls has a really creative website design, and their homepage popup form is just like that, too. Unlike traditional campaigns, this one has an unusual form, which will definitely attract a lot of attention.

popup form example creative

What this popup form does right:

  • Very creative design that looks natural on the website

  • Conversational copy written in the brand’s tone

  • Design does not cover a lot and allows browsing

Wondering how you can create popups like Wild Souls? Here are the apps for creating popups:

How to create a popup form (no coding)

Follow these steps to create a popup form that works on any website (WordPress, Shopify, BigCommerce, Squarespace, custom, etc.) In this tutorial, we’ll be using Wisepops, our own tool (rated 5 stars on Shopify).

To create a popup form:

  1. Get a popup app account

  2. Choose a goal and format

  3. Select a form template

  4. Customize the look of the template

  5. Determine when (and where) to show your form

  6. Save and publish your campaign

If you prefer video instructions, here’s our own Lisa Fockens, showing the whole process in about five mins.

Step 1: Get an account in Wisepops

Naturally, we need a popup app to make a popup form (you’ll need only your email to sign up). 

In this tutorial, we'll create a newsletter signup popup form (one of the most popular kinds).

Get started here:

Unlimited free trial, no cc needed

sign up for wisepops

Already a Wisepops user?

Go to the sign in page instead.

Step 2: Choose a goal and format

You’ll land in the Wisepops dash once you’ve signed up.

There—

Click Create campaign > Campaign Assistant (make sure you’re in the Popups tab):

dashboard wisepops

Then—

Click Grow your audience.

how to choose a goal for popup forms

Next—

Choose Newsletter.

Step 3: Select a template 

Next, you’ll be in the template gallery.

Take a look and choose a popup form design template that you like.

Step 4: Customize the look of the template

Remember how important it is to make the popup form feel like a natural part of your website?

This is exactly what we need to do here.

Customizing the popup form is easy: just click any element on the template and the customization menu will show.

If you have any questions:

👉 How to create popup campaigns (Wisepops Help Center)

Want to use discounts?

👉 How to add unique Shopify discount codes

👉 Discount code ideas for popups

Step 5: Determine when (and where) to show your form

In Display Rules, you’ll find options that allow you to define how exactly you want to display your form and the pages it should appear on.

Choosing these options helps you avoid something that gives popups a bad rap: being shown on every page, to everyone, every time they visit.

Let’s make a popup form that:

  • Is displayed only to new visitors that come from desktop devices

  • Appears 10 seconds after landing on your website (so visitors have some time to learn what you do or sell)

To make this popup form, we need to change some settings in two tabs. Specifically, your Display Rules should look like this 👇

Display Rules > Trigger

And—

Display Rules > Audience (need to make sure that Display on desktops is chosen):

Want Wisepops to send emails it collected to Klaviyo?

👉 How to connect Wisepops and Klaviyo

Step 6: Save and publish your popup form

At this point, your popup form is ready.

Make sure to save your campaign by using Save (in the top right corner of your screen).

You’ll land in the window below. Review the settings once again and press once you’re finished creating, choose Done editing (it’s right there, on the right side of Save).

Next, press Publish.

Your campaign is now live! 

You can now check the dash in a bit to see it performs.

As we know, monitoring the performance and maybe experimenting with different incentives, designs, etc. is totally worth it!

If you need any help your popup forms:

Oleksii Kovalenko

Oleksii Kovalenko is a digital marketing expert and a writer with a degree in international marketing. He has seven years of experience helping ecommerce store owners promote their businesses.

Help