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 Shahzad Saeed 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.

embed popup contact form

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.

create a new optin

Your OptinMonster account will pop out as a new page. In the first step, you’ll be asked to select a campaign type. Since we are looking to create a contact form popup, let’s choose Lightbox Popup as the campaign type.

choose lightbox popup

Scroll down the page and choose a campaign template for the new popup you’re going to create. Let’s choose Canvas.

choose canvas as campaign template

OptinMonster’s canvas is a blank popup where you can insert any HTML, CSS, JavaScript, and even WordPress shortcodes.

For more canvas campaign ideas, you can read 9 unique campaigns you can make with canvas popup.

Now you’ll be prompted to enter the name of your campaign. Choose an appropriate name and click Start Building. For the sake of this example, let’s enter Contact form popup as the campaign name.

name your lightbox popup

This will bring you to Optin Customizer screen. You will notice that Canvas is blank by design. Now you need to choose the website where you want to display the popup. If you haven’t added the website to OptinMonster yet, click Add a new website.

specify campaign website

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="17" title="false" description="false"]

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.)

add 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

Make sure to Save the campaign and toggle the Publish status from Paused to Live. To change the status, click on Publish near the Save button and then toggle the Status to Live.

toggle status to live

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.

edit output settings

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

enable optin

First you need to check the box next to Enable optin on site. In the Who should see this optin dropdown, select Show optin to all visitors and users. If you don’t check these, then the popup will not appear on your site.

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.

unique slug

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.