Easy FancyBox & Contact Form 7

Your form is popping up as it should..

I totally forgot that I posted on here as well. I went to CSS-Tricks for more immediate help. Basically, what was wrong is that the HTML code the tutorial gives for the pop-up is incorrect with the current version of Contact Form 7.

This is the code that the tutorial gives:

<a href="#contact_form_pop" class="fancybox">Contact Us</a>

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        [contact-form 1 "Contact form 1"]
    </div>
</div>

Now, if I go to the shortcode given by the current incarnation of Contact Form 7, it looks like this: [contact-form-7 id="87" title="Contact form 1"]. So, basically, I had to modify the HTML to reflect the way it was calling the shortcode. I am sure other people have had this issue as well.

But yeah, everything works fine now. Now, to style it!

Hey mintertweed, thanks for pointing that out. I’ll put this in the FAQ’s ??

Did you notify the author of https://geektastical.com/2011/05/how-to-create-a-pop-up-wordpress-email-contact-form/ to update his tutorial too?

By the way, if you still have styling issues: this is probably because when you have a normal visible form inside your post content, certain form rules that are defined inside your themes style.css are applied to make it look good with your theme. But as soon as the form is moved as inline content to a FancyBox frame, these style rules no longer apply because the content has been moved outside the post content div. You need to find out to which div class these style rules are limited and then give the inline div that same class.

For example:
<div id="contact_form_pop" class="hentry">

But be aware that this might introduce other style rules (like width) too which will have other unexpected effects…

I’m glad I could help. And thank you for the style information. I will try to leave a message on Geektastical. It seems to be a fairly old post, but it is one of the first links that pops up when you search on how to combine the two WordPress plugins. Cheers!

So mintertweed / RavanH, what was the html code you modified and how? I have the Geektastical code on my page, but when the easy fancybox pops up, it only displays the cf7 short code and not the form.

Thoughts?

When I try to load contact form 7 form in popup, the only thing that appears in the working popup is the cf7 shortcode, and not the actual form.

Please help.

<a href="#contact_form_pop">Send Jim a Message Now!</a>

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        [contact-form-7 id="1305" title="Messages to Jim"]
    </div>
</div>

[Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

Can you provide a link to your website? It looks like you are correctly calling the contact form with your HTML that you have given.

I want to have multiple forms on a single page that open in easy fancy box. I’ve added all the markup and unique cf7 ids, but they all open as the same form and not the unique ones. Whatever form is listed first on the page is the one that displays for all the others.

I’m use the following markup (repeated per form id) and easy fancybox.

Thoughts???

<p class=”contactformz”>Dooby Du</p>
<div style=”display:none” class=”fancybox-hidden”>
<div id=”contact_form_pop”>
[contact-form-7 id=”2118″ title=”I Have a Dooby Du Question”]
</div>
</div>

mintertweed, the markup I just posted works now, except for the inability to contain multiple forms on a single page as noted. Thoughts?

Problem solved! I added numbers to the “#contact_form_pop1”, “#contact_form_pop2”, etc. Hope this helps someone else.

<p class=”contactformz”>Dooby Du</p>
<div style=”display:none” class=”fancybox-hidden”>
<div id=”contact_form_pop1″>
[contact-form-7 id=”1305″ title=”I Have a Dooby Du Question”]
</div>
</div>

Thank you bgt9752
your solutions works great, here is the code i am using for the second form

<a href="#contact_form_pop1" class="fancybox">click here</a>
			<div style="display:none" class="fancybox-hidden">
				<div id="contact_form_pop1">
        		<?php echo do_shortcode ('[contact-form-7 id="33" title="test"]'); ?>
    			         </div>
			</div>

Hello bgt9752 and Alvaro !!
You Both are awesome ..
Thank you so much.

@all — please activate the Inline content section on Settings > Media and use class="fancybox-inline" instead of class="fancybox" (which is best be reserved for images) for all inline content links.

I have been fighting woth this for hours! No success. Here is my code:

<a class="fancybox-inline" href="#contact_form_pop">contact</a>
<div class="fancybox-hidden" style="display: none;">
<div class="hentry" id="contact_form_pop" style="width: 460px; height: 380px;">
? ? ? ? [contact-form-7 id="1482" title="Contact us"]
</div>
</div>

what do I do wrong?

BTW the link is not even clickable. IOW, nothing happens.