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.