WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create a Contact Form Popup in WordPress

How to Create a Contact Form Popup in WordPress

by Courtney Robertson on Jul 18, 2016

Are you looking to add a contact form in a popup for your WordPress site? By using a contact form popup, your website visitors don’t need to navigate away to another page when reaching out to you. In this article, we will show you how to create a contact form popup in WordPress.

When to Use a Contact Form Popup

Contact forms can be used for more than just general inquiries. You can give your readers a quick way to reach you without navigating away from the page that they are on.

You can use the contact form popup for:

  • Feedback: Ask for feedback right by asking for comments or even creating a survey.
  • Contact Info: Gather more details about your reader’s contact information.
  • Subscription: Build your email newsletter list by making is easy to subscribe with the click of a link or button.

Getting Started

For this tutorial, you will need to install and activate two plugins.

First, you will need OptinMonster’s Pro Plan. OptinMonster is the best popup plugin for WordPress.

Next, you will also need the WPForms plugin.

For more details, see this step by step guide on how to install a plugin in WordPress.

Creating a Contact Form Popup

The first thing you will need is a simple contact form. If you’ve already created a contact form, you can skip this step.

To create your contact form, go to WPForms » Add New to create a new form.

Add New WPForm

On the setup screen, you can choose the Simple Contact Form template to continue.

Contact Form Setup

You can drag and drop any additional fields you want from the left side to the preview window. Click on Embed and copy the embed shortcode while you are here.

Contact Form Embed Code

Once you are done, you need to click on the save button to store your changes. Your contact form is now ready.

Now that we have a contact form ready, let’s move on to the next step and create a lightbox popup in WordPress.

Creating a Popup using OptinMonster

Once you’ve copied the shortcode, head over to the OptinMonster panel and click Create New Optin.

New OptinMonster popup form

Your OptinMonster account will pop out as a new page. From here, name your campaign title whatever you would like and select the appropriate website.

For this tutorial, we will select the Lightbox » Canvas optin template, located at the end of all other template options.

Optin Monster Canvas Lightbox

This will bring you to Optin Customizer screen. You will notice that Canvas is blank by design.

WordPress popup contact form - Canvas Lightbox Settings

With Canvas, you can create any kind of unique popups from scratch.

You can add a signup form, Facebook like box, surveys, coupon codes, or – as we’re doing in this tutorial – a contact form.

Under the Optin tab you can choose the height and width of your canvas. By default, it is set to 700 x 350 px. Let’s set the height to 520 at least.

setting the height and width of your popup contact form

In the Custom HTML box, you can enter your contact form shortcode along with any other custom HTML you may want to add.

Here is a sample HTML we used to create the modal popup for this tutorial.

<h3>Do You Have Any Questions?</h3>
<p class="tagline">Want to ask us more about our services? Simply fill out this form and we will get back to you as soon as possible. </p> 
[wpforms id="108"]

Notice that we have embedded our WPForms shortcode in there as well. (Note: The ID number in your shortcode will probably be different than ours.)

Canvas Custom HTML

Change both Optin Cookie Duration and Optin Success Cookie Duration to 0. This will stop OptinMonster from setting duration cookies so that your form will remain visible to every visitor every time they click the link.

OptinMonster cookie duration

Our popup will only display when a user clicks on a button or a link, so this means we need to enable a manual trigger. Go to Display Rules » MonsterLink. Activating this will cause the form to display when the user clicks on the link.

contact form popup in WordPress with MonsterLink

Click on the Save button to store your optin settings, then click on the exit button to leave customizer.

Adding a Popup in Your WordPress Site

Go back to your WordPress admin area and click on OptinMonster. You will see your list of optins. If you don’t see your optin, then click the Refresh Optins button.

OptinMonster contact form output settings

Click on the Edit output settings link below your optin. This will bring you to output settings for the popup.

Output Settings for Contact Form Popup

First you need to check the box next to Enable optin on site and Load optin globally options. If you don’t check these, then the popup will not appear on your site.

Then scroll down on the page, and you will see the option Parse content for shortcodes. Make sure it is checked, otherwise OptinMonster will not be able to read shortcode inside your popup.

Shortcodes in OptinMonster

Next you need to enter the shortcode that you have included in your popup. This is your contact form shortcode.

Click on the save settings to store your changes.

Adding a Link to Trigger Contact Form Popup

First you will need your OptinMonster optin’s slug. Click on the OptinMonster icon in your WordPress sidebar. You will see the optin slug next to your optin title.

Optin slugs

Create a new page in WordPress or edit a post or page where you want to add the contact form popup link or button. Add the following code, replacing the data-optin-slug with your own optin slug.

<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">contact us</a>

In the post editor switch to text editor and add your popup link like this:

Contact Us Popup

Save your changes and visit your post/page. Click on the link to see your contact form popup in action.

popup contact form

You can combine the popup forms with our email marketing addons like MailChimp, AWeberGetResponse, and Campaign Monitor.

You’re all set. We hope this article helped you to learn how to create a contact form popup in WordPress. You may also want to check out our guide on adding a contact form in a slider, or these tips on where to place a contact form for more leads.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.