Ajax Contact Form Using jQuery and PHP

In this tutorial, we are going to see how to create ajax contact form using jquery php. We create simple HTML form and write some css to style it. Jquery and ajax is used to send request  to server side and get response.

This is a simple example of contact form which you can add to your site.

Adding a contact form will help visitors to contact website admin by submitting information without reloading a web page.

Website contact page will not be reload when visitors send their information using this contact form. AJAX is used here to post form data to server.

Live Demo

[sociallocker]Download Script [/sociallocker]

HTML

Write some html to create a contact form.

<div id="contact">

    <span id="errMsg"></span>
    <span id="status"></span>

    <form id="contactForm" method="POST">

        <div class="form_input">
            <label>Name </label>
            <input type="text" name="name" id="your_name">
        </div>

        <div class="form_input">
            <label>Email </label>
            <input type="email" name="email" id="your_email">
        </div>

        <div class="form_input">
            <label>Subject </label>
            <input type="text" name="subject" id="your_subject">
        </div>

        <div class="form_input">
            <label>Message </label>
            <textarea name="message" id="your_message"></textarea>
        </div>

        <div class="form_input">
            <input type="reset" id="reset" value="Reset">
            <input type="button" id="submit" value="Send Message">
        </div>
    </form>
</div> 

Styling the form using CSS

Write some css to style contact form.

#contact {
            width: 600px;
            padding: 10px;
            margin: 0 auto;
            display: block;
            font-size: 1.0em;
            border:2px solid;
        }	
        .form_input{
            padding:7px;
        }
         #errMsg {
            color: red;
        }

        .success {
            color: green;
        }
        .error {
            color: red;
        }

        #contact input, textarea {
            width: 270px;
            padding: 4px;
            color: #666;
            background: #f5f5f5;
            border: 1px solid #ccc;
            margin: 3px 0;
            font: 1.4em  Arial, sans-serif;
            webkit-border-radius: 5px;
        }

       label {
            display: inline-block;
            float: left;
            width: 55px;
            text-align: right;
            line-height: 26px;
            font-size: 1.5em;
            -webkit-border-radius: 5px;
            padding:5px;
        }

jQuery

First include jQuery library on page. Then write jquery and ajax to send request to server side and receive response too.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
    $(document).ready(function () {

        $("#submit").click(function () {

            var validInput = formcheck();

            var form_data = $("#contactForm").serialize();

            if (validInput)
            {
                $.ajax({
                    url: "send_enquiry.php",
                    type: "POST",
                    data: form_data,
                    success: function (response) {

                        $("#status").html(response);
                    }
                });
            }
        });
    });


    function formcheck()
    {
        var name = $('#your_name').val();
        var email = $('#your_email').val();
        var subject = $('#your_subject').val();
        var message = $('#your_message').val();

        if (name == '')
        {
            $("#errMsg").html("Enter your name");
            return false;
        }
        if (email == '')
        {
            $("#errMsg").html("Enter your email");
            return false;
        }

        if (!email.match(/^([w-.]+@([w-]+.)+[w-]{2,4})?$/))
        {
            $("#errMsg").html("Enter valid email");
            return false;
        }

        if (subject == '')
        {
            $("#errMsg").html("Write subject");
            return false;
        }

        if (message == '')
        {
            $("#errMsg").html("Write message");
            return false;
        }

       $("#errMsg").hide();
        return true;
    }
</script> 

Read Also:

Ajax Image Upload With jQuery and PHP

Dynamic Content Load Using jQuery and AJAX in PHP

So, you have learned how to create a simple contact form using jquery and AJAX in PHP. If you have any query regarding this article, feel free to comment.