LinqSEO

  • Home
  • Services
  • Blog
  • About
  • Contact
how to make a popup form

Creating a Popup in WordPress using Popup Maker and Contact Form 7 Plugins

May 11, 2018 by JT Leave a Comment

Nowadays, the majority of blogs utilize a popup form. Although they may annoy a small percentage of your site’s visitors, most web users have come to expect a pop-up. They key is to create a well-designed pop-up that can also be easily closed by your site’s visitors. A pop-up is fine, but one that is a little too intrusive is a good way to deter return visitors.  In this article, I explain how to create pop-up forms using two plugins Popup Maker and Contact Form 7. In case you don’t know, Contact Form 7 is considered to be the best contact form WordPress plugin available and is one of my personal favorites. Better yet, it is fairly easy to transform a Contact Form 7 form into a popup with another great plugin called Popup Maker. In a nutshell, all you need to do is copy and paste the shortcode of a form created in Contact Form 7 into a new popup configured in Popup Maker. Then implement the proper configurations and necessary styling. Well, there is a little bit more to it than that. Below is a step by step tutorial on how to create such a form.

1. Log into the WordPress Dashboard. You should see Popup Maker and Contact (Contact form 7) on the left-hand sidebar. Click on ‘Contact’ and create a new contact form.

make a popup in wordpress

2. Click on ‘Add New’ to create a new form in Contact Form 7.

make a pop up in wordpress

3. You may edit an existing form by hovering over the form and choosing ‘edit’.

make a popup ion wordpress

4.When you create a new form, the default form will display like below. However, you can build any type of form in the text editor in html.

make a popup in wordpress

5. Below is an example of a form that was created using custom html.

make a pop-up

6. When creating the form, make sure to configure the settings. You can also set the form to automatically close with a delay after the form has been submitted.

make a popup form

7. After creating a form, copy the ‘short code’ of the form. This will be copy and pasted in the popup form created in Popup Maker.

make a popup form

8. Next, configure a new form in Popup Maker. Create a new popup or edit an existing one.

make a popup form in wordpress

9. Open the Popup Form. Copy and paste the ‘short code’ of the contact form first created in Contact Form 7 into the Popup Form text or visual editor. You can also add additionally headings and text here.

make a popup on wordpress

10.In order for the form to show up, it must be targeted to a specific page or a type of page or post. You can also set to display under certain tags and categories. See below.

make a popup in wordpress

11. In addition to targeting a specific page or pages for the pop-up to display, you must also set a ‘Trigger’.See below.

popup form wordpresss

12. You can use ‘display’ to adjust the size, animation and position of the form.

make a popup form in wordpress

13. In addition, the Pop-Up maker offers several options to add styles to the form. To do so, go into ‘Themes’ in the Pop-Up Maker plugin. Edit the theme that is being used for your popup. You can create and edit a new theme or edit an existing one.

make a popup in wordpress

14.Once you open a theme, there are several options for styling the form.

make a popup form

*15. The popup form can also be styled and created using custom html and CSS. The WYSIWYG options are convenient, but often limited. Any form can be created in html and CSS from a mockup design.

make a popup form

16. At any time, you can preview your form.

make a popup form

My favorite part of using these two plugins is that you can create an unlimited number of designs and layouts. Contact Form 7 also makes is easy to send your data MailChimp and virtually any CRM on the market.

 

Filed Under: WordPress Development Tagged With: popup form, wordpress popup

Start a Discussion

Recent Posts

  • Creating a Popup in WordPress using Popup Maker and Contact Form 7 Plugins
  • How to Install Python on Windows 10
  • Locally Setup and Install WordPress On Windows Using WAMP
  • The SEO Guide for 2018; Content is King!
  • How to Use JQuery in WordPress
  • How to Create a Custom Homepage Template in a Genesis Theme
  • How to Add Google Analytics to WordPress Site Without a Plugin
  • How to Make a Custom Page Template in WordPress

Subscribe to our newsletter

Stay updated on the latest posts

Your email is safe with us

Liquid Web Dedicated Servers

Sacramento, California

916-767-9658

© 2021 · LINQ SEO