Contact form 7 in popup window – WordPress Tutorial

Home » Old posts » Contact form 7 in popup window – WordPress Tutorial

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.

[quote]Hey i am not that good with jQuery. Is there an easy way to put my contact form in a popup window? [/quote]

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

Contact form 7

You can download it here: Contact Form 7 Download

Its been downloaded more than 16.000.000 times to this date. If you however prefer some other plugin for your forms, that will work as well.

Second plugin that we need is called ” Easy fancy box “


easy fancy box

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

[shortcode] that you can insert inside your page or widget. That is all we need.

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 class="fancybox" href="#contact_form_pop">Contact Us</a>
<div class="fancybox-hidden" style="display: none;">

<div id="contact_form_pop">[your own shortcode here]</div>


</div>

this is what you will get :

Contact Us

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.

Nikola fivera Petrovic
Get in Touch

Nikola fivera Petrovic

Hi there. My name is Nikola,
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.

Web Design Skills

I have been into web design for the last 10+ years.
After working for various agencies and companies I have decided to take a lone wolf path as a Freelancer but I still actively collaborate with agencies across the globe.
I enjoy building websites on WordPress platform but i can work on any other platforms as well.

SEO Skills

I have spent a last couple of years as an SEO executive and SEO consultant working on 4 continents.
Specialized in on-page SEO I wear a pointy Google-Wizard White-Hat and help various small and medium-sized businesses rank well in the search engines.
I enjoy working with Google and Yahoo SE.
Feel free to request a free meeting bellow.
As a freelancer, I charge only a small portion of the money you would pay to agencies to get your project done.
Nikola fivera Petrovic
Get in Touch
2017-04-16T04:13:48+00:00

82
Leave a Reply

avatar
70 Comment threads
12 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
75 Comment authors
rajeshkumar samaniimranNandalalDanSam Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Patrick Craig
Guest
Patrick Craig

How do I put this code inside a button? I’m using Avada theme.

sanjay
Guest
sanjay

Thanks, Solve the problem

Christian
Guest
Christian

Nice bit of code, but is there a way to make it work as a menu link? At the moment you have to click on a link to go to the page that contains the code, then click again.

nmonnier
Guest
nmonnier

Hi my pop up only shows the CF7 shortcode instead of the whole form. Does someone have a solution please?

David
Guest
David

Are you implementing the shortcode in a template file or in the backend?

if template use

Nandalal
Guest
Nandalal

I used the short code inside the image description area of “RD Hover Effects” plugin ….. but it never works …. can u pls help

Navnath
Guest
Navnath

The first time I used this it worked. I used contact form 7. However my form displayed in the popup but did not send and threw a red box error. I see here that someone used fast secure contact form. So I installed that. It works outside of your code, but inside I get this message, “The requested content cannot be loaded. Please try again later.” I have tried deactivating possible plugin conflicts, but no… Read more »

gowri
Guest
gowri

I am trying to 3 contact form put this link in the form of button, in the bar that appear from the bottom… After I click on the link, I get popup, but instead of the actual form I can only see the 1st contact form

Aminul
Guest
Aminul

Hi, I have found the solution. Actually, I wanted to used contact form 7 popup with button of Revolution slider in Avada theme. Here are my codes and it is working nicely now. Thanks and skip my previous message. [button link=”#contact_form_pop” color=”default” size=”large” type=”” shape=”” target=”_self” title=”” gradient_colors=”|” gradient_hover_colors=”|” accent_color=”” accent_hover_color=”” bevel_color=”” border_width=”1px” icon=”” icon_position=”left” icon_divider=”no” modal=”” animation_type=”0″ animation_direction=”left” animation_speed=”1″ alignment=”” class=”fancybox-inline” id=””]SEND FREE ROYAL BUNA NOW![/button] [contact-form-7 id=”11818″ title=”Contact form 2″]

Samuel
Guest
Samuel

Hello Aminul. Where do you place the code?? In the button link? or do u create a page for it? Can you explain a bit further? Thanks.

Amanita
Guest
Amanita

P.S. Found it!

–> in Easy-fancybox-settings, you have to read the passage “inline content”. –> The the code the link has to have the class=”fancybox-inline”. Then (in my case) the popup opens fine.

so this in total is what I’ve put as code for the popup to appear:

Contact Us

[contact-form-7 and so on the shortcode]

Chris
Guest
Chris

Hi Amanita – thanks for the discovery but I don’t understand the instructions, if you see this please can you give the code you used to make it work?

The instructions: To make inline content open in an overlay, wrap that content in a div with a unique ID, create a link with target “#uniqueID” and give it a class “fancybox-inline” attribute.

Amanita
Guest
Amanita

Hi, I have the same problem as someone else in here: my popup shows an error message, saying “The requested content cannot be loaded.
Please try again later.” I have ticked the “inline content”-box in the fancy-box-settings and don’t really know how to go on with builing my contactForm7 into a popup. Anyone any solution? Thanks a lot!

cpugeek75
Guest
cpugeek75

For those that can’t get the popup to work, I had to go into the Fancy box settings and check the Inline Content box.