Wisepops logo

Last updated Thu Aug 29 2024

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:

Easily create on-click popups for your website

Engage your visitors with popups that achieve conversion rates of up to 22%

popup animated

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.

popup conversion rate by display trigger

"In most cases, people click on buttons because they’re likely to be interested in the offer, which explains the effectiveness of on-click popup campaigns."

Pawel Lawrowski, a digital marketing expert

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

Helpful guide if you'd like to try discounts in your popup:

Discount pricing strategy: 16 examples

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:

dbjourney popup form on button click

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

on button click popup example

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

on click popup

And a close look:

wisepops on click popup

Want to learn how we use on-click popups connected with Zapier to automate sending our clients to sales and other teams?

How Wisepops user forms with Zapier for lead management

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:

on click popup form

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

popup that opens on click example

Want to see more?

Check out these 50+ website popup examples from ecommerce businesses and B2B popup examples from B2B websites.

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

trustpilot
"Great tool to build your email list and increase web sales"

"Adding Wisepops to my Shopify site has greatly increased the number of email subscribers while also encouraging sales with a coupon code. It's great that you can customize how often you want it to show up to your web visitors and that there are so many templates and options to use."

Heidi B., Trustpilot

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 in the Wisepops dash to enter template library:

new gallery

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. I'll use it, but feel free to choose any you like.

lead capture popup template

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.

popup editor

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:

tab setting

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>

on click display scenario

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:

examples

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.

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 by writing detailed, in-depth guides.

Education:

Master's in International Marketing, Academy of Municipal Administration

Related articles

6/7/2023

This guide offers psychology-backed copywriting tips that you can use to boost ecommerce sales.

collect emails main

9/2/2024

Want to know how to collect emails? Read these best ways to collect emails on websites, backed up by examples and tips.

Help