Enjoy 50% OFF your first month!  Use code: 2023BLOG

How to Add a Popup Form in WordPress Like a Pro

Some old tricks are still being pulled out of the web design hat simply because they work. A popup form in a WordPress site is one of those strategies that when it’s done right, it increases lead generation.

You might be surprised how easy it is to add a popup form in a WordPress site with the help of an online form builder plugin, like MightyForms and a popup maker plugin.  In fact, with MightyForms you can now add a pop up button directly to other publishing platforms as well, like BigCommerce, Magento 2, Squarespace, Wix, and Webflow.   No computer coding needed, no complex steps.

The button below is an example:

×

We’ll go over how to get a popup form to greet your visitors in no time. Keep on reading to nail it and avoid an annoying, inconvenient, and pushy popup form.

Vindicating the Popup Reputation

The very first popup was invented more than 20 years ago. Ethan Zuckerman was then a designer and a programmer for Tripod.com and wrote the javascript code for a popup ad.

Zuckerman’s intentions were good.  He was trying to make the internet better by introducing an advertising format that would not interfere with the rest of the page. But the pop-up ad ended up being one of the most hated tools on the internet and he has since apologized for it.

He should not regret it though. Some of the world’s great inventions were misused or overused but it doesn’t necessarily mean it was bad in the first place.

Two decades later, here we are, telling you how to add a popup form to your WordPress page. Why? The problem is not with the popup format itself, but how it has been deployed wrong. The bad rep ends today.

5 reasons why you should add a popup form to your WordPress page

A popup form can and should delight your visitors. It complements your content. It helps to reinforce your brand identity on your WordPress page. It can be a welcoming break between subjects. It should be engaging and most definitely, it should convert.

Below are the top five reasons for using a popup form:

1. To Increase Lead Generation

The main and ultimate reason why adding a pop-up form to your WordPress page is to convert visitors into customers. Different than static forms placed on landing pages, a popup form enhances the main content with an additional offer.

When a popup form is done right, it will be contextually relevant. That’s key since a popup form prompts prospects to action with a callout. A popup form can take visitors from the Attract stage of a Lead Generation Process Flow straight to the Close stage, as I have explained in a previous article, speeding up conversions.


2. To reduce bounce rate

Regardless of how visitors got to your website, you want them to stay. At least, stay long enough to hear your offer. A popup form can be your last resort to convince people not to bounce off of your page.

A popup form that appears when a visitor is about to leave your page has to be compelling. Either quickly sum up what will they miss by leaving or offer them a discount or a giveaway for changing their mind.


3. To highlight targeted keywords

Let’s say you’re running an e-commerce that sells essential oils and a visitor found out about your website searching online for a specific term (keyword) like “lavender”. You could make a personalized popup form appear while the visitor is browsing through products.

The popup form could offer more information on the benefits of the lavender essential oil, for example, in exchange for contact information. Grabbing your visitor’s attention with targeted keywords increases your chances to get noticed, thus increasing the conversion rate.


4. To reinforce your message

For some reason, a visitor got to your page and stayed. The visitor got interested in your content and in learning more about your business. A popup form can be used at this time to reinforce your offer.

This is all about leveraging the “effective frequency” or the number of times a prospect has to be shown your value proposition until deciding to take action. A pleasant and timely popup form can be just that nudge missing to convert a visitor into a customer. 


5. To encourage action

I have talked before about proven ways to increase conversion rates with an online form. But displaying your online form as a popup can strengthen your proposition and encourage action. It’s about the “instilling sense of urgency” technique but louder.

The idea is to cut to the chase when it comes to the copy in order to influence decision-making. Use a popup form as a reminder of a sales ending soon or that only a few seats are available for your event. 

 

Types, Triggers, and Purposes for Popup Forms

A popup or a pop-up? The popup spelling has been widely accepted but according to Merriam-Webster dictionary, it’s pop-up with a hyphen. But either way, a pop-up form is so effective that even they show you an irresistible one when you’re about to leave their site:

By definition, a pop-up is any content in a “modal window” or a box, secondary to the primary window, a.k.a. the main or pillar page. It can be triggered by a certain behavior and it can fade away once the desired action is completed.

Ever since its creation, popups have evolved and optimized to get better results. There are also more ways you can make it, well, pop, too.


Popup Types

Ideally, you’d choose the best type for your business or according to what you’re offering. I highly recommend conducting A/B Testing to determine which type of popup form will perform best with your targeted audience. 

Here is the list of the common popup form types:

Welcome Mat: a full-screen popup form that slides above the page content. This bold type of popup form should be used for highly relevant information, like an annual sale or a product launch, otherwise, it will be an overkill.

Overlay Modal: front and center popup forms that appear on top of page content. It doesn’t block the view of the entire page like the welcome mat type but should be used for actual great deals or it can be annoying.

Top Banner:  also called Hello Bars or Sticky Bars, this type of popup form is placed across the very top of the page. Ideally, this popup form should be used as a reminder of a generic offer, like an e-book subscription.

Slide-in Box: the most discreet one, this type of popup form manifests itself from the side/bottom of the page. This small box is great for presenting offers as visitors scroll down the page.

 


Popup Triggers

The early days when you’d feel like a hostage to a popup ad are over. Nowadays, there are many ways that a popup form can be summoned, without being inconvenient, obtrusive, or obnoxious.

Here are the main triggers used for popup forms:

Page Entrance: a popup form appears as soon as the visitor first gets to the page

Page Scroll: a popup form is presented when the visitor scrolls down to a specific point on the page

Element Interaction: a popup form is presented whenever the visitor clicks on or hovers over a specific element on the page

Time on Page: a popup form appears after the visitor spent a specific amount of time on the page

Exit Intent: a popup form appears whenever the visitor scrolls all the way up of the page to leave

Inactivity: a popup form appears whenever there’s no interaction on the page after a specific amount of time

  

 

Purposes for a Popup Form

As I keep repeating throughout this article, a popup form will work and capture leads if done correctly. Do not be tempted to use one just for the sake of it or if it will not enhance the customer experience.

If upon researching your target audience, you conclude that adding a pop-up form to your WordPress page will help you to achieve business goals, then definitely proceed.

There are many purposes when a popup form is the best strategy to promote a message or an offer. The most successful cases have used it for the following purposes:

  • Collect feedback and contact information;
  • Promote a seasonal sale or a special discount;
  • Conduct market research or a customer survey;
  • Launch new products or services;
  • Invite prospects to try a new feature or test a prototype;
  • Hype visitors about a contest or a giveaway;
  • Publicize an upcoming event or a callout to the event registration;
  • Encourage visitors to subscribe to newsletters, free guides, or an ebook;
  • Advocate a cause and urge visitors to join or sign a petition;

How to Add a Pop-up Form in WordPress

Are you ready to make your message or your offer pop up on the screen? Start a dialogue with your customer by including a contact form as a popup form to encourage interaction.

As promised, adding a pop-up form to your WordPress page is easy and requires no coding knowledge. All you’ll need is to enable MightyForms as your online form builder plugin. 

All forms created with MightyForms can then be added to any popup builder plugin that allows you to edit the HTML.

Let’s go over each step:

 

Step 1. Install MightyForms plugin

1.1. From the WordPress plugin directory, find MightyForms and download it.  Alternatively, from your WordPress dashboard, click on the Plugins tab from the sidebar menu on your left. Then, click on Add New from the Plugin sub-menu. Simply type in MightyForms in the search box next.

 

1.2. Click on the Install Now button located on the top right-hand corner of the app box.  Once the installation is finished, go ahead and click on the Activate button that should appear next.

 

1.3. MightyForms plugin should now appear on your WordPress sidebar menu on your left. Click on it for the next step.

 

Step 2. Login or Sign up to the MightyForms plugin.

2.2. You can log in by creating a MightyForms account, providing an email address and a password, or simply sign in using an existing Google or Facebook account.

 

Step 3. Create a New Form

3.1. Now you’re on the MightyForms dashboard and you need to choose how you would like to create a form: From Scratch or From a Template. For the purpose of this tutorial, let’s choose a Contact Form from the MightyForms template menu.


 

 

I wrote an article just on creating contact forms in WordPress. Be sure to check it out for specific tips and detailed instructions.

3.2. Click on “Contact Us Form” from the template options and then click on the Use This Template button on your left.

 

3.3. You can customize your template as you feel like it from the Builder dashboard.  Drag and drop additional fields or delete fields you don’t need.  You can resize, reshape, and reposition any field on your form. You can even add an image or your logo if you want.

 

3.4. On the Design dashboard, you can customize the theme of the form. All colors and fonts are fully customizable too. 

 

3.5. After setting up the form’s design, you can create Logic Rules, Notifications, Integrations, and Advanced Settings, like the Abandoned Form Recovery feature so you can track and reduce form abandonment.

 

3.6. Rename and Publish your project.  Your contact form is now ready to be popped!

Step 4. Turn your MightyForms contact form into a pop-up form

4.1. From your WordPress dashboard, repeat the 1.1. step process to find, install, and activate a popup builder plugin of your choosing. We’ll go with Popup Builder for this tutorial, which is an easy and free WordPress plugin.


4.2. Login to the Popup Builder plugin and click on the Add New Popup tab and select the HTML option.


4.3. Add a Title Name. Click on the Choose a Block icon and select MightyForms to have your newly created MightyForms contact form added to the Popup Builder plugin. 

4.4. Select the contact form from the dropdown menu and then click on the Add Form button. 

4.5. At this stage, you can customize all the popup settings for your form, such as trigger and display. Simply select from the options of each tab.


4.6. Once all popup settings are selected, your popup form is ready to be published! Click on the Publish button to make your MightyForms popup contact form live on your WordPress page. 

How to Publish a Pop Up Form - From a Button!

If your website is not hosted on WordPress, don’t worry. MightyForms has just added a cool new feature to make your form pop up on other publishing platforms too. 

Just create and publish your form directly on MightyForms app. You can create an account or log in using your Google or Facebook account. The process for creating your form is the same as described above, but instead of using another WordPress plugin to make it pop up, it can now be done directly on MightyForms. 

Once your form has been created and published, you can select the pop-up option from the “Share” settings of your form. You can even customize the pop-up button with the desired text, color, font, and style to be displayed. 

MightyForms will generate a code for your newly created pop-up form. Simply copy this code and paste it to whichever Content Management System (CMS) of your choice (BigCommerce, Magento 2, Squarespace, Wix, or Webflow). You can even paste the code to the HTML viewer of your WordPress page, as an alternative process, instead of using a pop-up maker plugin.


There you have it! A fresh popup form added to your WordPress page ready to engage with your visitors. But keep in mind that no matter which type of popup form you decide to try, always make sure that it is timely, relevant, and valuable.  


WRITTEN BY

Olivia Pompeu

Olivia Pompeu is a Communications, Public Relations and Marketing professional with over 15 years of experience in global companies, overseeing communications strategy aimed at promoting business objectives to stakeholders.