Do you want to pop up your contact form when a user clicks on the contact button or link?

The advantage is that every time a user clicks on the contact button or a link, instead of going to a new page, the contact form opens in the form of a popup, which would increase form submissions. In this article, we’ll show you how to create a contact form popup in your WordPress site without affecting your user experience in a step-by-step manner.

Creating a Contact Form Popup Easily in WordPress

With WordPress, creating a contact form popup is easy. To get started, you just need to have 2 things:

1. a powerful popup plugin
2. a robust form builder plugin

To achieve the best results we recommend you using WPForms for creating your contact form. It’s a powerful form builder plugin that lets you build almost any kind of form in less than 5 minutes. Read more about WPForms here.

When it comes to popup plugins, we think there’s no other option that’s better than OptionMonster. It’s one of the most popular and powerful lead generation plugins that lets you catch your visitor’s attention and encourage them to take action on your site with the use of stunning optins. Through this plugin, you can increase user engagement and boost your conversions and sales.

To know more about OptinMonster read our detailed OptinMonster review.

Step 1: Install the WPForms and OptinMonster Plugins

Start by downloading the WPForms plugin. Then, install and activate it. Not sure how? No problem. You can hop over to our guide on how to install a WordPress plugin to get that all sorted out. We’ll wait.

All set? Perfect.

Follow the same process to activate the OptinMonster plugin. But it’s not sufficient to install only the plugin. You’ll have to create an account with the OptinMonster app too. The plugin only acts as a medium to connect your WordPress site with the OptinMonster app. So to make it work properly you have to install the plugin and create an account with the app as well.

Step 2: Create a Contact Form Using WPForms for the Popup

We’ll first use the WPForms plugin to create a contact form. But if you have been using WPForms and have already created a contact form with it, then you can skip this step.

If you don’t have a contact form, go to your dashboard and click on WPForms » Add New.

This will take you to another page where you can select a form template and add a name to your form. Select the Simple contact form template and give a name to your form.

Upon completing the process, the form builder will be launched which makes it easy to design your forms. You can easily add or remove files using the drag and drop builder.

You can add all the fields that you think are necessary for your form. Once everything is done, hit the save button to save your changes. Your contact form is now ready to go live.

Now hit the Embed tab next to the save button and copy the shortcode.

Step 3: Creating a WordPress Popup Using OptinMonster

The next step is to create a popup on your website. We’ll create a modal popup using OptinMonster. So go to your WordPress dashboard and click on OptinMonster » Create New Campaign.

This will open a new screen where you can select the campaign type followed by the template of your optin. For the campaign type, we’ll select the popup option.

For the template, let’s go for Canvas. This is a blank canvas that supports all forms of shortcodes. So you can insert any HTML, CSS, JavaScript, and even WordPress shortcodes here.

Once you select the template, you’ll be directed to a new screen where you can name your campaign.

Next click on the Start building tab. You’ll now be directed to the drag and drop builder. You’ll notice that the canvas is blank in terms of design. You can create any popup using this canvas and design them from scratch. You can do that using the options under the Design tab.

Once done, click on the Add Blocks tab under the Design tab. Scroll down to find the Element blocks options. Under this, you’ll see an HTML block. Drag and drop it on the designing area.

Here you can enter a contact form shortcode along with any other custom HTML you may want to add. So let’s add our shortcode which is as following:

<h3>Do you have any questions?</h3>
<p class="tagline">Want to ask more about our service?Simply fill out the form and we'll get back to you as soon as possible.

Here’s a preview of how you can do it.

Notice that the shortcode of the form that we created earlier has been embedded in the code as well. You can replace this shortcode with yours. Now save your changes. After that, go to the Display rules tab and set the timing to zero as shown in the screenshot.

Scroll further down this screen and you’ll find more options. You can use them if you want to display this form on a specific page or post. Hit the Save button when done.

Step 4: Publishing Your Popup Form

Once you’re done working on the changes, click on the YES/No option on the top and click on the activate tab.

Finally, go to the Publish tab and toggle the status to live.

Once done return to your WordPress dashboard and go to OptinMonster » Campaigns. Here, you’ll see your campaign. Below that click on the Edit output settings link. It will expand to display a few options. Check the box next to Enable the campaign on site option.

Finally click on the Save settings option at the end of the page.

Step 5: Adding a Link to Trigger the Contact form Popup

First copy the OptinMonster campaign slug. You can find it right next to your campaign name.

Now create a new page in WordPress or edit a post or page where you want to add the contact form popup link or button. We’ll create a new one here. Go to your text editor and add the following code. Don’t forget to replace the slug with your own slug.

<a href="#" class="manual-optin-trigger" data-optin-slug="your slug goes here">Contact us</a>

Once done hit the Publish button on your right. Your form is now in action. Visit your site from the front-end and you’ll see it.

We hope you found this article helpful. If you want to know more about creating a contact form with WPForms here’s a detailed guide.

The post How to Create a Contact Form Popup in WordPress – Step by Step appeared first on IsItWP – WordPress Technology Lookup Tool.

What’s My SEO Score?

Enter the URL of any landing page or blog article and see how optimized it is for one keyword or phrase.

• Author
• Recent Posts