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:
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).
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.
Like this post?
If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.
Comments
Leave a Comment
Latest From Twitter
Follow usRecent Tutorials
- 13 Awesome CSS and jQuery Navigations for Free
- Top 10 Tips for Selling Templates On Themeforest
- Jquery Ajax Contact Form in Facebox
- Top 7 link and text effects using javascript/css
- CSS and Jquery – Creating an Image Slider
nice tutorial! thanks! cheers!
No problem
Thx for a great script and all, however it does not function properly in Safari, does anyone know how to make it function properly?
-The non functional part is that it does not load ajax in the facebox, it loads it onto a new blank page.
Yes sarari handles things slightly differently and does not work at the moment. I am unsure of a way around the problem.
Also, internet explorer fails to read cookie from the parent page of the facebox. For instance if i set a cookie in one facebox, another facebox on the same page, with internet explorer, fails to read it(the facebox ajax file is written in php), but it works in firefox and safari.
Clearly this is the internet explorer caching issue – http://ajaxian.com/archives/ajax-ie-caching-issue
But since i have starred myself blind on my compability issues i can’t see a way to ‘fix’ this… o.O
Have somewhat sucess with
TEXT
But as the box and the content is shown, internet explorer gets an error and then the box wont close no mater what.
Oh, html code wasnt shown (o.O)
Try again: <a href="#" onclick="var site=script.php?rand=’ + Math.random();jQuery.facebox({ ajax: site });" rel="facebox">Text</a>
Managed to solve the damn caching issues with a single line of code in jquery.form.js at row no 1. And for those who still have caching issues with internet explorer ( aka – Internet explorer ajax caching issue ): Insert this line of code in jquery.form.js at row no 1, before everything:
$.ajaxSetup({ cache: false });
Thanks for that Faleij. Great tip for people with that problem.
Thank you for nice contact form! It’s easy to use.
Great stuff – any news on the Safari issue?
Well since I released my version I believe there have been various reincarnations not using facebox but something similar which function in Safari. A quick google should throw up some results.