Simple php contact form with ajax example

By | July 13, 2017
AJAX php Contact Form

In this article we will learn about the php contact form handling with ajax. Contact form plays a vital role for any website. An user can interact to the website administrator from contact form. Now we start creating HTML view for contact form with name, email, phone and message field.

First, Create a file named as contact.php and write the code below inside this file –

<form id="contact" name="contact" method="post">  
  <fieldset>  
    <label for="name" id="name">Name<span class="required">*</span></label>
    <input type="text" name="name" id="name" size="30" value="" required/>

    <label for="email" id="email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" size="30" value="" required/>

    <label for="phone" id="phone">Phone</label>
    <input type="text" name="phone" id="phone" size="30" value="" />

    <label for="Message" id="message">Message<span class="required">*</span></label>
    <textarea name="message" id="message" required></textarea>

    <label for="Captcha" id="captcha">Name the small house pet that says "<i>meow</i>"<span class="required">*</span></label>
    <input type="text" name="captcha" value="" required/>

    <input id="submit" type="button" onclick="processContact()" name="submit" value="Send" />  
  </fieldset>  
</form>


<div id="success">
  <span>
    <p>Your message was sent succssfully! I will be in touch as soon as I can.</p>
  </span>
</div>

<div id="error">
  <span>
    <p>Something went wrong, try refreshing and submitting the form again.</p>
  </span>
</div>

In this contact.php file we need to add some jquery script to handle ajax request. As we all know that jquery code needs jquery library so Firstly we will add jquery library and then write a ajax handling function as given below –

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            function processContact(){
      $.ajax({
                type:"POST",
                data: $(form).serialize(),
                url:"process_contact.php",
                success: function() {
                    $('#contact :input').attr('disabled', 'disabled');
                    $('#contact').fadeTo( "slow", 0.15, function() {
                        $(this).find(':input').attr('disabled', 'disabled');
                        $(this).find('label').css('cursor','default');
                        $('#success').fadeIn();
                    });
                },
                error: function() {
                    $('#contact').fadeTo( "slow", 0.15, function() {
                        $('#error').fadeIn();
                    });
                }
            });
  }

Now we will create process_contact.php file to handle form data filled by a user. And ajax will send all form data to this page and we will use simple php mail function to send these data to the website’s administrator’s email id.

<?php
    $to = "mail@yourdomain.com"; //Email id on which we want to send form data
    $from = $_REQUEST['email']; 
    $name = $_REQUEST['name']; 
    $headers = "From: $from"; 
    $subject = "Suject line of the mail"; 
    $fields = array(); 
    $fields{"name"} = "name"; 
    $fields{"email"} = "email"; 
    $fields{"phone"} = "phone"; 
    $fields{"message"} = "message";
    $body = "Here is what was sent:\n\n"; foreach($fields as $a => $b){   $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }
    $send = mail($to, $subject, $body, $headers);
?>

After creating these files with the code given when to run contact.php page will be able to see a contact form and when you fill that form and click on the submit button form value will be submitted on the server without refeshing the page so that is ajax. Now you have created ajax contact form successfully.