Contact Form 7 Lightbox installation NOTES & FIXES

  • This post may be of some help for those of you trying to install Contact Form 7 in a Modal/Lightbox Window that Rainmaker Webdesign provided instruction on.

    I spent hours trying to install this and after lots of digging, testing and troubleshooting I notice that there are a number of mistakes in the code posted in the instructions on the Rainmaker Webdesign website. I just wanted to pass this on to others who may have had the same issue and save them some time.

    1) Make sure you have the Grunion Contact Form that comes by default with WordPress Deactivated. It conflicts with the display of the this contact form on a page.

    2) The images zip file is missing “curtainbg.png” which is called for by the CF7 stylesheet. This file just acts as the background for your lightbox so it won’t break the function of the plugin. It’s easy enough to make your own. I made a 200×200 gray image with 70% opacity.

    3) The sidebar.php modification will only work if you have a plugin like “PHP Code Widget plugin installed and activated.

    4) Should note that the javascript code for the Header.php HEAD section needs to be BELOW <?php wp_head(); ?> — it took me a while to figure that one out.

    5) In the Header.php BODY tag code there is the same mistake twice on the same line: Where is says: <? it should be <?php

    6) Also in the Header.php BODY tag code there is a mistake on a line showing <H2> with a closing tag </H3>

    7) You will need an updated JQuery for this to work it. You can use their instructions to add the JQuery code to the Functions.php so that it using the newer version. I use WP 3.0.1 and the JQuery that came default didn’t work.

    Note: This is just a Lightbox effect, but not using Lightbox to function. I use the Lightbox 2 plugin, but still had to do the Functions.php mod for JQuery. Or I could have just upgraded my JQuery manually I suppose.

    I hope this helps some of you get this form working with the modal/lightbox. I notified the Rainmaker website so hopefully they will fix their instructions.

    Cheers.

    -Buddy

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Buddy

    (@bergmanb)

    One more note: The Functions.php mod breaks Lightbox-2.

    Thanks Buddy. I got it to work for me. The only problem I am having now is that I use the shortcode (token) [_post_title] to get the title of the post that the user is on when they feel out the form. I am using it as an Apply Now. But when it pops up in the lightbox effect, and I send the email, I get [_post_title] in the message. It is not rendering the shortcode [_post_title]. Do you know how to make this work. Thanks

    Thread Starter Buddy

    (@bergmanb)

    I just tried it and it works fine. I think your problem is adding the (token).

    Just use [_post_title] only. Here is my example that works, though of course you don’t need the font options:

    Only needed in the Message Body config, not the Form config:

    <b>Originating Post Name:</b> [_post_name]
<br>
<FONT FACE="Arial, Helvetica, Geneva" SIZE="+1"><b>From:</b> [name] <[evalEmail]></font>

<FONT FACE="Arial, Helvetica, Geneva" SIZE="+1"><b>Subject:</b> [subject-110]</font>
<br>
<FONT FACE="Arial, Helvetica, Geneva" SIZE="+1"><b>Message Body:</b>
<br>
[textarea-832]
</font>

    Resulting email:

    Originating Post Name: contact

    From: buddy

    Subject: Test Post Name

    Message Body:

    There is a post name

    I hope that helps.

    hmmmm. I guess it partially works, because I do get the Name and the subject, just not the otheres. Is there something I need to add or update maybe? Thanks for your help. This is what I have in my message.

    From: [your-name] <[your-email]>
    Subject: [your-subject]
    Job: [_post_title]
    Name: [_post_name]
    Post URL: [_post_url]
    Author: [_post_author]

    Message Body:
    [your-message]

    And this is what I get in the email….

    From: Brandon Bowman <[email protected]>
    Subject: Test
    Job: [_post_title]
    Title: [wpcf7.post_title]
    Name: [_post_name]
    Post URL: [_post_url]
    Author: [_post_author]

    Message Body:
    Test

    disregard the Title: [wpcf7.post_title] on the second part. I was just testing it, I removed it from the first part but not the second

    I am also not using it in the sidebar. It is located in the loop of the single.php, so it shows up on all posts. It worked before I added the script and code to allow the pop up lightbox effect. If this helps.

    What jQuery version are you using Buddy?

    I figured it out. For anyone who tries to use special mail tags, something else you have to do that is different from the Rainmaker Webdesign tutorial is that you need to put the div that has the curtain and container in the loop. The tutorial tells you to put it right after the <body> tag. If it is in the loop, the special mail tags will work.

    You will have to modify the CSS a little bit, but it will work. Hope this helps someone.

    Thanks to Buddy for putting the corrections above.

    Great tutorial, but after the submission of the form, the lightbox just closes without any notification that the form was sent. Same thing happens during form validation.

    Do you have a solution for that?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Contact Form 7 Lightbox installation NOTES & FIXES’ is closed to new replies.