Recently, a client asked me to have their contact form display in a Lightbox (as opposed to on a separate page). I happily implemented this for them and the end result looked pretty snazzy, so I thought I’d write up how I did it.
The first thing you’re going to need is a contact form and this is best achieved by using a plugin. So, from your WordPress dashboard select Plugins > Add New and enter Contact Form 7 into the search box. All things being equal, you should see a plugin of the same name at the top of your search results. Install it.
I’ve tried various contact form plugins in WordPress and this is by far my favourite. It is lightweight, super easy to use and totally configurable to boot. If you fancy reading more about it, the project’s homepage can be found here: http://contactform7.com/
While you’re installing plugins, there’s one more we’re going to need. This one is called Form Lightbox and can be obtained in the same way as described above. This plugin will enable the Lightbox effect for our contact form. Its homepage can be found here: http://www.myphpmaster.com/form-lightbox/
Now, if you look at your Dashboard menu in your WordPress backend, you should notice that Contact Form 7 has created a new menu item named Contact. If you click on this, you will see an overview of your various contact forms. Currently we only have one (named Contact form 1 or similar).
The form will have a shortcode associated with it similar to:
[contact-form-7 id="401" title="Contact form 1"]
If you were to paste this shortcode into any page on your WordPress site, this would generate a fully functional contact form on that page. As it is, we’ll just copy the code for now, as we’ll need it later.
Now we need to decide where we’ll put our new contact form. It would, of course, be possible to have a link pointing to the contact form, which you could then place in your sidebar or in your footer.
Here is the shortcode you need to do that. It is essentially the Contact form 7 shortcode, wrapped in Form Lightbox’s own shortcode:
[formlightbox title="Send me a message" text="Contact me"]
[contact-form-7 id="401" title="Contact form 1"]
[/formlightbox]
You can find a list of Form Lightbox’s other parameters, as well as some further examples of use, here: http://www.myphpmaster.com/form-lightbox-demo/. Form Lightbox also has a slew of configuration options, which can be found via Settings > Form Lightbox in your WordPress backend.
Adding Form Lightbox to Your Main Navigation
However, my client didn’t want a link, he wanted the Lightbox functionality attached to the contact button in his main navigation.
To implement this I had to edit the file header.php, in which I had hard-coded the menu. The mark-up for the menu looked something like this:
<ul id="myMenu">
<li id="blog"><a href="/blog">Blog</a></li>
<li id="humor"><a href="/humor">Humor</a></li>
<li id="consulting"><a href="/consulting">Consulting</a></li>
<li id="contact"><a href="/contact">Contact</a></li>
</ul>
As the kind of shortcodes listed above are specific to WordPress’ code editor, I had to use the method do_shortcode() to make them render in a template. The code then looked like this:
<ul id="myMenu">
<li id="blog"><a href="/blog">Blog</a></li>
<li id="humor"><a href="/humor">Humor</a></li>
<li id="consulting"><a href="/consulting">Consulting</a></li>
<li id="contact"><a href="/contact">
<?php echo do_shortcode('
[formlightbox title="Send me a message" text="Contact me"]
[contact-form-7 id="401" title="Contact form 1"]
[/formlightbox]
');
?>
</li>
</ul>
Job done!
Reference:
- Form Lightbox on WordPress plugin directory: http://wordpress.org/extend/plugins/form-lightbox/
- Contact form 7 on WordPress plugin directory: http://wordpress.org/extend/plugins/contact-form-7/
- A fantastic tutorial on how to achieve the same effect when not using WordPress: http://designwoop.com/2012/07/tutorial-coding-a-jquery-popup-modal-contact-form/
Any chance you know how to implelement this into a button? I was able to replicate exactly what you did in this tutorial but I am trying to place inside a button. I want a button to open the contact form in the lightbox as opposed to a plain old link. thanks.
The link will have a class, such as ‘fl_box-1’. The easiest thing to do would be to reference the link using this class, then use CSS to style it to look like a button. Here’s how.
Or do it like this:
[formlightbox_call class="7"]<button>Click</button>[/formlightbox_call][formlightbox_obj id="7"][contact-form-7 id="401"][/formlightbox_obj]
Do you know how to do this with a WordPress menu that is not hard coded in the header PHP? Really trying to figure this out
You could maybe insert the contact form elsewhere in the page, leaving the text option blank.
E.g.
Then, using JavaScript, attach an event handler to the appropriate menu button to trigger the contact form on click.
E.g.
$(".myButton").on("click", function(){ $(".fl_box-1").trigger("click"); })I am looking for exactly what you have done, but when testing on your page, (this one), the pop up only comes up once.
If you close it, and then then click again to open it, it hangs.
The page needs to be refreshed, so that it opens again immediately.
I opened this page in two tabs to test it, and both tabs did exactly the the same.
I’ve seen this problem happen in the past on something similar, but can’t recall what.
Any chance of a fix for this ?
Thanks
Oh dear, that is a bit of a bug, isn’t it?
I think the best thing to do is to report this to the plugin author. I just checked the project homepage and the bug is reproducible there, too.
Exactly having the same problem here.
Hi. I’m almost done designing the new webpage on http://amero.helbomedia.dk, but I have a problem with Contact Form 7 and Form Lighbox.
When click on the link in the top of the page “Bliv ringet op af en konsulent” and type name and phone number – then I want to click sent, and after that, the lightbox should shut down, but nothings happens. Any idea for a change, to make this happend?
Thanks a lot.
Anders Helbo, Denmark.
Hi,
You are missing the file “jquery-1.10.2.min.map”
Maybe this has something to do with it?
Where could I find it, and how should it be added in the website?
thanks really helps me alot awesome work salute work