Support » Plugin: Easy FancyBox » Easy FancyBox & Contact Form 7

  • Resolved mintertweed

    (@mintertweed)


    I really want to use these two programs together to make an awesome pop-up contact form, but I am having some issues. I followed this tutorial. Everything works fine until the few last steps. The author uses the term “new page” several times and I am having difficulty figuring out if he/she means an actual new page or the page I just created. So, after looking at the images along with the tutorial, I decided that you make one page with the Contact Form 7 shortcode and then you place the rest of the HTML on the page that you want the pop-up to appear on. Do I have that right? If so, then I am still getting an error: [contact-form-7 404 "Not Found"]. So, I then brought the Contact Form 7 code onto my contact page and now the form is appearing directly on the page without the pop-up. I hope this all makes sense. I would appreciate anyone who could help me out with this. Thank you!

    Edit: Also, here is my website, so you can see what is happening.

    http://wordpress.org/extend/plugins/easy-fancybox/

Viewing 15 replies - 1 through 15 (of 23 total)
  • 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!

    Plugin Author RavanH

    (@ravanh)

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

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

    Plugin Author RavanH

    (@ravanh)

    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!

    bgt9752

    (@bgt9752)

    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?

    bgt9752

    (@bgt9752)

    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.]

    mintertweed

    (@mintertweed)

    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.

    bgt9752

    (@bgt9752)

    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>

    bgt9752

    (@bgt9752)

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

    bgt9752

    (@bgt9752)

    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.

    Plugin Author RavanH

    (@ravanh)

    @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.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Easy FancyBox & Contact Form 7’ is closed to new replies.