Ajax Contact Form for your site

Contact form of a site in Ajax is pretty effective. Here i’m showing step by step instructions to create a simple ajax contact form using mootools. Let following is your contact form:

    <div id="response"><div id="log_res"></div></div><!-- this empty div is loader to show your message here -->
    <div id="contact_form">

    <table cellpadding="1" cellspacing="1" border="0" width="100%">

    <!-- contact form -->

we need some style stuffs for the ajax loader, here is the css code for above form:

    padding: 0.5em;
    width: 444px;
    color: #000000;
    margin-bottom: 5px;
    #log_res {
    overflow: auto;
    #log_res.ajax-loading {
    padding: 20px 0;
    background: url(images/spinner.gif) no-repeat center; /* this is the ajax loader image */

your form/css is written. Get a spinner from here – http://www.ajaxload.info/

So let write the ajax stuffs, get mootools core from http://mootools.net, Below is the ajax code that i’ve used for the above form:

    window.addEvent('domready', function(){
    // submit button is clicked , so send the value
    $('contactForm').addEvent('submit', function(e) {
    new Event(e).stop(); //stop the form not to submit
    var log = $('log_res').empty().addClass('ajax-loading'); //load the loader image div
    //hide the main form
    var myFx = new Fx.Slide('contact_form').hide();
    // set the form to send
    this.set('send', {
    method: 'post',
    onSuccess: function(responseText, responseXML) {
    responseT.start('background-color', '#F9F260', '#FFFFFF'); //show message with backgorund effect
    $('response').morph({color: '#000000'}); // show message with color effect
    $('log_res').removeClass('ajax-loading'); //remove the ajax loader image class
    $('log_res').set('html', responseText); //set the message
    onFailure: function(headerName, value) {
    responseT.start('background-color', '#F9F260', '#FFFFFF');
    $('response').morph({color: '#FF0000'});
    $('log_res').set('html', responseText);
    this.send(this.action); //send the data

anybody can implement this easily who has little knowledge about javascript. Have Fun!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.