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.
2. Click on ‘Add New’ to create a new form in Contact Form 7.
3. You may edit an existing form by hovering over the form and choosing ‘edit’.
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.
5. Below is an example of a form that was created using custom html.
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.
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.
8. Next, configure a new form in Popup Maker. Create a new popup or edit an existing one.
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.
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.
11. In addition to targeting a specific page or pages for the pop-up to display, you must also set a ‘Trigger’.See below.
12. You can use ‘display’ to adjust the size, animation and position of the form.
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.
14.Once you open a theme, there are several options for styling the 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.
16. At any time, you can preview your 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.