How to Create a WordPress Contact Form Popup (Easy Guide)

Looking for an easy, non-technical way to create a WordPress contact form popup?

In this post, we’ll show you step-by-step how to create your own contact form popup on WordPress using free plugins and without writing a single line of code.

You’ll be able to automatically display your contact form popup after a certain time or when a user scrolls down the page. Or, you can also wait until a visitor clicks a button, which lets you create a neat effect where you open your contact form in a popup after a visitor clicks a button.

Here’s an example of what you’ll be able to build by following this tutorial:

You can, of course, customize your popup and form to match your needs.

Ready to get started? Let’s dig in…

What You Need to Create a WordPress Contact Form Popup

To create a contact form popup, you’ll need two things:

1. A popup plugin
2. A form plugin

To create your popup, you can use the free WP Popups plugin. WP Popups lets you create and style your popup using a visual interface. You’ll also be able to use different targeting and trigger rules to control where and when your popup appears.

WP Popups also lets you include shortcodes from other plugins in your popup, which means that you can embed a contact form from any one of the many popular WordPress form plugins.

For this tutorial, we recommend WPForms because it’s free and it includes all of the features you need in an easy-to-use interface. Its interface is also very similar to WP Popups, which will make it easier to use both plugins.

However, if you already have a favorite form plugin, you can feel free to use that too. The steps will be exactly the same – you just need to swap in your form plugin instead.

How to Create a WordPress Contact Form Popup: Step-By-Step

Now, let’s get into the tutorial and we’ll show you how to set this up. Here’s the high-level process:

1. Create your contact form
2. Create a popup
3. Choose where/when to display your popup

1. Create Your Contact Form

To create your contact form, install and activate the free WPForms plugin from WordPress.org.

Then, go to WPForms → Add New to create your form. You can then choose the Simple Contact Form template:

If you want to add or remove any form fields, you can do that now.

Once you’re happy with your contact form, save your changes and click the Embed button to display the form’s shortcode:

Keep this shortcode accessible because you’ll need it in the next step.

2. Create Your Popup

To create your popup, install and activate the free WP Popups plugin from WordPress.org.

Then, go to WP Popups → Add New to create your popup. Just as with WPForms, you’ll see an option to either start from a blank template or use one of the existing templates. You can choose whichever fits your needs:

You’ll then see a visual preview of your popup, along with a settings area on the left:

To add your contact form, erase the content in the text editor and paste in the shortcode from WPForms:

For now, you’ll still see the shortcode in the live preview. But on the front-end of your site, you’ll see the full contact form.

If you want to adjust the style and design of your popup, you can go to the Appearance tab.

???? Learn how to adjust popup styling

???? Learn how to change popup position

3. Choose Where/When to Trigger Your Popup

To control where your WordPress contact form popup appears, you’ll need to make two choices:

• What content should it appear on? Should it only appear on your homepage? On your contact page? Anywhere on your site?
• When should it appear? Should it appear automatically? After a certain amount of time? Or should it only appear when visitors click on a button or link?

To answer the first question, go to the Display Rules tab.

This lets you control what content your contact form popup can display on. By default, it will be set to All Pages (sitewide). However, you can use the drop-down to target specific pages if needed:

???? Learn how to use WP Popups display rules

To control when your contact form appears, go to the Settings tab and choose Triggers.

To automatically trigger your contact form, you can use options such as:

• Seconds after page load – your contact form will automatically display after X seconds.
• & of page height – your contact form will display when a user scrolls X% down the page. For example, you could trigger it when they reach the bottom of your sales page.

If you want to trigger your form when a user clicks a link or button, choose the Class Triggering option.

If you used an automatic trigger, you’re finished! Your contact form will start displaying according to your settings.

If you want to trigger your popup with a button, you’ll need to perform one more step.

Create Your Contact Form Trigger Button

To create your trigger button, open the post or page where you want to add a button.

Then, add a new Buttons block and enter your CTA.

Then, in the button’s settings in the sidebar, scroll down to the Advanced section and add your popup ID as an Additional CSS Class:

You can find your popup ID by going to WP Popups → All Popups and copying the value from the Trigger class column:

And that’s it! Your popup contact form will appear when anyone clicks on the button.

Create Your WordPress Popup Contact Form Today

With WP Popups and any form plugin, it’s easy to create a popup contact form for your WordPress website.

With just the free version of WP Popups, you can already create a fully-functioning popup contact form.

But with the full version of WP Popups, you can unlock even more options for your contact form, as well as the ability to create email opt-in popups and more. You’ll be able to:

• Access more trigger rules, including exit intent
• Access more display rules, like only displaying your contact form to visitors from certain geolocations
• View detailed analytics to see how often people use your contact form
• Place your popup contact form in more positions

To unlock these and other features, purchase WP Popups today.