Grow your CSS skills. Land your dream job.

WordPress Plugin Question: Easy FancyBox & Contact Form 7

  • # February 2, 2013 at 6:03 pm

    I really want to use these two plugins together to make an awesome pop-up contact form, but I am having some issues. I followed this tutorial. Everything works fine until the last few 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 given in the tutorial 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. Not what I wanted. 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. Thanks again!

    # February 2, 2013 at 7:17 pm

    First off, are you sure that your Contact Form 7 short code is correct? I can’t see any other reason for it to show the form not found. You might want to post the code you put into the page also.

    I followed the steps and [got this result](http://boundlessdm.com/fancybox-test/ “got this result”), so I think you are missing something on the form itself since everything else is working:

    # February 2, 2013 at 7:22 pm

    Here is the Contact Form 7 shortcode I am using:

    [contact-form-7 id=”87″ title=”Contact form 1″]

    I know it is, at the very least, working somewhat because the contact form appears on my Contact page (just not as a pop-up). But when I try to use the “Contact Us” button, I get the error I listed previously. Could there be something wrong with my jQuery? That is the only thing I can think of at the moment.

    Edit: I know I sometimes have problems with plugins and jQuery because of the theme I am using, but someone on these forums suggested I download the WordPress plugin called All-in-One SEO Pack and ever since I did that, I have had no problems…until now. So, I am not quite sure what is going on. And I know Easy FancyBox is working properly because it opens my curriculum vitae just fine in a pop-up using Adobe Acrobat.

    # February 2, 2013 at 9:05 pm

    >Could there be something wrong with my jQuery?

    Yes, it’s an old version of jQuery – 1.4.4, in the example JoshWhite gave he’s running 1.8.3. That is most likely the issue.

    # February 2, 2013 at 9:19 pm

    How would I go about updating my jQuery? I know absolutely nothing about this topic or JavaScript.

    Edit: Also, this is for a WordPress website. So, however I update jQuery for WordPress. Thank you in advance!

    # February 3, 2013 at 1:07 am

    How are you bringing jQuery into WordPress?? Are you using the < ?php wp_enqueue_script("jquery"); ?> method? Or are you literally bringing it in? As far as I understand it, the enqueue method will always bring in the version that WordPress itself updates with every release, so it should be fairly safe.

    # February 3, 2013 at 12:43 pm

    I am using a blank theme that Chris Coyier made a while back (like, over a year-and-a-half ago). I am not sure how I am calling it. How do I find out?

    Edit: @JoshWhite, could you give me a step-by-step of how you achieved the pop-up contact form? I just used the most recent Starkers blank theme template, which should have an updated jQuery, and I still get the same error when I follow the previously mentioned tutorial. Thank you for bearing with me.

    # February 3, 2013 at 3:01 pm

    Also, I just found a WordPress Plugin called jQuery Updater. It brought my jQuery version up to 1.8.2. And the pop-up contact form is still not working.

    # February 3, 2013 at 3:33 pm

    Maybe the name of the form was changed from “Contact form 1″ to something else? The message you’re getting is a standard Contact Form 7 error that appears when the “name” value is incorrect.

    What do you see when you put that particular shortcode in the contents of a (test) post (and not in a popup)? Same error?

    # February 3, 2013 at 3:47 pm

    Thank you, @Senff. You indirectly solved the problem. I went back to the tutorial to see what shortcode he used and then I looked at my own shortcode that was being produced by Contact Form 7. It was different. In the tutorial, the shortcode produced was [contact-form 1 "Contact form 1"] and my shortcode was [contact-form-7 id="87" title="Contact form 1"]. So I took the HTML that the author of the tutorial said to use:

    Contact Us

    And pasted it directly in my Contact page. Notice anything different between my shortcode and the code for the contact form being called? Yep, it was calling the pop-up in the old manner of doing it. So, I simply replaced [contact-form 1 "Contact form 1"] with [contact-form-7 id="87" title="Contact form 1"] and everything works fine. Fan-freakin’-tastic!

    # February 3, 2013 at 3:59 pm

    Right — the tutorial might have been old enough to use an older version of CF-7, which would explain the differences.

    However, in one of your posts above you pasted the shortcode you said you used on the Contact page (that doesnt open in a popup), so it was easy for us to assume you used the same (correct) code for the popup.

    Anyway, glad it’s solved.

    # June 14, 2013 at 3:40 pm

    Thank you for this information! I was having the same problem and following the same tutorial.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".