Popup contact form in WordPress

10 Mar 2011 11:25 | Geplaatst door Marcel |

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.

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.

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.

CSS

The CSS code is somewhat bigger.

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.