how-to-easily-create-a-wordpress-popup-form_g

How to Easily Create a WordPress Popup Form (Step by Step)

Do you want to add a contact form to a popup on your WordPress site?

By using a WordPress popup form, you can get way more leads and customers by making it even easier to contact you online. So in this article, we’ll show you how to easily create a WordPress popup form for your website.

Why Use a WordPress Popup Form?

It’s a smart idea for small business owners to put contact forms not just on your Contact Us page, but in a WordPress popup as well. That’s because you can give your readers a quick way to reach you without navigating away from the page that they’re on.

Plus, you can also use a WordPress popup form for:

  • Feedback — Gather feedback by asking for comments or even creating a survey.
  • Contact Info — Get more details about your readers by getting their contact and personal information.
  • Subscription — Build your email newsletter list by making it easy to subscribe with the click of a link.

So now that you know why you want to use a WordPress popup form, let’s jump into exactly how to make one!

How to Create a WordPress Popup Form

If you’re asking yourself how do I create a pop up form in WordPress, we’ve got you covered. Check out this step by step guide on how to create a WordPress popup form.

WPForms is the best WordPress Form Builder plugin. Get it for free!

Step 1: Install the Needed WordPress Plugins

To get started, you’ll need to install and activate 2 plugins.

First, you’ll need Popup Maker. Wondering is popup maker free? Yes, you can use the free version for this tutorial and with WPForms.

Click on the blue download button and check out how to install a plugin in WordPress.

popup maker

Next, you’ll also need the WPForms plugin. Here’s an easy guide on how to install the WPForms plugin.

Step 2: Create a Simple Contact Form

Next, you’ll want to create the form that you want to put into your WordPress popup form. If you’ve already created a contact form, you can skip this step.

To create your form, go to WPForms » Add New and select a template. For this example, we’ll use a simple contact form. It’s a good idea to keep things simple with WordPress popup forms, so you can maximize your form conversion rates.

select a contact form template

Once the form loads, it will have everything you need to get started including:

  • First Name
  • Last Name
  • Email
  • Comment

You can drag and drop any additional fields you want from the left side to the preview window. You can also remove a field by clicking on it and selecting the red trash icon that appears on the right.

how to delete a form field

Once you’re done with creating your form, you need to click on the save button to store your changes. Your contact form is now ready to go!

And now that we have a form ready, let’s move on to the next step and create a popup in WordPress.

Step 3: Create a Popup in Popup Maker

Great, your plugins are installed and activated. Next, we’ll go into the Popup Maker plugin to create your popup. This free WordPress plugin lets you make popups from scratch, easily.

Head to your WordPress dashboard and go to Popup Maker » Add Popup, and you’ll see the popup editing screen appear.

add a new popup in popup maker

On this screen, you’ll want to enter a name for your popup. Plus, you can also enter a optional display title like we did in this example. Your visitors will be able to see this optional display title.

name your popup form

And now it’s time to insert your form into your popup. Click on the Add Form button to select your form.

add form

An Insert Form screen will appear. Here, you can pick the form you want to insert into this popup by selecting it from the dropdown menu.

select form

Once the form is selected, click on the blue Add Form button to add it to your popup.

add contact form to wordpress popup

You’ll see a unique shortcode appear which tells that popup which form to use.

wpforms shortcode for form in wordpress popup form

Great job. Let’s customize a few of the popup settings by scrolling down and starting with Triggers.

Triggers tell your popup when to open. Click on the blue Add New Trigger button.

add new trigger to wordpress popup form

On the trigger option window that appears, open the dropdown and select Time Delay/Auto Open. This will trigger the popup to open after your website visitors have been on the page for a set amount of time.

You can set the time for anything you’d like, but we suggest starting with 5 seconds (5,000 milliseconds). When you’re ready, click the Add button to continue.

save popup time delay settings

By default, this popup will show on every page of your WordPress website and to everyone on all devices. You can adjust these settings to target specific people, devices, places (like a post or page), and more under Targeting. In fact, for more advanced settings, check out the Popup Maker documentation.

Next, let’s spruce up the look of your popup by clicking on Display under the popup settings.

change wordpress popup form display settings

From the Popup Theme dropdown, select a theme for your popup.

You can choose whichever Popup Theme you like. For this example, we’re picking the popular Light Box style.

wordpress popup form theme dropdown

Now, adjust any other settings you’d like and when you’re ready, let’s go ahead and publish your form.

Scroll up on the page to the top and click on the Publish button to make your WordPress popup form live.

publish wordpress popup form

And there you have it! You can now preview your WordPress popup form to make sure it looks exactly like you want it to, and adjust the settings accordingly.

popup maker example when finished in lightbox

To make more contact form popups, you can repeat this process and customize the settings and display rules to appear on different posts or pages, etc. Or you can get creative and make a popup WordPress survey.

Head back to the edit page to keep an eye on the Analytics if you want to know how many people have viewed your WordPress popup form.

how to view how many people have viewed your wordpress popup form

Also, if you’ve set up Google Analytics on your website, you can track Popup Maker through custom event tracking.

And don’t forget, you can set up your WordPress popup form to connect directly with your email marketing service to make it even easier to organize and automatically reach out to your new contacts.

In Conclusion

Alright, you’re all set. We hope this article helped you to learn how to create a WordPress 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 even more leads.

And if you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. Thanks for this post! It showed me exactly what I was looking for 🙂

    Best regards
    Marcus at Illeris
    [link removed]

      1. Hi.. can we change the color of the submit button? And, after press submit, how do we reply with a popup Thank You message? Thanks

      2. Hey Des – We’d be happy to help! When you get a chance, please drop us a line in support so we can assist. If you have a WPForms license, you have access to our email support, so please submit a support ticket. Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.

        Thanks 🙂

  2. Hello, I have a question. I can’t figure out how to make the popup appear when someone is pressing a button. For example i I put a “More info” button and I want a contact form to popup. How do I do that ?

    Regards

  3. Is the popup form impacted by Chrome’s Default Popup Blockers? we’ve noticed recently ALL of the browsers have adopted this standard.

    1. Hi Peter – Great question! I checked with our developers for insight on this, and it sounds like Chrome’s blocker is mainly intended for popups that open in new tabs/windows. Fortunately, our team hasn’t seen this impact the types of popups that plugins like Popup Maker create.

      That being said, it’s always a good idea to test things out! In case it helps, we have a form testing checklist here that should help guide on what to look for (in addition to just making sure your popup appears as intended).

      I hope this helps 🙂

  4. Hello. I wanted to add the popup I just created with this article when a person wants to leave a specific page of my website but don´t see the option. Can you help me?

    1. Hi Kevin!
      I would recommend contacting the Popup Maker plugin support team and check with them if they have this functionality with their plugin.
      I hope this helps.
      Have a good one 🙂

  5. Popup Maker is blacklisted by many DNS-based advertising filters. It will not work on any LAN with even the most cursory advertising protection. For example, AdGuard lists it as a known bad-actor in the main DNS blacklist. I cannot even open the popupmaker.com homepage from my home or office.

    1. Hi Zane!
      We are not aware of the third-party plugins functionality and any restrictions that other services/companies put on them. This question is better to forward to the Popup Maker support team.
      I believe the services like AdGuard actually blocks out any popups rather than some certain popup plugins.
      I apologize for any confusion!
      Have a good one 🙂

  6. Hello,
    Thank you for this guide, it was super helpful. However, now that I have my subscriber popup form set up…I’m unsure of where to find my list of email addresses. The subscriber field under the Popup Maker plugin is empty. Also, now that I have my list of email addresses, where do I go to send them customized newsletters all at once?
    Thank you!

    1. Hi Madison!
      When somebody submits the form on your site you should have the data saved under WPForms > Entries (if you are using our paid WPForms plugin). Also, you use our MailChimp addon (or other Email Marketing addons) with our Plus license level or higher.
      This way you can pass the contacts from your form to MailChimp and create your email campaign with all the customized and automated emails there.
      I hope this helps.
      Have a good one 🙂

  7. Hi, the popup I’ve created looks good but it comes up on every page – even the page the popup form leads you to!

    How do I set the popup to just come up once for each user?

    1. Hey Richard – You can change the targeting settings for pop up to show it on your required pages. They also have some other options like, setting up cookies and some other relevant triggers in their paid version. Here is the documentation you can refer to. You can also contact their support for more features like this.

      I hope this helps!

  8. Hi there! I am making a pop-up and all is going well except for one thing – the sizing. I tried every way possible with adjusting the padding, but there is just too much blank space from each side of the text. It takes up too much space. And when I choose a smaller size, it is squeezed super ugly but the padding still takes up too much space. I’d like the text to use up the whole space of the box, from top to bottom and each side. Can you please assist?

    1. He Juhi – I am sorry for any confusion. WPForms is a WordPress plugin and you don’t beed any HTML/CSS for this, just adding the form shortcode on your site is fine. Here is a great article to get you started.

      I hope this helps!

    1. Hey Kristie – I apologize, but I’m not sure I understand your question. When you get a chance, could you please share more details, or possibly an example of what you’re looking to do? I would be able to assist better with some more info.

      Thanks 🙂

  9. I want to add a currency converter widget code on a popup in wordpress, I used popup maker, and a widget code, but popup is showing nothing, though when I used widget on sidebar then its showing there. Please help me to sort it out. Thanks

    1. Hey Joseph – Sorry for the trouble you are facing. It might be some conflict with that currency widget plugin and pop up maker plugin. I would suggest contacting their support for more info on this. I am not sure which currency plugin you are using, but here is pop up maker support option, you can create a ticket there.

      I hope this helps!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.