Few months back I was searching for a free popup plugin for my blog to show a mail subscription form as a popup on my blog. But I wasn’t able to find any free plugins that allows me to do that. Instead I found a way to create free popup form in wordpress with help of two free plugins.
I’ll show you how to create a free popup contact form in wordpress using two different plugins. First plugin that I am using is popup maker and second is Contact Form 7.
You can try any other contact form plugins that you like or feel comfortable working with. You can show different things in popup like ad, video, image, text etc.
How to add contact form popup in wordpress?
Once you are done installing both plugins, create a form with all the fields that you want to have in your popup form. For this tutorial I am only adding one single field in form and that’s E-mail address.
I am creating this popup for collecting emails so I only need mail address field here. You can add more fields according to your requirements.
Setup your form completely before saving it. Make sure you add correct email address where you wish to receive all mail submissions or details submitted by user.
After saving it you will get a shortcode, copy that code and move to next step.
How to create a popup in wordpress?
Now in next step, go to popup maker plugin and create a new popup. Name your popup and paste form shortcode in given text field. You can add more text, images or videos to your popup if you want.
Check image above for reference, I have added text and image to popup so that it looks good.
Popup setting is next step; here you can control how your popup will look. There are 4 settings tabs Triggers, Targeting, Display and Close.
Triggers: Under this tab you can define how you want to trigger your popup, Click open or auto open. With click open option, popup will open when user clicks on text or image which you have popup linked to. And with auto open option, you have to set a time limit for popup so that popup can automatically open on your website when someone visits your website.
Targeting: This allows you to show popup on specific pages or posts of your website. You can select specific pages, posts or categories where you want popup to show. By default popup will show on all pages and posts. And from targeting setting tab, you can also disable popup to show on mobiles and table devices if you want.
Display: Display section allow you to control the layout of your popup design like you can choose popup themes, animation, size, position etc.
Close: Like name suggest, it allow you to control closing options of popup. You can show text or button to close popup. There are alternative methods as well that you can enable for closing popup like pressing ESC, F4 and click overlay options are there.
These are all setting options you get. Now save your popup.
If you have set trigger option as auto open then your popup form will start showing on site. But if you have set it as click open then you have to link it to a button, text or image from where popup will open.
To link popup use css
classes id of your popup (
“popmake-4623” css classes id looks
Text link example <a href=”#popmake-4623”>Click Here to Open Popup</a>
Once done you should be able to see and submit details from popup form.
It’s best to test popup completely after adding it on site.
Still Not Sure?
Watch video below. All same steps are done in video as well.
Hope you have created a free popup contact form for your blog or website and its working but if it isn’t or you facing problems let me know through comments below, I’ll try my best to help you out.
Also if you have any suggestions regarding this blog please do let me know – firstname.lastname@example.org