Het is mogelijk een contact formulier aan te maken wat via een popup getoond wordt. Vergelijkbaar met een lightbox popup. Er is geen plugin in WordPress die dat mogelijk maakt, dus ik heb met html/css en javascript zelf wat gemaakt.

Javascript

Als eerste laat ik de javascript zien die de popup mogelijk maakt. Deze javascript code kun je plaatsen in header.php van je wordpress template.

<script type="text/javascript">
function latenzien() {
document.getElementById('contact_overlay').style.display = 'block';
jQuery('#contact_overlay').animate({opacity:'1.0'}, 1000);
}
function verstoppen() {
document.getElementById('contact_overlay').style.display = 'none';
document.getElementById('contact_overlay').style.opacity = '0.0';
}
</script>

Je ziet dat er bij het aanroepen van de functie latenzien(), dat er een divje op display:block gezet wordt, en met een animatie in jQuery wordt hij ondoorzichtig gemaakt. Om de overlay maar voor 80% ondoorzichtig te maken heb ik als achtergrond van de div een half-transparante png gebruikt.

HTML

De html code kan geplaatst worden aan het eind van footer.php, net binnen de body.
Let op de shortcode van Contact Form 7, er zitten voor de juiste weergave nu wat spaties in.

<div id="contact_overlay"> <!-- contact form -->
<div id="contact_container">
<div id="contact_popup">
<h3>Neem contact op.</h3>
<?php echo do_shortcode(' [ contact-form 1 "Contact" ] '); ?>
<div id="contact_sluiten">
<a href="#" onClick="verstoppen()">Sluiten <strong>X</strong></a>
</div>
</div>
</div>
</div>

Om de code zichtbaar te maken plaatsen we een button of link ergens in ons template, met een onclick event. Wanneer deze link geklikt wordt zal de popup verschijnen.

<div id="contact">
<a href="#contact_" onClick="latenzien()"></a>
</div>

CSS

De CSS code is wat uitgebreider.

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_sluiten {
text-align: right;
width: 570px;
height: 30px;
font-size: 1.8em;}

Je ziet hier dat de contact_overlay een position absolute krijgt, en dus over het gewone document heenvalt. De top:0; plaatst hem dan bovenaan.

IE6 – IE8

In IE6 t/m 8 is het probleem dat de transparante png compleet zwart is, en niet meer doorzichtig. Dit komt doordat IE6 – IE8 een probleem met opacity heeft. Verander je de opacity van een transparante png, dan wordt het transparante deel zwart.
Dit is te omzeilen door een gif te gebruiken voor IE. Ik kreeg een halftransparante gif echter ook niet goed, en heb het anders opgelost. Ik heb een gif gebruikt van 4 pixels, waarvan er 3 zwart zijn en 1 volledig transparant. In een stylesheet die voor IE6 – IE8 werkt is dit vervolgens toe te voegen.