Category

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.

In WordPress it’s easy to use a widget for searching within the website. Often the standard search query suffices. But sometimes you want to refine the search options. This can be done in a simple way by adding extra fields in the form.

The function get_search_form() has standard as output in WordPress 3.0 the next html:

<form role="search" method="get" id="searchform" action="/" >
<div><label for="s">Search for:</label>
<input type="text" value="searchtest" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

The only variable that will be submitted here is “s” with the value of the search query, in this case “searchtest”. However, you can refine it in many ways. For example by only showing posts in the search results. This can be done with the next addition:

<input type="hidden" value="post" name="post_type" id="post_type" />

Here we submit the value “post”. The default value is “any”, meaning, posts, pages, etc.
There are many additions like this. With a var_dump() of the object $wp_query you can see all the default values of the search variables. With a var_dump() of $wp_query->query you can see the current query.

Searchform.php

You can make this set of input-fields the standard search query by adding a searchform.php in your theme directory. The searchform.php can look like this:

<form role="search" method="get" id="searchform" action="/" >
<div><label for="s">Search for:</label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="hidden" value="post" name="post_type" id="post_type" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

Each time you call the function get_search_form() you will get the right form.

WordPress is origineel opgebouwd rond een andere javascript library, Prototype. In latere instantie is er pas jQuery aan toegevoegd. De gebruikte jQuery is echter licht aangepast om niet te conflicteren met Prototype. Veel plugins gebruiken ook deze jQuery.
Probleem kan echter zijn dat de eigen toegevoegde jQuery scripts niet goed werken wanneer de jQuery van WordPress wordt gebruikt. Er is een goede oplossing hiervoor.

De oplossing

De oplossing houdt in dat we de eerste regel van onze eigen jQuery scripts aanpassen.
De regel die eruit ziet als:

$(document).ready(function()

Veranderen we in:

jQuery(document).ready(function()

Zo wordt in het script dat we gebruiken ook jQuery daadwerkelijk aangeroepen.
De oorzaak ligt er namelijk in dat het $ teken gebruikt wordt om jQuery aan te roepen binnen een script, maar omdat WordPress rond Prototype gebouwd is wordt dat binnen Prototype juist aangeroepen. En dat werkt niet.

We kunnen deze aanpassing loslaten op alle “$” tekens in het betreffende javascript. Dus simpelweg een Zoek-en-vervang van $ door jQuery.