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 a popup form is

• Pros and cons of popup forms

• Popup form examples

• How to create a popup form

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 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.

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:

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.

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.

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?

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.

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!

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):

Examples of campaigns made with Wisepops

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.

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

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:

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:

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.

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)

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.

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

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!

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)

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).

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:

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:

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).

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.

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):

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

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.

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

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

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):

Then—

Click Grow your audience.

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.

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):

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:

• Wisepops Help Center

• How to create a discount popup [guide]

• How to create an HTML popup [CSS, Javascript]

• Webinar: Popup teardown session [summary]