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%">
    <tr><td></td>
    </tr>
    <tr><td></td></tr>
    <tr><td>Message</td></tr>
    <tr><td>
    </td></tr>
    </table>

    </div>
    <!-- contact form -->


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

    #response{
    clear:both;
    display:block;
    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').removeClass('ajax-loading');
    $('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!

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s