How to Add a Contact Form Popup in WordPress

Contact forms are essential for communicating with your website visitors. By placing them in a popup, you make it easier for potential customers to contact you about your products and services.

When the contact form is readily available and easy to use, visitors are more likely to reach out. This can lead to more inquiries, feedback, and potential conversions.

However, popups can be intrusive if not used wisely. Overusing or showing them at the wrong times can frustrate users. So, it’s important to find the right balance so your pop-up contact form is helpful and not disruptive.

In this article, we will guide you through the steps on how to add a contact form popup in WordPress.

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

Why Use a Contact Form Popup?

Every WordPress website or blog 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:

Ready? Let’s get started.

Video Tutorial

If you’d prefer written instructions, keep reading.

How to 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 option.

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 1,800+ 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.

After that, WPForms will ask you to name your form and select a template.

After entering a form name, go ahead and select the ‘Simple Contact Form’ template.

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. This will show your visitors a thank-you message upon submitting a form.

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 at 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 on a popup.

When a new window 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.

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.

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 go 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. You 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 ‘Published.’

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.

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 guide on how to send confirmation emails after WordPress form submissions and how to track and reduce form abandonment.

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.