Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add a Contact Form Popup in WordPress

Are you looking for an easy way to show a contact form popup on your WordPress website?

Contact forms are great for communicating with your visitors. Placing them in a popup makes it even easier for your customers to contact you about your products and services.

In this article, we will show you how to add a contact form popup in WordPress.

How to Create a Contact Form Popup in WordPress

Why Use a Contact Form Popup?

Every WordPress website or blog needs a contact form so users can reach out with their questions, feedback, or problems.

However, if your contact form is only on a single page, then it’s hard for people to find it and they might not be willing to leave the page they are on.

As a result, your users may end up leaving your site 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, so they can get in touch with you from whatever page they’re on.

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

That being said, you will first need to create a contact form and then place it in a popup to display it on your web pages. Don’t worry, we will guide you on creating a contact form and adding it to a popup in WordPress.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, just 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 and offers a drag & drop builder that allows you to create a contact form in WordPress in just a few clicks. It also offers prebuilt form templates and lots of customization options.

For this tutorial, we will be using WPForms Lite version because it 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 multiple form templates, more customization options, powerful addons, and lets you collect online payments.

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

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

Add new form in WPForms

After that, WPForms will ask you to enter a name for your form and select a template. Go ahead and select the ‘Simple Contact Form’ template.

Give a name and select 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.

Drag and drop form fields

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.

Edit each fields label and format

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

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

Change your form settings

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 choose to send your contact form notification to any email address you want. If you want to receive notifications on multiple emails, then separate each email with a comma.

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

Notification settings in WPForms

After that, go ahead and click the Confirmations option.

WPForms will use ‘Message’ as the default confirmation type where your visitors will see 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.

Confirmations settings in WPForms

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

Hit the Save button to store your settings

Next, click the ‘Embed’ option in the top corner next to the Save button. When a new window pops up, select the ‘use a shortcode’ option.

Click the use a shortcode link

As soon as you click the link, WPForms will display a shortcode for your contact form. We suggest that 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 is the best lead generation and conversion optimization plugin for WordPress. Over 1.2 million websites use the powerful tool.

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

You will first need to sign up for an account by going to the OptinMonster website.

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

After the plugin is active, you will need to connect it with your WordPress website.

To do that, simply head over to OptinMonster » Settings from your WordPress dashboard and click the ‘Connect an Existing Account’ button.

Connect your OptinMonster account

A popup window will now appear and OptinMonster will ask to connect to your account. Simply click the ‘Connect to WordPress’ button.

Click the Connect to WordPress button

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

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

Create a new campaign

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.

Choose popup as campaign type

After that, scroll down to choose a template for your popup. OptinMonster offers over 75 attractive and highly converting designs for your popups.

We recommend that you select the Canvas template. It is a blank template and great for displaying your contact form, as users can focus on filling out the form without any distractions.

Select Canvas template

Next, enter a name for your campaign and click the ‘Start Building’ button.

Enter a name for your campaign

Now using the drag and drop builder in OptinMonster, you can edit your popup template. To start, click the ‘+ Add Blocks’ button at the top.

Add a new block

You will now see different Blocks appear in the menu on your left. Simply head over to the HTML block and drag and drop it on your template.

Drag the HTML block to the template

After that, you’ll need to enter your WPForms contact form shortcode in your HTML block.

To find the code, go back to your WPForms embed settings and copy the shortcode.

Copy the contact form shortcode

Now, enter the copied shortcode in your HTML block in OptinMonster, where it says ‘Add HTML here.’

Add HTML code

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

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

Contact form shortcode in the template

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

Display Rules tab in OptinMonster

By default, OptinMonster will set it to when the time on 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.

Select MonsterLink targeting

After that, 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.

Copy your MonsterLink code

Your MonsterLink code will looks 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.

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

For example, let’s say you want to add a contact us button on your site. You can start by editing any page or post and go to your WordPress editor. Next, click the (+) plus sign at the top and add a ‘Buttons’ block.

Add a button block

After that, enter a text for your button and then click the link icon. Now add the MonsterLink URL to your button.

Embed the MonsterLink to a button

Once you have done that, publish your WordPress post or page. The MonsterLink will now be added to your contact us button.

Next, head back to your OptinMonster campaign to complete the configuration.

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

Display rule conditions

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. Go ahead and click the ‘Next’ button when you are satisfied with the settings.

Display rule actions

After that, OptinMonster will show a summary of your Display Rule settings. This helps to make sure that you have correctly set up when your campaigns will appear on your website.

Display rule summary

Now, you are ready to take your campaign live and publish your contact form popup. To do that, 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 the appearance of your campaign, change the ‘Publish Status’ from Draft to Publish.

Publish your contact form popup

You can exit the OptinMonster campaign builder and check the status of your campaign from your WordPress dashboard as well.

Just go to OptinMonster » Campaigns and under the Status column, your contact form popup campaign should show ‘Published’.

Check status of your campaign

Next, go to the contact us button you created earlier with the MonsterLink and see the contact form popup in action.

Live example of contact form plugin

We hope this article helped you learn how to add a contact form popup in WordPress. You may also want to check out our guide on how to choose the best website builder or our comparison of the best payroll software for small businesses.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

27 CommentsLeave a Reply

  1. This is nice, but can you explain/show how to do this without OptinMonster? I don’t want to have to buy a second plugin just to show a form in a popup. This should be do-able with WP Forms and a free lightbox plugin.

  2. Before buying I want to ask, can I have two call-to-action buttons in a popup? I want two buttons one for downloading my app from App Store and second from Play Store.

  3. Hello,

    Before I buy Optinmonster, can you tell me if it is fully mobile responsive to have a form inside the canvas popup?

    Thank you.

    Regards,
    Jhorene

  4. Is there a way to do this in the new version of Optin Monster? This worked great when I was using the local WP plugin, but it doesn’t seem to recognize the Gravity shortcode now that I’ve switched over to the new OM.

    Any tips or suggestions?

  5. could this work as well in a WordPress navigation? I’m having some trouble adding the data-optin-slug bit via the WP menu system.

Leave a Reply to Editorial Staff Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.