How to Make a Popup that Opens on a Button Click [+Examples]

Want to make an on-click popup, the one that opens when someone clicks a button on your website?

That's a good idea—

Did you know, for example, that this type of popup form has the highest conversion rate?

So, yes, if used right together with other marketing strategies, on-click popups can become one of your most effective sources of leads.

Get started:

• What is an on-click popup

• Are on-click popups effective?

• Benefits of on-click popups

• Examples of on-click popup forms

• How to make a click-triggered popup

What is "a popup that opens on a button click"?

On-click popup is a popup form that is triggered by a click on a button or link on a web page. Popups that open on a button click are less intrusive because visitors launch them themselves. Such campaigns are perfect for contact forms, newsletter signups, and loyalty program signups.

Are on-click popup forms effective?

On-click popups perform the best among other types of popup forms.

In our 2024 research on popups, on-click popups achieved a conversion rate of 22.65%, significantly outperforming the 4.01% average conversion rate of traditional popups.

Benefits of on-click popups

here are some of the benefits of using on-click popups on your website:

• User-friendly. Popups triggered by a click are highly contextual and appear only when a visitor is engaged enough to click on a specific button or link, making them less intrusive

• Higher conversion rates: As mentioned earlier, on-click popups have an impressive conversion rate, making them some of the most effective popup form type

• Customizable and targeted: Thanks to popup software, you can completely customize on-click popups to match the design and messaging of your website, making it look like its natural part

Examples of on-click popups

Here are some ways online businesses are using click-triggered popups to convert visitors and generate leads.

DB Journey

DB Journey, a popular travel gear company, uses on-click popups to effectively capture email addresses for their membership program.

Those who want to subscribe click the "DB Black" button, which is available in the website's header on all pages:

And here's a closer look at the popup form:

Wisepops

We at Wisepops also use click-triggered popups to generate inbound leads. Visitors who are interested in our onsite marketing platform can quickly sign up for a personalized demo like that (this is one of the previous versions of our homepage):

And a close look:

Taylor Stitch

Taylor Stitch, a popular clothing brand, uses on-click popups to build the email list.

Their strategy involves a "20% off your purchase" button in the sticky bar, which, when clicked, reveals an on-click popup with a newsletter signup form:

And here's a close look at this stunning campaign:

How to make a popup that opens on a button click

In this on-click popup tutorial, I'll be using Wisepops, our popup builder (rated 4.9 on Capterra and Shopify).

Get a free account to get started:

Unlimited free trial, no cc needed. Learn more about Wisepops popup builder

Here, we will create a button click popup that collects emails and gives a discount (like the one Taylor Stitch uses).

If you prefer a video, this one will walk you through the process in under two minutes:

Follow these steps:

1. Create a new campaign

2. Choose a template

3. Customize the design

4. Turn off the tab

5. Activate the on-click display

6. Add the hash to the button on your website

7. Publish

1. Create a new campaign

Go to Create campaign > Campaign assistant > Coupon:

2. Choose a template

Let's choose a template. The one below is great—it has a big heading to grab attention, lots of space for text, and collects both name and email:

3. Customize the design

The popup editor is user-friendly—simply click an element on your on-click popup to change or customize it.

The text formatting menu is located at the top, while additional settings are on the left as you select corresponding elements.

4. Turn off the tab

The template we selected includes a tab—a small window that remains in the bottom left corner of the website after a visitor closes the popup without claiming the discount.

This feature is popular in ecommerce as it makes discounts more accessible, but we will turn it off (since we need the popup to be triggered by a click on a specific button only).

Go to Tab and click Never in Start Displaying:

5. Activate the on-click display

Go to Display Rules and click On Click.

You'll see the default trigger (#wisepops) right below the settings. Change the text to a different one; say, #newsletter or #book-a-demo.

For example:

<a href="#book-a-demo">Link text</a>

6. Add the hash to the button on your website

We'll do this through your CMS's dashboard.

The view from your CMS might be different, but here are a couple of examples of how you can add it, using the #book-a-demo hash:

7. Publish

Just one small step, and you can show a popup on a button click!

Click Preview in the top right corner of the campaign editor to see how it will look on your website.

To actually show the form on your website, add the Wisepops code snippet (takes just a few clicks, no coding experience needed): add Wisepops to your website.

Also, to have the collected lead data like emails and names sent directly to your email marketing platform, connect it: Integrations

Summary

On-click popups are a powerful tool for digital marketers, offering an unobtrusive yet highly engaging way to capture leads and drive conversions. The versatility and customizability of these popups make them suitable for many goals, from email list building to promoting special offers.