Are you wondering how you can integrate a nice looking contact form popup on your WordPress website? Well, in this video I explain a free way to this and the best part it’s pretty simple!
For this, you will need to install two different plugins. The first one is called, Contact Form 7. This plugin allows you to create a normal contact form page with pretty much any option you want. If you want more information about it then click here.
The second plugin is Popup Maker. This one lets you create nice looking popup windows in your website with any type of information you want. It doesn’t exactly need to be a contact form. Other people use the same plugin to make an email opt-in popup window, which is highly effective at grabbing new subscribers and building your list.
If you’re interested in learning more about this Popup Maker then check their official WordPress page here.
Step 1) Installing Both Plugins
You must first install both plugins before you continue. For this, simply login to your site’s WordPress dashboard area. Under the plugins section click on, “Add New” . In the small search box write, “contact form 7”.
Afterward, press the install now button and activate on the next page. Once you have Contact form 7 installed, you must now follow the same process to install Popup Maker.
Step 2) Setup Contact Form 7
You should have two new sections appearing on the sidebar of your dashboard. You want to click on the one belonging to contact form 7. In the next page, you’ll see that you already have a form, which comes with the installation of this plugin.
You want to press the edit button so you are able to configure it. This form has the most trivial fields and possibly the only ones you need. However, you can still add new fields, such as:
- Ask someone’s phone number
- Ask someone’s URL
- Add radio buttons
In the Mail section, you can configure the message sent to your email inbox. Lastly, on Messages you’re able to edit the message present to your visitors during different conditions. In this video, I don’t go much in detail with Contact Form 7. But if you would like to know more then check my previews video where I explain it step-by-step, watch it here.
Also make sure you grab the short code belonging to your form, which should look something similar to this:
contact-form-7 id=”47″ title=”Contact form 1″
And copy and paste it to a blank notepad.
Step 3 ) Setup Popup Maker
The first thing I like to do is simply design a nice looking layout for my popup window. Under, “Popup Maker” section, click on All themes.
Just press the add new button so you can configure the popup window’s layout. In this page, you are able to change the background color, font family and size, and much more by utilizing the different options available.
They’re pretty straightforward and easy to setup so I won’t go much in detail here. When you have everything configured to your taste, now just head over to the Add New section appearing right below Popup Maker.
You need to create a new popup window. The first thing you want to add is a title, and targeting condition. This last past is where you want your contact form window popping up in your website. You have plenty of options from appearing on your front page, specific posts and pages, and much more.
Now on the text editing box, you want to paste the contact form short code. Also make sure you have the text tab option selected, so you’re able to paste coding.
Afterward, all you need to do is configure several options until you have what you want. An options you might want to pay attention is the cookie section. If you want to constantly spam your visitors over and over with the same contact form window. Then just set the amount of time, they’ll keep a cookie on their computer blocking that window from appearing.
This can range from one day to several months. Once you have all the options tweaked then just go to the page on your website, which your popup window should open up and see if everything is working well.
You also have other ways of implementing your contact form popup windows. For instance, you can use a link, or button, which you may insert on your site’s widget section or throughout your content.
If you want to this then check the help section under Popup Maker.
Just copy and paste the HTML coding either for a link or button to a your notepad. Afterward, all popups and grab the class line, which looks similar to: popmake-56
And overwrite into of the one you can see on the coding line. You must do this so once someone clicks on the link or button, they’re able to see the correct popup window.
Lastly, you can include this link or button coding inside of one of your posts or in the widget section of your website.
If you have any question related to this post please leave it in the comment section right below. Please subscribe to my channel so you can receive weekly video updates where I talk about WordPress, SEO, making money online and much more here.