Jquery Ajax Contact Form in Facebox

Jquery Ajax Contact Form in Facebox

In this tutorial I will run through how to set up an awesome ajax contact form with validation which loads in facebox to mimic the get satisfaction feedback you may see on the side of some websites these days. I developed this using various other resources on the internet for a recent template for themeforest. You can view it in action on its listing on themeforest. I will also include a little bit about using position relative and how to get around internet explorers problems with it.

Okay first things first. Check out the demo of what we will be creating. Click the link floated to the right side of the window and try filling out and submitting the form to see it in action. You may also notice I have made the image link about 80% transparent and then 100% on hover. I will also quickly show you how to do that.

What you will need

Okay building this contact form is going to take a few files:

• Jquery – download
• Facebox – download
• Ajax jquery contact form with validation – download

Load these into your templates head section like so:

<script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.form.js"></script>
   <link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
 <script src="facebox/facebox.js" type="text/javascript"></script> 

Creating the position fixed link

This part of the tutorial isn’t necessary if you just wish to have a regular text link somewhere in your template linking to the contact form. I however link the effect of having a flated link to the right or left of the template. The problem with creating this effect is Internet Explorer as it does not recognise position:fixed. The way I get around this is to use a condition CSS file for IE and change position fixed to absolute. This way the link does not follow us down the page but will atleast work. If you do this method you can also use javascript to make the image scroll down the page as you do. This however is a bit needless by my estimation so choose to just leave it out. You can however read a great article about it on how to create.

The HTML

<div id="contact"><a href=index.php" rel="facebox"><img src="image.jpg" alt="image" class="contimage" border="0"/></a></div>

I usually choose to place this just before the template’s body. A couple things to note: the rel="facebox" is added to make it a facebox link and class="contimage" is added to the image to make it animated when hovered over. You will also have to include a valid path to an image.

The CSS

The CSS is very simple for this. First create your main CSS file, in my example that is style.css. In this place:

div#contact {
       position:fixed;
       top:200px;
       right:0;
       }
   

This basically positions the div of ID contact on the far right of the screen, 200px from the top at all time. This works in browsers not name IE. To fix the IE problem I usually create a completely separate CSS file. In your IEstyle.css place the following:

div#contact {
     position:absolute;
     top:200px;
     right:0;
}

Now in your HTML file you will have to link to both the style.css and the iestyle.css. The way to do this is to use conditional statments for the iestyle.css. Simply add this to your templates head section:

<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="iestyle.css" type="text/css" media="screen" /<
< ![endif]-->

Animating the opacity of an image link using jquery

This is a pretty cool effect you can use. The way I like is to make the image about 80% opacity to start with. That means you will be able to see the parts of the template below it if your contact image is floated over a part of the template. Then on hover we use jquery to make animate the opacity to 100%. As mentioned above we added the class=”contimage” for this reason.

The CSS

.contimage{
filter: alpha(opacity=80);-moz-opacity:.80;opacity:.80;
}

This is a very simple piece of CSS. The different versions are simply to make the effect work in each browser.

The Jquery

$(document).ready(function(){
$(".contimage").hover(function() {
$(this).animate({
opacity:1
},200);
}, function() {
$(this).animate({
opacity:0.8
},200);
});
}); 

Now you should have a nice highlighting effect using jquery. If you have any problems you can download the working files at the end of this tutorial.

Modding Facebox to work with a contact form

Now we are going to have to change facebox a little so that it will work with our contact form. The problem with the standard facebox is it will now include the jquery form validation from our main page without some tinkering. First thing is first, you will have to initiate the facebox javascript in your head section. To do this simply change the above script in your head section to the following:

$(document).ready(function(){
$(".contimage").hover(function() {
$(this).animate({
opacity:1
},200);
}, function() {
$(this).animate({
opacity:0.8
},200);
});
$('a[rel*=facebox]').facebox()
}); 

I came across the solution for the validation problem using facebox on Nabble. I have simply copied the explanation given there. Basically you have to change the following things in facebox.js for it to work. Don’t worry if you can’t figure it out, a modded version is included in the final download.

$.extend($.facebox, {
settings: {
dom_data: null,
dom: null,

*add in the variables dom and dom_data in the main declaration of facebox

if (href.match(/#/)) {
var url    = window.location.href.split('#')[0]
var target = href.replace(url,'')
$.facebox.settings.dom = target;
$.facebox.settings.dom_data = $(target).children();
$.facebox.reveal($(target).children().show(), klass)

*this is in fillFaceboxFromHref

finally,

$(document).bind('close.facebox', function() {
if($.facebox.settings.dom){
$($.facebox.settings.dom).append($.facebox.settings.dom_data);

$.facebox.settings.dom = null;
$.facebox.settings.dom_data = null;
}

* this is at the end of the file

I also find I have to change the image paths in facebox.js to get them to work. After applying these changes when you click your contact link the contact form (index.php) should be show up. If you fill out the form and submit your should be able to see validation errors/success in the same window (will not work on localhost).

Download modded version

Styling the ajax contact form

When I use this contact form I like to change the styling a little. This means removing the borders on the fieldset and floating the error messages to the right. To do this simply add in your CSS to your main style.css. For my example the is the CSS used to style the contact form:

 /*  Contact Form Styling */
#contactform #error ul{
padding-left:0px;
line-height:20px;
}
#contactform #error span{
color:green;
padding:5px 0 5px 0;
position:absolute;
top:60px;
right:10px;
width:150px;
}
#contactform #error ul li{
color:#BF0B0B;
font-weight:normal;
}
h2#contacth2{
font-size:18px;
color:#000;
margin:0 0 10px 0;
font-weight:normal;
padding-bottom:10px;
border-bottom:1px dotted #ccc;
}
#contactform fieldset{
border:none;
}
#contactform #formleft{
float:left;
}
#contactform #error{
float:right;
}
#contactform .button{
background:#eded;
color:#666;
border:1px solid #ccc;
padding:5px 20px 5px 20px;
outline:none;
}
#contactform{
color:#666;
}
.clear{clear:both;}

I also changed the structure of the contact form by editing index.php (in my case I changed this to contact.php). You can download the finished files shown in the example by clicking the link given below. For instructions on usage for the contact form and further explanation on using facebox simply visit the links given at the start of the tutorial to download them. If you encounter any problems let me know and I will try to fix them. Thanks for reading and I look forward to writing the next tutorial, whatever it may be.

I suggest checking the filepaths and contact details in the download and changing them appropriately.

Demo – Download

Related CSS Tutorials

Comments