How to Add a Popup Form to WordPress

Do you want to add a popup form to WordPress? You have come to the right place. Today in this article, we will show how to add a popup form to any page of your WordPress site.

But before we dive into that, let’s better understand what a popup form is and why you may want to add a popup form to your WordPress website. Let’s begin with the basic idea of popup forms in short.

What are Popup Forms?

add popup form to wordpress

A pop-up is a window that appears on the top of the content in a web browser. This window is smaller in size than the total screen which also makes the rest of the other content darker to grab the attention of the viewer.  Such pop-ups are used for several purposes like advertising a product that encourages people to carry out a specific action.

There are two types of popups that can be used depending on your objectives. One of them is entry pop-ups and another one is exit pop-ups. An entry popup appears at the time when the user opens the web page. To avoid the bounce rate and the abandonment, it is recommended to display the popup for not more than 15 seconds and not appear again when it’s closed.

On the other hand, exit pop-ups appear when the visitor is about to leave the page. It is the last possibility to capture the attention of the users to convert them into a lead.

Why add a Popup Form to WordPress?

Pop-up forms are a great way to catch the user’s attention. It is intended to direct the users towards a conversion action, whether it is getting the email to download some extra content or showing them a complementary product or service.

The ultimate goal of these pop-up forms is to obtain the maximum return on the visit to the web page and reduce the bounce rate. A well-used pop-up, without being annoying or too intrusive for the user, can be a very useful strategy. This strategy will help to convert a visitor into a lead and later turn the sales into conversion.

Especially if you are offering a discount on a product or service the chances of converting a simple visit into a quality lead are very high with a popup form. Also keep in mind that even though popup forms have many advantages, they should be used sparingly, at the right time, and offer extra quality content.

Hence adding a pop-up form to WordPress is a great way to provide a clear visual message and capture the user’s attention.

How to Add a Popup Form to WordPress?

Depending on the theme you are using you may not have the option to create a popup form for your WordPress website. In that case, you can use a dedicated plugin to do so.

Plugins help to add extra functionality to your website and it’s the same with adding, customizing and managing popup forms to your WordPress website.

To add popup forms to WordPress you’ll require a form builder plugin and popup plugin. For this demonstration, we’ll be using the WPForms form builder plugin and Popup Maker which is one of the best popup plugins for WordPress. Both of these plugins have a free version which comes with a lot of customization options for you to add and customize the popup forms.

First of all, we’ll see how to create a form and later add it as a popup window.

Step 1. Install and Activate the WPForms Plugin

To install the plugin, go to Plugins > Add New from your WordPress dashboard and search for the keywords ‘WP Forms’. Next, click on ‘Install Now.’ This will begin the installation process, which will just take a few seconds to complete.

After that, activate the plugin and once the plugin is activated it can be accessed through ‘WPForms‘ from the sidebar menu of the WordPress dashboard.

Step 2: Create a Popup Form

Now to create a new popup form go to WPForms > Add New. You’ll see a page where you can add new forms, click on the orange ‘Add New’ button. Here, you’ll be redirected to a form builder area where you can select a template or create a form from the scratch.

add-a-popup-form-to-wordpress

Because we are using the free version of the plugin we’ll demonstrate with the blank form.

 

As soon as you click on the blank form, the next step is to edit the form. You can simply drag and drop the fields that you required in the form.

add-a-popup-form-to-wordpress

Another step is to manage the settings of the form, You can add a description, change the form name, edit the button text also enable and disable antispam protection. If you want to use coding and style the form with codes then it can be done from the advanced settings.

Once you have created the form you can preview it to see how it looks on the web page and save the changes once you’re happy with the result.

Step 3: Install and Activate Popup Maker

Similar to WPForms and any other plugins go to Plugins > Add New from your WordPress dashboard and search for the keywords ‘Popup Maker’. Click on Install Now button and Activate button respectively.

add popup form to wordpress

However, if you wish to use the premium version of the plugin, you’ll have to manually upload and install it. For more details on this, see our tutorial on how to manually install a WordPress plugin.

After the installation and activation, you can manage the popup through ‘Popup Maker‘ from the sidebar menu of the WordPress dashboard.

Step 4: Create a New Popup

As soon as you activate the plugin you’ll get a popup from where you can create a new popup by clicking on the button. Or you can go to the Popup Maker > Create Popup.

add popup form to wordpress

From there you can design your popup. You’ll see that each popup includes a title that is visible to your visitors along with an internal title. Not only that, but you can also include custom content like text, images, videos, and links which you can normally include on your posts.

You can add the popup form by clicking the ‘Add Form’ button.

A new page will appear from where you can select the form that you’ve created from the dropdown. Once you have selected the form click on the ‘Add Form’ button.

add-a-popup-form-to-wordpress

As a result, a unique shortcode will be added to your popup edit page.

 

If you scroll further down in the popup edit page you can find settings that let you choose when and how the popups should appear with ‘Triggers’. The free version of this plugin only allows you to show popups when a certain period of time has passed since the page was loaded.

add-a-popup-form-to-wordpress

Finally, you can set the size of the popup window from the popup creation page. Either has a fixed size or set it as a percentage of the browser window. There are also other options for selecting an animation effect while closing the popup window.

 

Once you’ve done adding the content in your popup form you can preview it to see how it looks. You can also choose where the popup should appear on your site from the popup editor panel.

Step 5: Customize the Popup Window

As you can see the popup needs some changes to the appearance or you may want to customize the popup form to match your website. This can be done by using the themes that are included in the Popup Maker plugin. Although the free plugin only comes with limited themes, you can change a lot of its design. On the other hand premium version of this plugin has infinite thems which you can generate for your WordPress website.

To change the popup theme appearance go to Popup Maker > Popup Themes and select the theme that you want to edit.

From the theme settings, you can change the text colors, and add an overlay and a popup window backdrop. The fonts and other aesthetic aspects of the popup window can also be changed.

While you have a lot of control over the appearance of the popup, you’ll need to get the Advanced Theme Builder add-on if you want to add a background image.

After you’ve finished customizing your popup’s theme, you may publish it to make it live on your website.

Bonus: How to Customize the WooCommerce Registration Form

We have already presented you with one of the easiest ways to add a popup form to WordPress. But as a bonus, we’ll also provide this guide to customize the WooCommerce registration form.

Customizing registration forms helps to provide a good user experience for the customers.

Even though there are various methods to customize the WooCommerce registration form, we’ll be using the easiest and quickest way. This method doesn’t require any third-party tools or any programming knowledge. All you have to do is make sure that you have properly set up WooCommerce and updated it to the latest version. We would also like to recommend you use one of the compatible WooCommerce themes to avoid any theme or plugin conflicts.

Customize Account Creation from the WooCommerce dashboard

WooCommerce allows us to edit the registration form directly from the dashboard. So we’ll use the dashboard method to customize the options for account creation in WooCommerce.

For that, go to open the ‘Settings’ from your WooCommerce dashboard. You can find a few tabs in the settings. All you need to do is click and open the ‘Accounts and Privacy’ tab.

Here, under the Account creation section, you can enable settings to automatically generate usernames and password for new users who registers to your WooCommerce store. Even though these options are turned on by default, you can turn them off anytime according to the needs of your website.

As you can see, this is a very easy and quick way to customize the WooCommerce registration form. However, if you want to customize the various elements of your registration form then we recommend checking out this comprehensive detailed guide. You can use snippets as well as plugins to customize the registration form.

Similarly, you can also customize your WooCommerce my account page using my account page plugins or programmatically as well. Moreover, if you want to customize some more WooCommerce pages, you can even customize your checkout page using one of our plugins like WooCommerce Checkout Manager and WooCommerce Direct Checkout.

Conclusion

This brings us to the end of our guide on how to add a popup form to WordPress. Popup is one of the most effective ways to grab the user’s attention and increase conversions. Because the popups are mostly used to promote a specific product, service, or even a discount that is easily available when someone reaches the site.

As discussed in the article the easiest way to add a popup form to WordPress is by using a plugin. Today we used Popup maker for demonstration which is a simple to use a plugin with a good set of basic functions that can be expanded by purchasing premium add-ons.  If you aren’t ready to invest in a paid popup builder plugin yet and would rather try the free first then this plugin is perfect for you.

You can use any other plugins available on the marketplace which serves the purpose while generating leads or subscriber to your WordPress website.

If you want to learn more about WordPress forms, we have a list of the best contact forms for WordPress too. You can even have a look at our guide on how to customize the WordPress login page to edit the login form of your website.

So can you create a popup form for your WordPress website now? Please do let us know in the comments.

Meanwhile, check out the following blogs if you want to know about customizing your WordPress website some more: