How to Build a Popup That Opens on a Button Click

If you are looking for a super-easy tutorial on how to open a popup on a button click, you are at the right place.

On-click open popups provide a two-step opt-in for website visitors. In simplest terms, visitors trigger these popups on button click. They are powerful tools to boost conversion rates, but this trigger might be challenging to set up if you lack professional coding skills.

Finding the right tool to create your on-click popup form is the cherry on top.

Fortunately, the solution is simple. This tutorial will show you how to create a popup that opens when users click on a button. You can use these steps and set up your popup campaign for any website, just in a few minutes.

The best part? You can build your on-click popup with zero coding required.

Why Show Popup on Button Click

Let us clear the air and tell you why on-click open popups are a valuable conversion optimization addition to your website.

You probably have tried traditional popups or come across them on various websites. Traditional popups suddenly appear on the screen when you are browsing. When used correctly, these popups provide a fantastic way to grow email lists, increase sales, and boost engagements.

Thousands of brands use popups on their websites. But there is one trigger that most marketers and business owners need to use more often: on-click open popups.

• Clickable popup buttons are a powerful approach to get more visitors to sign up for your email list, fill out a form, register at your website, and more. With a two-step opt-in, visitors click on a button with a CTA on it to open the popup.

• What’s more, two-step opt-ins have a great advantage over traditional popups. This advantage is related to a psychological effect called the Zeigarnik effect.

You know how traditional popups appear on the screen and draw attention. But just because they catch the visitors’ eyes, browsers do not necessarily complete the desired action.

• On the other hand, Clickable popups motivate visitors to fulfill the action by creating the Zeigarnik effect.

You must be wondering how.

Let me explain. In psychology, the Zeigranik effect refers to a strong tendency to remember unfinished tasks better than completed ones and become motivated to complete them.

Why? Because human brain doesn't like incomplete tasks.

Think about it. If visitors click on the popup form button, it means that they have shown an interest in what you offer.

And since they have started the conversion process, they are more likely to finish what they started. Amazingly effective, isn’t it?

Now, let’s dive into the real question. How to show popup on button click with no coding and in under 5 minutes?

With this step-by-step tutorial, you can add an on-click popup to your website in a few minutes, regardless of the website builder you are using.

How to Open Popup on Button Click- Step by Step Tutorial

We will be using Popupsmart to create our on-click popup form. You can create on click popup forms or show any popup on button click on any website, such as showing a WordPress popup form on click.

Popupsmart is a popup builder that allows you to build modern popups in a simple way and generate leads and sales. We make sure you achieve your business goals with our user-friendly popup designs and smart audience targeting technology.

And yes, with Popupsmart, you can create a clickable button that launches your popup campaign super easily. Here's how.

Step 1: Select a Business Objective & Popup Template

First things first, get started by logging into your Popupsmart account. If you still don't have one, click to register Popupsmart.

You can test Popupsmart with the forever free plan, no card required.

On your Popupsmart dashboard, click Your Embed Code to see and copy the embed code.

You need to add this embed code just before the closing

tag of your website template file to set up Popupsmart.

If you need further instructions on Popupsmart setup, see How To Embed The Code On Your Site.

Once you add the one-line code to your website, you are all set to create your first popup. If you already have the code on your site, you don't need to do it again. It is only a one-time setup.

Go back to your Popupsmart dashboard and click Create a New Popup, and select a business objective.

Write your campaign name on the indicated field and select a domain.

If you still have questions, see Creating Your First Popup for detailed instructions.

Step 2: Personalize Your On-Click Open Popup

Now it's time to select a template for your popup campaign. Select a template you like when the popup builder is opened.

Popupsmart has a wide range of pre-designed popup templates, which reduce the campaign building process down to minutes and save your valuable time.

What's even better is that these templates are fully customizable! You can personalize your popup as you like and add elements such as:

• Phone input
• Email input
• Text input
• Checkbox
• Dropbox input
• Radio input
• Countdown timer
• Video
• Image
• GIF

We have too many design options to cover all in this post, but you can find the details in How To Customize My Popup.

Step 3: Set up Display Rules

After you customize your popup, the next thing to do is setting up popup audience targeting. Display rules include;

• Campaign schedule
• Segmenting visitors based on audience and visitor behavior targeting
• Popup view frequency

Configure these settings to show your popup to the right prospects at the right time and get more conversions from your campaigns.

Learn more about popup campaign targeting.

Step 4: Integrate with an Email Service Provider (Optional)

If you plan to get visitors to sign up to your mailing list with a two-step opt-in and if you have an email service provider, you can integrate Popupsmart with it.

When you integrate your on-click popup form with an email service provider, subscribers will automatically be added to your selected mailing list.

Go to the 4th step on the popup builder and click Integrations.

Add your email service provider. If you can't see your email service provider there, you can always use Zapier.

See our guide for email marketing and CRM integrations for details.

Did you know that you can get notification every time a lead subscribes to your mailing list via your email popup?

To get notified, click on Email Lead Notification and Add a new email.

Add the email you want to receive your lead notifications to.

Once you've finished all the setup, save and publish your popup to add a button. Your popup needs to be published first.

Step 5: Add Button with the Embed Code

Now, it's time to show you how to open popup on button click. You won't believe how easy it is!

Once you are satisfied with the appearance and targeting settings of your popup, go to the final step, "Publish."

Here, click on Get Launch Button.

• Change the button text to write a compelling CTA.

What is CTA?

Your CTA must encourage visitors to click on the button. Feel free to check out our clear CTA popup recipe to get inspired if you need.

• Adjust the font size.

Set up the font size of your on-click popup button's text by simply dragging the dot on the bar to the right or left or specifying the font size from the dropbox.

You can always leave the font size as it is or A/B test your popup button.

• Customize the button color and border-radius.

Step 7: Get The Button Embed Code

After you customize the open popup button, click Get The Code. Then, click on Copy embed code.

Once you copy the button embed code, you can paste it in the HTML you want to show popup on button click.

You can add this code to:

• Blog posts
• Page
• Text widget
• Page builder
• Anywhere on your site that accepts HTML code.

That's it!

We hope that this tutorial clarified how to open popup on button click. Now you can show a WordPress popup form on click or for any website builder without any plugins.

If you are trying to leverage your conversion rates with popups, here are some helpful articles you might like:

• How to Create Converting Mobile Popups (Without Lowering Your SEO)
• Email Popup: Complete Guide with 15 Brilliant Examples
• Popup Video: How To Add One To Your Website (No Coding)

All set to join Popupsmart users? Get started today.