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.

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

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:

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

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:

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

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:

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?

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.

Comments

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.

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.

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:

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?

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.

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!

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.

Other Websites

CSS Books

Almost 500 pages of CSS help, with more than 100 pages of practical tutorials to guide you through the process of implementing and refining CSS to save you many a wasted hour. At $23, you’ll be hard pressed to find a better guide to designing with CSS.