WordPress Tutorials, Tips, and Resources to Help Grow Your Business
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.
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.
On the setup screen, you can choose the Simple Contact Form template to continue.
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.
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.
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.
Scroll down the page and choose a campaign template for the new popup you’re going to create. Let’s choose Canvas.
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.
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.
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.
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.)
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.
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.
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.
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.
Click on the Edit output settings link below your optin. This will bring you to output settings for the popup.
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.
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:
Save your changes and visit your post/page. Click on the link to see your contact form popup in action.
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.