It is possible to make a contact form that is shown with a popup. You can compare it with a Lightbox popup. There is no plugin in WordPress that does this for you, so I decided to make something myself with some html/css and javascript.
Javascript
First I will show the javascript that makes the popup possible. You can place this code in header.php of your WordPress theme.
<script type="text/javascript"> function show_me() { document.getElementById('contact_overlay').style.display = 'block'; jQuery('#contact_overlay').animate({opacity:'1.0'}, 1000); } function hide_me() { document.getElementById('contact_overlay').style.display = 'none'; document.getElementById('contact_overlay').style.opacity = '0.0'; } </script>
You can see that with the calling of the function show_me(), that there’s a div set to display:block, and there’s an animation in jQuery that makes it non-transparent. To have the overlay for only 20% transparent I used as background of the div a half-transparant png.
HTML
The html code can be placed in footer.php, at the end, just inside the body.
Make sure you get the shortcode for Contact Form 7 right. Here there are added some spaces for readability.
<div id="contact_overlay"> <!-- contact form --> <div id="contact_container"> <div id="contact_popup"> <h3>Contact us.</h3> <?php echo do_shortcode(' [ contact-form 1 "Contact" ] '); ?> <div id="contact_close"> <a href="#" onClick="hide_me()">Close <strong>X</strong></a> </div> </div> </div> </div>
To make the code visible, we place a button or a link in our template, with an onclick event. When you click this link the popup will show.
<div id="contact"> <a href="#contact_" onClick="show_me()"></a> </div>
CSS
The CSS code is somewhat bigger.
div#contact_overlay {display: none; opacity:0.0; filter:alpha(opacity=0); height: 1000px; width: 100%; position: absolute; top: 0; background-image: url('/images/contact_overlay.png');} div#contact_container {width: 760px; margin: 100px auto 0; position: relative;} div#contact_popup {height: 660px; width: 570px; padding: 30px 45px 0; margin: 0 auto; -moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px;} div#contact_close { text-align: right; width: 570px; height: 30px; font-size: 1.8em;}
Here you can see that #contact_overlay gets a position:absolute, and falls over the normal document. The top:0 will place it on top.
IE6 – IE8
In IE6 till IE8 the problem is that the transparent png is completely black, and not transparent anymore. This is because IE6 – IE8 has a problem with opacity. If you change the opacity of a transparent png, the transparent part turns black.
You can get around it by using a gif file for IE. I didn’t get it right with a halftransparent gif either, so I resolved to a different solution. I used a gif of 4 pixels, of which 3 are black, and 1 is completely transparent. In a stylesheet that loads for IE6 – IE8 you can add this gif.