Recently we got an email from a user asking: How do I put my contact form in a popup for my WordPress site? This is a common trend on many sites where when a user clicks on the contact button or link, instead of going to a new page, the contact form opens in a popup. In this article, we will show you how to add a contact form popup in WordPress that will work for just about any contact form plugins. We will also show you how to only open the popup when a user clicks on link or button to ensure the best user experience.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
Getting Started
For this tutorial, you will need to install and activate two plugins:
First, you need OptinMonster with the Canvas Add-on. OptinMonster is the best WordPress popup and lead generation plugin.
Disclaimer: OptinMonster is created by WPBeginner’s founder, Syed Balkhi.
Next, you will need to have a contact form plugin such as Gravity Forms, Contact Form 7, Ninja Forms, etc.
For the sake of this article, we will be using our favorite contact form plugin: Gravity Forms
Let’s get on with creating a contact form popup in WordPress.
Step 1: Creating a WordPress Popup using OptinMonster
First thing we need to do is create a modal popup using OptinMonster.
You need to create a new optin by clicking on OptinMonster in WordPress admin menu, and then click on Create New Optin button.
On the Setup tab, you need to choose Canvas Popup as your optin type and then click on the Next Step button. If you don’t see Canvas, then it means that you don’t have that addon installed. Please install it using the addon screen.
Once you select Canvas, it will bring you to a configuration screen. You need to give this popup a title which will only be used internally and will help you identify this particular popup.
After that you can enter a value for optin loading delay. If you want the popup to load when user clicks a link or to load using exit intent, then leave the delay time to 0.
Optin cookie duration is set to 7 days by default. This means that once a user sees the canvas popup optin and decides to close it, then they will not see it for next 7 days. Because we’re going to use the click method, you should set the cookie duration to 0 as well.
Once you are satisfied with the configuration settings, click on Save and Design Optin button to proceed to next step.
On the design tab, first you need to click and choose your optin theme. At the time of writing this article, there is only one White Board theme available for the canvas popup. You need to select it and then click on the Design Customizer button.
The design customizer screen is divided in two panes. On your right, you will see a preview of your lightbox popup and on your left you will see sections like Dimensions, HTML, CSS, and Effects (effects will only appear if you have the effects addon installed).
By default, the dimensions for your canvas popup are set to 700 x 300px. You can change them to meet your needs.
You will notice that Canvas is blank by design. It’s done that way, so you can add just about anything you want while using the power of OptinMonster. You can add a signup form, facebook like box, surveys, coupon codes, or like we’re doing in this example a contact form.
Now that you have chosen your dimensions, let’s add our contact form inside it.
Start by clicking on the HTML tab to expand it. This is where you will paste the HTML code, or your shortcodes.
Here is a sample HTML we used to create the modal popup shown in the screenshot above.
1 |
<h3>Do You Have Any Questions?</h3> |
2 |
3 |
<p>Want to ask us more about our services? Simply fill out this form and we will answer quickly. Alternatively, you can also call us at 5555-5555.</p> |
4 |
5 |
[gravityform id="4" name="CanvasPopupForm" title="false" description="false"] |
Notice that we have embedded a Gravity Form shortcode in there as well. If you are using another contact form, then simply replace the shortcode with your contact form shortcode.
Once you have entered the required HTML, click on the CSS tab to add styling to your modal popup.
Each of your CSS rule is required to use the prefix given just above the CSS box.
Here is the CSS we used to create the modal popup shown in the screenshot above.
01 |
html div#om-lku3gv5wny-canvas #om-canvas-whiteboard-theme-optin-wrap { |
02 |
background:#fff; |
03 |
border:10px solid #F5F5F5; |
04 |
color:111; |
05 |
} |
06 |
html div#om-lku3gv5wny-canvas .gfield { |
07 |
list-style:none; |
08 |
} |
09 |
html div#om-lku3gv5wny-canvas input[type=text]{ |
10 |
width:420px; |
11 |
} |
12 |
html div#om-lku3gv5wny-canvas input[type=submit] { |
13 |
background:#ff6600; |
14 |
color:#FFFFFF; |
15 |
padding:5px; |
16 |
width:420px; |
17 |
margin-left:40px; |
18 |
} |
19 |
20 |
html div#om-lku3gv5wny-canvas textarea { |
21 |
height:80px; |
22 |
width:420px; |
23 |
} |
Depending on what you are adding in your popup, you can use Google Chrome’s Inspector tool to find out which CSS classes or elements you need to edit.
Once you are done editing the popup styling, click on the Save button on top of the customizer and hit close to exit.
You will be back at the design tab, so you need to click on the Manage Output Settings button to finalize your settings.
The output settings screen is where you configure the optin’s output option. All you need to do here is check Enable optin on site. We will cover how to open popup with a link in the next step.
If you want the popup to load automatically based on timer or exit-intent, then you can load optin globally or use other conditionals accordingly.
Save your settings when you are done.
Step 2: Open Contact Form Popup with a Link
Launching a popup with a link is really simple thanks to the MonsterLink functionality that OptinMonster has. Each popup has a unique ID to identify it. You can find your canvas popup’s unique slug by going to the optin screen and clicking on the gear icon next to the canvas popup you just created.
Now you will need to use this unique optin slug to create a link, like this:
1 |
<a href="#" class="manual-optin-trigger" data-optin-slug="lku3gv5wny-canvas">Click me!</a> |
You can use this link in your WordPress posts, pages, widgets, and even your templates. Clicking on the link will open your contact form in a popup window.
That’s all. We hope this article helped you boost your conversion rates by using a contact form popup in WordPress.
We use OptinMonster on WPBeginner, as it helped boost our email subscribers by 600%.
fahimfaysalkabir 