How to Add a Contact Form Popup in WordPress

Ever watched visitors browse your site, only to leave without getting in touch? It’s frustrating, especially when you know they’re interested but can’t seem to connect.

A simple, well-timed popup can make all the difference. 💡

When placed thoughtfully, it puts your contact form right where visitors need it. This can lead to more inquiries, feedback, and conversions.

At WPBeginner, we’re big fans of WPForms because it’s beginner-friendly, powerful, and perfect for creating all kinds of forms. Even better, you can pair it with OptinMonster to create a contact form popup that feels helpful, not pushy.

In this guide, we’ll walk you through how to add a contact form popup in WordPress. One that turns visitors into leads, without annoying them.

Why Use a Contact Form Popup?

A contact form popup makes it easier for visitors to reach out, without hunting for your contact page or leaving the page they’re on.

Every WordPress website needs a contact form for users to submit questions, feedback, or problems.

However, if your contact form is only on a single page, then it’s hard for people to find it. As a result, your users may end up leaving your site before contacting you, and you could lose potential leads and conversions.

A contact form popup helps solve this issue by allowing your visitors to quickly view the form by clicking a button. This way, they can get in touch with you from whatever page they’re on.

This type of contact form also helps keep people on your website, as they don’t have to exit the page they are viewing. Plus, you can grow your email list using a contact form popup.

That said, you will first need to create a contact form and display it in a popup on your web pages.

But don’t worry. In the following sections, we will guide you through creating a contact form and adding it to a popup in WordPress.

We will also share our expert tips on creating a popup that grabs attention without being intrusive. This approach makes sure your WordPress site stays user-friendly while maximizing interaction opportunities.

And here’s a quick overview of all the steps you’ll go through:

Ready? Let’s get started.

Step 1: Create a WordPress Contact Form

First, you will need to select a WordPress contact form plugin.

There are many free and paid options you can choose from, but we recommend using WPForms, as it’s the best form builder for beginners.

We use it ourselves on our website to display contact forms, annual user surveys, and site migration forms. For details on our experience with the plugin, check out our complete WPForms review.

WPForms is a beginner-friendly form plugin that offers a drag-and-drop builder for creating contact forms in WordPress with just a few clicks. It also offers prebuilt form templates and lots of customization options.

For this tutorial, we will use the WPForms Lite version, which is free and offers a contact form template.

However, you can also use its premium version to unlock more features. For instance, WPForms Pro offers 2,000+ form templates, more customization options, powerful add-ons, and the ability to collect online payments with no additional transaction fees.

To start, you will first need to install and activate the WPForms Lite plugin. If you need help, then you can see our step-by-step guide on how to install a WordPress plugin.

Once the plugin is active, you are ready to create your contact form. All you have to do is go to WPForms » Add New from your WordPress dashboard.

On the next screen, you can go ahead and enter a form name.

Then, you’ll select how you’ll build your form – using WPForms AI, a pre-made template, or a blank canvas.

If you want to use the AI form builder, simply enter a prompt. Within seconds, your form will be generated.

That said, we’ll use the ‘Simple Contact Form’ template for this tutorial because it has everything we need.

Next, you can add fields in the form using the drag-and-drop builder.

Simply drag the fields you want to add to the form from the options given in the menu on your left. You can also reorder the positions of each field in the form.

WPForms also lets you customize each field in the contact form.

For example, if you click on the ‘Name’ field, then you’ll get different options, such as changing its label and format. You can even add a description or mark any field as required.

Once you are done, go ahead and click the ‘Settings’ option to configure the form notification and confirmation.

In the ‘General’ section, you can rename the form, change the submit button text, enable anti-spam protection, and more.

Next, you can go to the ‘Notifications’ settings option. By default, the notifications are sent to the admin email that is set up on your WordPress website.

However, you can send your contact form notification to any email address you want. If you wish to receive send form notifications to multiple emails, then separate each email with a comma.

For the email subject line, WPForms uses the name of the form you entered earlier. However, you can edit the subject line’s text to whatever you wish.

Now, let’s go to the ‘Confirmations’ option.

WPForms will use ‘Message’ as the default confirmation type. Upon submitting a form, this will show your visitors a thank-you message.

However, you can change the message type and redirect users to a specific page on your website when they complete a form.

Once you are done creating a contact form, make sure to click the ‘Save’ button in the top right corner to save your changes.

Next, you can click the ‘Embed’ option in the top corner next to the ‘Save’ button to get the form’s shortcode. You will need this information to display your form in a popup.

When a new popup appears, you can select the ‘use a shortcode’ option.

WPForms will then display the shortcode for your contact form as soon as you click the link. We suggest you keep this tab/window open as you will need it in the next step, where we’ll show you how to add your contact form in a popup.

Step 2: Add a Contact Form Popup to Your WordPress Site

To create a contact form popup, you will need a WordPress popup plugin.

We recommend using OptinMonster, as it’s the best lead generation and conversion optimization plugin for WordPress. It’s also one of the most popular, with over 1.2 million websites using this powerful tool.

At WPBeginner, we use OptinMonster for various tasks, including promoting special offers and deals on popups, slide-ins, and header banners. If you want more information, feel free to read our full OptinMonster review.

For this tutorial, we will use the OptinMonster Pro version, which includes a clutter-free template and advanced display rules to show the popup.

First, let’s sign up for an account by going to the OptinMonster website. Simply visit the website and click the ‘Get OptinMonster Now’ button.

Next, you will need to install and activate the free OptinMonster plugin on your website. For more details, you can follow our guide on how to install a WordPress plugin.

After the plugin is active, you will see the setup wizard. Go ahead and click the ‘Connect Your Existing Account’ button.

A popup window will now appear, and OptinMonster will ask to connect to your account.

Simply click the ‘Connect To WordPress’ button.

Now that your account is connected, the next thing to do is create a new campaign for your contact form popup.

You can start by going to OptinMonster » Campaigns and then clicking the ‘Create Your First Campaign’ button.

On the next screen, you will have to select a campaign type.

Since we will create a contact form popup, select ‘Popup’ as your campaign type.

After that, you’ll want to scroll down the page to choose a template.

OptinMonster offers over 75 attractive and highly converting designs for your popups. You can select any template that you like.

Once you’ve decided on the template, simply enter a name for your campaign and click the ‘Start Building’ button.

Now, using the drag-and-drop builder in OptinMonster, you can edit your popup template.

You will see different ‘Blocks’ appear in the menu on your left. Let’s locate the ‘WPForms’ block, then drag and drop it onto your template.

After that, you’ll need to click the ‘Form Selection’ dropdown menu from the block settings in the left menu.

Then, select the ‘Add Shortcode Manually’ option.

From here, you can enter your WPForms contact form shortcode in the block. To find the code, you’ll want to go back to your WPForms embed settings and copy the shortcode.

It’s important to note that you won’t see a preview of the contact form in the template when you add the shortcode.

This is normal, as your contact form will appear when the campaign is published.

Next, you can go to the ‘Display Rules’ tab at the top to choose when the popup should appear on your website.

By default, OptinMonster will set it to when the time on the page is 5 seconds, and the popup will appear on any page. However, you can change the display rule settings and select different triggers and targeting options.

We suggest using the MonsterLink (On Click) targeting. This way, your popup will appear when a visitor clicks a link or a button.

Next, you can click the ‘Copy MonsterLink Code’ button and add it to any text, image, or button on your website.

For more details, you can follow our beginner’s guide on how to add a link in WordPress.

Your MonsterLink code will look like this in HTML:

<a href="https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

However, to embed the link on your WordPress blog post or page, you just need the URL from the code.

Here’s what the URL should look like:

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

For example, let’s say you want to add a Contact Us button on your site.

In this case, you can start by editing any page or post and going to your WordPress editor. Then, you’ll want to click the (+) plus sign at the top and add a ‘Buttons’ block.

After that, you can enter a text for your button and click the link icon. For example, we use ‘Contact Us’ as the button’s copy.

Now, it’s time to add the MonsterLink URL to your button. Click on the button, then on the link inserter button, and paste the URL.

Once you have done that, go ahead and publish your WordPress post or page. The MonsterLink will now be added to your ‘Contact Us’ button.

Now, let’s head back to your OptinMonster campaign to complete the configuration.

After selecting MonsterLink as your target and showing it on any page, you can click the ‘Next’ button at the bottom.

On the next screen, you will see options to change the campaign view type, add a MonsterEffect animation, and play a sound when the popup appears.

You can be creative and experiment with different settings. When you are happy with the configuration, go ahead and click the ‘Next’ button.

OptinMonster will then show a summary of your ‘Display Rule’ settings.

This helps to ensure you have correctly set up when your campaigns will appear on your website.

Now, you are ready to take your campaign live and publish your contact form popup. To do that, you’ll want to go to the ‘Publish’ tab at the top.

Next, you can click the ‘Preview’ button before publishing your campaign. This will show you a live preview of how your popup will look on your website.

When you are happy with your campaign’s appearance, change the ‘Publish Status’ from ‘Draft’ to ‘Publish.’

Once done, you can exit the OptinMonster campaign builder and check the status of your campaign from your WordPress dashboard.

To do this, you’ll want to navigate to OptinMonster » Campaigns. From here, simply click the ‘Status’ dropdown menu and change it from ‘Pending’ to ‘Publish.’

OptinMonster will automatically update the changes.

Next, you’ll want to go to where you display the ‘Contact Us’ button with MonsterLink integration and see the contact form popup in action.

There you have it!

You’ve successfully created a contact form plugin in WordPress. Even more, you’ve done so while ensuring that the form is non-intrusive.

Bonus Tip: Boost Your Popup Signups

Now that you know how to create a contact form popup, the next step is making sure it improves user experience instead of causing visitors to bounce from your site.

To maximize signups, you should focus on creating helpful and relevant popups rather than intrusive ones.

First, timing is key. Popups that appear too soon can frustrate users, so try showing them after a visitor has scrolled or spent some time on your site.

Personalization is another game-changer. To make your popups feel more relevant, you should tailor them to what users are doing, like offering a discount on a product they’re browsing.

To encourage quick action, create urgency with phrases like “Limited time offer” or tap into the fear of missing out (FOMO) by highlighting what they could gain by acting now.

Adding social proof, like reviews or stats, can also build trust and make your popups more convincing. Don’t forget the role of color: bold hues can grab attention, while softer tones build trust and harmony.

By combining these strategies, you can create popups that grab attention, connect with your audience, and drive action without feeling pushy. For more information on this topic, you can check out our guide on how to use the psychology of popups to boost signups by 250%.

FAQs: How to Add a Contact Form Popup in WordPress

Have questions about contact form popups? Here are quick answers to help you set them up the right way.

How do I ensure my contact form popup isn’t annoying?

It’s all about timing and context. To avoid frustrating visitors, show popups based on behavior, like after a few seconds on the page or when someone scrolls down. Tools like OptinMonster let you fine-tune these settings so your popup feels helpful, not intrusive.

Can I use a contact form popup for mobile visitors?

Yes, but be mindful of screen space. WPForms and OptinMonster are mobile responsive, meaning your popups will adapt to smaller screens. Just make sure the design is clean and easy to close on mobile devices.

How can I track the performance of my contact form popups?

You can use MonsterInsights to track important form metrics like views, clicks, and conversions, all from your WordPress dashboard. This helps you understand what’s working and where you can improve.

Will a contact form popup slow down my site?

Not if it’s built and configured properly. Lightweight tools like WPForms and OptinMonster are optimized for performance, so they won’t noticeably slow down your site when used correctly.

Video Tutorial

Before you go, we’ve prepared a video tutorial on adding a contact form popup to your WordPress site. Be sure to check it out!

Explore Our WordPress Form Guides

We hope this article helped you learn how to add a contact form popup in WordPress. Next, you may also want to check out our guides on:

• How to Use Contact Form to Grow Your Email List in WordPress
• How to Create a Contact Form with Multiple Recipients
• How to Send Confirmation Emails After WordPress Form Submissions
• How to Track and Reduce Form Abandonment
• WordPress Form Does Not Work: Troubleshooting Tips
• The Ultimate Guide to Using WordPress Forms

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.