x

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).

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.

DemoDownload

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.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • jQuery Enhanced CSS Navigation

    July 4, 2010 / 3 Comments

    In this tutorial we will combine jQuery and CSS to create a nice tab style navigation. The basic effect we are creating is when you hover over a tab it raises up using jQuery.

    Read
  • 13 Awesome CSS and jQuery Navigations for Free

    February 13, 2010 / 17 Comments

    Today I have been experimenting with adding jQuery effects to navigations and links to create some pretty nice interfaces. I have written a brief description for each and include a download.

    Read
  • Top 7 link and text effects using javascript/css

    April 20, 2009 / 17 Comments

    In this article I will run through my favourite ways of enhancing links and text on your website using Javascript and CSS.

    Read

Comments

  1. nice tutorial! thanks! cheers!

  2. Faleij says:

    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.

    • admin says:

      Yes sarari handles things slightly differently and does not work at the moment. I am unsure of a way around the problem.

  3. Faleij says:

    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

  4. Faleij says:

    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.

  5. Faleij says:

    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>

  6. Faleij says:

    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 });

  7. Dmitry says:

    Thank you for nice contact form! It’s easy to use.

  8. John says:

    Great stuff – any news on the Safari issue?

    • admin says:

      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.

  9. Nicholas says:

    I really like this ‘modal’ and would want to use the contact form for my site however can’t for the life of me get it to work…

    After spending hours trying to figure out what I was doing wrong I decided to copy the source code in the demo and try to work back from there but when I did that it still didn’t work! Clearly I am missing something here because the demo obviously works!

    So What is happening is the actual ‘facebox modal’ isn’t functioning at all. When I click on the contact image it opens the form in a new page rather than opening it in the parent window. The form is not inside the facebox even in the new page. So it seems to me that the facebox is the problem…but again I copied all the source codes from the demo directly so I can’t figure out why this is happening.

    I know this is probably a shot in the dark but anyone have an idea what the problem might be?

  10. Sashi says:

    Very nice example…. love it !

  11. Nathan George says:

    Don’t suppose anybody would be able to enlighten me on how I would go about getting the the Facebox modal to automatically close, lets say 3 seconds after you have successfully processed the query?

    Much love!

  12. beppe says:

    hi at all. i spent a lot of time for a good overlay form email. now this is very good and clean! but i have some questions:
    1- i’d like to add a overlay semi-trasparent background… how can i add this?

    2- how can i do test in localhost?

    3- IMPORTANT: i’d like to add jquery datepicker into my form like this: http://jqueryui.com/demos/datepicker/#default
    but doesn’t work… nothing appear!

    HELP ME PLEASE!!

  13. champoink says:

    Ahh the script doesn’t work in Chrome. . . Have you tested it already?

    • admin says:

      The script doesn’t work in certain browsers. So far I have not worked out a way to solve this other than to simply disable the facebox part for the browsers it doesnt work. Instead it would redirect to a different page.

  14. jt says:

    Hi i tried this form, the email was successful sent but i do not received any emails. please advise
    thank you

  15. James says:

    Hi, great post thanks for sharing! By the way do you think you could post an updated version of ‘submitemail.php’? The version that came with the zip file didn’t have proper validation and getting back some weird codes instead of Error: Enter Name or Enter Email. Thanks again!

  16. James says:

    Oh in addition to my email above…I just did a quick scan of the codes and php was missing after ‘<?' tags. I solved the minor issue but for some reason I'm getting back an Undefined variable in line 31 and Function eregi() is deprecated in line 23…I don't know php well enough to understand what this means, maybe this is why the email form never gets to my email box? Thank you in advance.

  17. jack says:

    Nice info..
    but i want to shown css in for,, how to get it??

  18. celebs says:

    Demo is not working ? Or I am blind?

  19. Nick says:

    If you submit the facebox form you are redirected to the submitmail.php but in chrome and safari it doesn’t show it in the facebox but in a blank page?

    Does anyone knows how this come and know how to solve it if it’s possible?

    Thx on advance

  20. Matthew says:

    I would like to make this give a success message once the form is filled out and then the pop up closes, how would i go about doing this?

  21. Rajinder says:

    This script is very helpful. Great thanks for providing the solution to display message on Pop-up

    Really Appreciated

  22. SirDarknight says:

    I can’t make it, plz help me. When they click the link, it opens the php file, not the ajax contact form

  23. Naveed Ahmed says:

    wow, its indeed great article and helped me to give my site some fancy look with popups. Thanks

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books