WordPress + Colorbox + Contact Form 7 + jQuery + Ajax = :)

Want to have a contact form open up in an overlay window and submit using ajax in WordPress?
I did too. It sounded simple enough, but like most webby things it was a right palaver to get it all working properly.
Step by step instructions below.
I hope it saves you some time, but if you know a different or better way, please let me know.

Demo

  • This is what we’re going to end up with: a link/button that shows our lovely contact form in an overlay window.
    On submit, the form does its thing in the overlay window, not linking to a new page.
  • You can also see this method in action on my about page. Click the green ‘Ok, let’s talk’ button.

Install the WordPress plugins

Colorbox Settings

  • You don’t need to anything to the default Colorbox settings! Hoorah

Contact Form 7 Settings

  • In you WP admin area, click on your new Contact tab and you should be presented with a basic form. If not, create one. You should end up with something like this -
1
[contact-form 1 "Contact form 1"]
  • Still on the form settings page, at the bottom of your form settings under Additional Settings you need to paste in this magic code
1
on_sent_ok: "document.getElementById('hideform').style.display = 'none' "

This code tells colorbox to hide the contact form once it has been sent successfully. * Note that the quotes wrap around the code and that there’s no semi-colon after the declaration as I expected there would be. * If you need to do multiple jQuery calls, the format goes like this (also resizing the overlay window)

1
on_sent_ok: "document.getElementById('hideform').style.display = 'none'; jQuery.colorbox.resize({height:'150px'})"

OK, our form is ready.

Create a link or button in your post/page to trigger colorbox

Let’s use a button to kick it all off. The HTML looks like this

1
<button class="contact" href="/contact">Show me the form in colorbox</button>

Go on, try it again.

Add your form to the page/post above

  • The beauty of Contact Form 7, is that is supports shortcodes out of the box, so we can simply use it like this
1
<div id="reply_form" class="hidden"><p>Ooh, a lovely message</p>[contact-form 1 "Contact form 1"]</div>
  • You’ll see that the contact form is wrapped in our target div id=”reply_form” and has the hidden class.
  • Use jQuery or CSS to hide the reply_form by default. Add this to your stylesheet
1
.hidden{display:none;}

Add the jQuery script

  • Copy and paste the script below directly into your post/page (in HTML view) or load it as an external .js file.
  • The script binds the button to the click event and opens colorbox with specific settings.
  • I am using the inline method and telling colorbox to place the div reply_form (a hidden div on this page) into the window.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
    // Overlay Contact Form
    $("button.contact").click(function (event) {
        event.preventDefault();
        $(this).colorbox({
            inline:true,
            transition:'fade',
            speed:500,
            width:'20%',
            height:'auto',
            href:"#reply_form",
            onCleanup:function(){
                $('#reply_form').hide();  
            }
        });
        $('#reply_form').fadeIn('slow');
    });

});
</script>
  • this bit says ‘hide the form again when the overlay window closes’
1
2
3
onCleanup:function(){
   $('#reply_form').hide();  
}
  • this bit fades in our form
1
$('#reply_form').fadeIn('slow');

Altogether now

  • Once you’ve created a form, simply copy and paste the complete page below into your HTML post window.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- Your button -->
<button class="contact" href="/contact">Show me the form in colorbox</button>
<!-- Your hidden Contact Form 7 form -->
<div id="reply_form" class="hidden"><p>Ooh, a lovely message</p>[contact-form 1 "Contact form 1"]</div>
<!-- The jQuery script-->
<script>
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
    // Overlay Contact Form
    $("button.contact").click(function (event) {
        event.preventDefault();
        $(this).colorbox({
            inline:true,
            transition:'fade',
            speed:500,
            width:'20%',
            height:'auto',
            href:"#reply_form",
            onCleanup:function(){
                $('#reply_form').hide();  
            }
        });
        $('#reply_form').fadeIn('slow');
    });


});
</script>

You’re done

  • You’re a genius! Test it out

14 Responses to WordPress + Colorbox + Contact Form 7 + jQuery + Ajax = :)

  1. Hi,

    really nice, I´m not a programmer and I realized this with your help on a site with 2 different forms.

    But: it was necessary to use

    1
     <?php echo do_shortcode( '[contact-form 1 "Kontaktformular 1"]' ); ?>

    instead of the short code.

    And the second thing: how do I do this without the button “show me the form…” – I need this with a simple text link.

    Thanks a lot hydralite

  2. @hydralite Thanks for the heads up re:shortcode To do the same with link text and not a button, do this: 1. Create the link text in your post

    1
    <a class="contact" href="/contact">Link text to open overlay</a>
    2. Change line 6 in the jQuery script from
    1
    $("button.contact").click(function (event) {
    to
    1
    $("a.contact").click(function (event) {
    so that jQuery expects <a class=”contact”> to open the overlay, not the button That should do it

  3. Cool tutorial. After following step by getp, I’m getting an error when I try this out.

    After the form is submitted, nothing happens and I get this javascript error:

    document.getelementbyid(“hideform”) is null

    Using Contact Form 7 3.01 and Colorbox.

    Any ideas why this is happening?

  5. I took a look at your source code for this page and noticed something. Where is

    1
    <div id="hideform">
    coming from?

  6. that piece of code hides the Comment form on this page. Nothing to do with the current script we’re discussing.

  7. asdadadadadddd

    cough i mean thanks for a great tutorial, this will look rather nice on my spiffing new website :)

  8. great post buddy … really a big thanks…. nut i want to know how can we resize the colorbox ?

  9. You can change the size of the overlay box by changing the parameters in the jQuery script that opens colorbox Look under this line in the script above

    1
    $(this).colorbox({

  10. Does this still work with latest plugins and WP? I followed instructions, but nothing happens when i click the button. Seems weird adding the javascript to the html editor?

  11. Nice tutorial :) I do bumped into an issue though…

    So, I figure there’s a small error in this code:

    1
    on_sent_ok: "document.getElementById('hideform').style.display = 'none'; jQuery.colorbox.resize({height:'150px'})"

    I reckin ‘hideform’ should be replaced by ‘reply_form’, or whatever id one’s using for the hidden div, right? But even so, I have a problem getting the response message show up. Cause when I hide the div that contains the form, the response message also gets hidden. How did you manage to show this message in your example?

  12. I have done very thing as the tutorial. and it works good. i have modify it a bit. but every time you want to put the jQuery in the html side and say save it works but if you switch back to visual mode the code that you have just put in disappears. Why is that happening??

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>