How to: Create AJAX/PHP/Html Jquery Contact Form

In pretty much every site now days you will find a contact form. It's much easier for the user to just fill out the form and send it to the company/person, rather than manually sending an email through their mail box.

Below you can find a simple tutorial on how to make a contact form that will make your site visitors say 'Great!'. A simple nice and smooth validation which is developed with AJAX.

DEMO | SOURCE

We are going to have 2 files, the first one is contact.html and the second one is send_email.php.

HTML (contact.html)

<div id='contact_form_holder'>
<form action='index.php' method='post' id='contact_form'>
<h2><img id='contact_logo' src='images/mail.png' /> Contact Us</h2>

<p>
Your Name:
<div id='name_error' class='error'><img src='images/error.png'> I don't talk to strangers.</div>
<div><input type='text' name='name' id='name'></div>
</p>

<p>
Your Email:
<div id='email_error' class='error'><img src='images/error.png'> You don't want me to answer?</div>
<div><input type='text' name='email' id='email'>
</p>

<p>
The Subject:
<div id='subject_error' class='error'><img src='images/error.png'> What is the purpose of the contact?</div>
<div><input type='text' name='subject' id='subject'></div>
</p>

<p>
The Message:
<div id='message_error' class='error'><img src='images/error.png'> Forgot why you came here?</div>
<div><textarea name='message' id='message'></textarea></div>
</p>

<div id='mail_success' class='success'><img src='images/success.png'> Thank you. The mailman is on his way.</div>
<div id='mail_fail' class='error'><img src='images/error.png'> Sorry, don't know what happened. Try later.</div>
<p id='cf_submit_p'>
<input type='submit' id='send_message' value='Send The Message'>
</p>

</form>
</div>

As you can now see from the contact form section are splitted with paragraphs. Inside every paragraph there is a description text. error div. and the div with the inport. Lets crack on with the CSS styling for the contact form when showing errors and success messages.

CSS (contact.html)

#contact_form_holder {
    font-family: 'Verdana'; /* this is a nice font-family, at least i think, if you don't like it change it <img src="http://web.enavu.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">  */
    font-variant: small-caps; /* making the small letter looks like capital but keeping the size of it to smaller, looks cool */
    width:400px; /* setting a fixed width of the contact form holder will make things easier later (like aligning and such) */
}
#contact_form_holder input, #contact_form_holder textarea {
    width:100%; /* make all the inputs and the textarea same size (100% of the div they are into) */
    font-family: inherit ; /* we must set this, so it inherits the font-family */
    padding:5px; /* and make a custom padding, you can set whatever you like */
}
#contact_form_holder textarea {
    height:100px; /* i never liked small textareas, so make it 100px in height */
}
#send_message {
    width:200px !important; /* the width of the submit button  */
    font-variant: small-caps; /* nicer font-variant (like explained before) */
    border:1px solid black; /* remove the default border and put a normal black one */
    cursor:pointer;
    cursor:hand;
}
#cf_submit_p { text-align:right; } /* show the submit button aligned with the right side */

/* styling */

.error {
    display: none; /* hide the errors */
    /* add some styling */
    padding:10px;
    color: #D8000C;
    font-size:12px;
    background-color: #FFBABA;
}
.success {
    display: none; /* hide the sucess div */
    /* add some styling */
    padding:10px;
    color: #044406;
    font-size:12px;
    background-color: #B7FBB9;
}

#contact_logo { vertical-align: middle; }
.error img { vertical-align:top; }

And now we get the nice, simple contact form.

JQuery(contact.html)

    $(document).ready(function(){
        $('#send_message').click(function(e){

            //stop the form from being submitted
            e.preventDefault();

            /* declare the variables, var error is the variable that we use on the end
            to determine if there was an error or not */
            var error = false;
            var name = $('#name').val();
            var email = $('#email').val();
            var subject = $('#subject').val();
            var message = $('#message').val();

            /* in the next section we do the checking by using VARIABLE.length
            where VARIABLE is the variable we are checking (like name, email),
            length is a javascript function to get the number of characters.
            And as you can see if the num of characters is 0 we set the error
            variable to true and show the name_error div with the fadeIn effect.
            if it's not 0 then we fadeOut the div( that's if the div is shown and
            the error is fixed it fadesOut.

            The only difference from these checks is the email checking, we have
            email.indexOf('@') which checks if there is @ in the email input field.
            This javascript function will return -1 if no occurence have been found.*/
            if(name.length == 0){
                var error = true;
                $('#name_error').fadeIn(500);
            }else{
                $('#name_error').fadeOut(500);
            }
            if(email.length == 0 || email.indexOf('@') == '-1'){
                var error = true;
                $('#email_error').fadeIn(500);
            }else{
                $('#email_error').fadeOut(500);
            }
            if(subject.length == 0){
                var error = true;
                $('#subject_error').fadeIn(500);
            }else{
                $('#subject_error').fadeOut(500);
            }
            if(message.length == 0){
                var error = true;
                $('#message_error').fadeIn(500);
            }else{
                $('#message_error').fadeOut(500);
            }

            //now when the validation is done we check if the error variable is false (no errors)
            if(error == false){
                //disable the submit button to avoid spamming
                //and change the button text to Sending...
                $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });

                /* using the jquery's post(ajax) function and a lifesaver
                function serialize() which gets all the data from the form
                we submit it to send_email.php */
                $.post("send_email.php", $("#contact_form").serialize(),function(result){
                    //and after the ajax request ends we check the text returned
                    if(result == 'sent'){
                        //if the mail is sent remove the submit paragraph
                         $('#cf_submit_p').remove();
                        //and show the mail success div with fadeIn
                        $('#mail_success').fadeIn(500);
                    }else{
                        //show the mail failed div
                        $('#mail_fail').fadeIn(500);
                        //reenable the submit button by removing attribute disabled and change the text back to Send The Message
                        $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
                    }
                });
            }
        });
    });

Now we just need to make a simple php file that will process the email and tell JQuery if it succeded in that.

PHP(send_email.php)

    //we need to get our variables first

    $email_to =   'hello@zenbix.com<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementById("__cf_email__");a=l.className;if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>'; //the address to which the email will be sent
    $name     =   $_POST['name'];
    $email    =   $_POST['email'];
    $subject  =   $_POST['subject'];
    $message  =   $_POST['message'];

    /*the $header variable is for the additional headers in the mail function,
     we are asigning 2 values, first one is FROM and the second one is REPLY-TO.
     That way when we want to reply the email gmail(or yahoo or hotmail...) will know
     who are we replying to. */
    $headers  = "From: $emailrn";
    $headers .= "Reply-To: $emailrn";

    if(mail($email_to, $subject, $message, $headers)){
        echo 'sent'; // we are sending this text to the ajax request telling it that the mail is sent..
    }else{
        echo 'failed';// ... or this one to tell it that it wasn't sent
    }

If you decide you don't want to code any of this or learn how it's made, feel free to download the source files from top of this post.

Zenbix Team