Contact form 7 in popup window – WordPress Tutorial
In this short tutorial i will explain how you can have your WordPress contact form 7 show in a popup window.
Almost every website has some sort of call to action button or contact form. Having cool contact forms is always more productive and eye-catching. Placing your contact form in a right position is sometimes crucial for generating leads.
But what happens if you don’t have enough space to show your cool form? Is it worth it having it only on the “contact page” ? The answer is NO.
You should have your call to action as eye-poking as you can. If you have trouble finding a perfect spot for that unique and fancy form of yours, than putting it in popup window is a great solution.
notice * >>> It will work even if your form is not unique and fancy.
Yes there is and ill be happy to share it with you, in return all you have to do is become a member of my religious chicken cult and give me all of your possessions ! I am not joking !!! read on.. 🙂
For the purpose of this tutorial we will need two wordpress plugins.
One of the favorite plugins for creating those cool forms in WordPress is ” Contact form 7 ”
You can download it here: Contact Form 7 Download
You can download it here: Easy Fancy Box
This one will take care of our jQuery problem.
Now lets put that form in that popup !
Once you have both of them plugins installed and activated, go on and create your form the usual way. Every plugin out there gives you some sort of
Once you have your form created you should have a shortcode that looks something like this
[contact-form-7 id="2860" title="Contact form 1"]
Now you should wrap it up in the code below :
<a href="#contact_form_pop" class="fancybox">Contact Us</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [your own shortcode here]</div> </div>
this is what you will get :
and that’s it, this will show a text link that will open up your contact form on click as a popup window, replace the shortcode and the text of the link to suit your needs.
Contact form in popup windows – Solved
If you liked this article say thanks by sharing it around, that makes me happy. Cheers.
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.
As a freelancer, I charge only a small portion of the money you would pay to agencies to create your website. Affordable web design doesn’t mean that it will lack any of the advanced features of today’s web technology. We just cut out the cost of the middle man.
Feel free to request a free quote using the form on the right or the one bellow.
Latest posts by Nikola Petrovic (see all)
- The best way to add custom functions to wordpress - 9. December 2016.
- Four Important steps in my web design - 12. September 2015.
- Paper Text Area Created with CSS only – Editable Example - 9. July 2015.