WP Popups

The most complete WordPress popup builder plugin

  • Features/Addons
  • Pricing
  • Support
  • Docs
  • Login
  • My Account
  • Logout
  • Get WP Popups Now
You are here: Home / Tutorials / How to Create a WordPress Contact Form Popup (Easy Guide)

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

July 3, 2020 by Colin Newcomer Leave a Comment

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:

WordPress Contact Form Popup example

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:

WPForms templates

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:

Embed WPForms

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:

WP Popups templates

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

WP Popups editor

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

Add WPForms embed

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:

WP Popups display rules

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

WP Popups triggers

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:

Add CSS class

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

Where to find WP Popups CSS class

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.

Filed Under: Tutorials

About Colin Newcomer

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Join our Newsletter

Get special offers and tutorials right in your inbox

Loading

Recent Posts

  • How to Create a WordPress Contact Form Popup (Easy Guide)
  • How to Create a WordPress Exit Popup (Easy Method)
  • How to Add a COVID-19 Notice to Your WordPress Website

Features

  • 30+ Display rules
  • 45+ Animations
  • A/B Testing
  • Analytics
  • Email Marketing
  • Zapier Addon
  • Multiple Triggers
  • Template Builder
  • Multiple Positions
  • Geolocation
  • Age Verification
  • Idle Logout
  • Leaving Notice
  • AJAX Login/Registration
  • Scheduler Addon

SITE

  • Blog
  • Docs
  • Pricing
  • Affiliates
  • Features
  • Contact
  • Terms & Conditions

Other Products

  • Timersys Plugins
  • GeotargetingWP
  • Facebook Login for WordPress
  • WooCommerce Map Delivery Area
  • WooCommerce Bogo Deals

Linsila LLC © 2025 · Built with Genesis

Before you leave, sign up to our newsletter to receive important updates from our blog and special pormotions!

×

BLACK FRIDAY! Enjoy an extra 25% (aprox) off discount using coupon code BF2024 on checkout

[contact-form-7 id=”fda370d” title=”Contact form 1″]

×