WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Easy FancyBox & Contact Form 7 (24 posts)

  1. mintertweed
    Member
    Posted 1 year ago #

    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/

  2. sijo55
    Member
    Posted 1 year ago #

    Your form is popping up as it should..

  3. mintertweed
    Member
    Posted 1 year ago #

    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!

  4. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  5. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

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

  6. mintertweed
    Member
    Posted 1 year ago #

    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!

  7. bgt9752
    Member
    Posted 1 year ago #

    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?

  8. bgt9752
    Member
    Posted 1 year ago #

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

  9. mintertweed
    Member
    Posted 1 year ago #

    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.

  10. bgt9752
    Member
    Posted 1 year ago #

    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>

  11. bgt9752
    Member
    Posted 1 year ago #

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

  12. bgt9752
    Member
    Posted 1 year ago #

    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>

  13. Alvaro
    Member
    Posted 9 months ago #

    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>
  14. Somnath Jadhav
    Member
    Posted 9 months ago #

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

  15. RavanH
    Member
    Plugin Author

    Posted 9 months ago #

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

  16. ChangeAgent
    Member
    Posted 8 months ago #

    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.

  17. RavanH
    Member
    Plugin Author

    Posted 8 months ago #

    Hi ChangeAgent, your code looks OK. If your link 'is not even clickable' then you're probably facing another issue. Can you open a new thread and provide a link to your site?

  18. ChangeAgent
    Member
    Posted 8 months ago #

    yes I can, however the site is not life as it does not comply yet with local regulations, like disclaimers, impressum etc. I can PM you the access details, but see no PM option.

  19. RavanH
    Member
    Plugin Author

    Posted 8 months ago #

    You can use the contact form on status301.net :)

  20. ChangeAgent
    Member
    Posted 8 months ago #

    Done! and thanks for helping. Give me 30 minutes and I reinstate it. I removed it since it did not work.

    It will be on the page of the

    Kontakt Formular
    second link on the right site.

  21. ChangeAgent
    Member
    Posted 8 months ago #

    just finished, sometimes life is fast...

  22. ChangeAgent
    Member
    Posted 8 months ago #

    for others that want to know how we fixed it, the developer found the following:

    It looks like the plugin Scroll Top and Bottom (or something) is inserting its own outdated version of the jQuery library. Disable it or ask the developer to NOT do that and use the WordPress included jQuery like everyone else ;)

    disabling jQuery in the plugin Scroll Top and Bottom did not solve it. It also made the Scroll Top and Bottom not work. So unfortunately I had to remove. Sadly as I liked it very much.

  23. olisb
    Member
    Posted 7 months ago #

    none of this advice seems much use to me because if a user does not enter something right in the form (or even if they do!) they will not see any 'form validation' errors... unless they click on the link again, which seems like bad design.

    So I guess the only sensible way to do this is via an i-frame popup, or have I missed something simple?

  24. esmi
    Forum Moderator
    Posted 7 months ago #

    @olisb: If you require assistance then, as per the Forum Welcome, please post your own topic. This topic has been resolved.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic