Simple Ajax Contact Form Using jQuery & PHP

Written by Saran on December 24, 2011, Updated September 19, 2018

In this tutorial, we will be creating a simple Ajax-based Contact form using jQuery and PHP. Why Ajax? because your visitors don't have to reload the page in order to send you email, they can simply click send button and the email gets sent instantly before their eyes, so it's just fantastic, no more page reloads! The tutorial is pretty basic, you should be able to pull it off if you are a bit familiar with HTML, PHP, and jQuery. Have a look at the picture below, this is how our contact form going to look at the end. We will have input fields as shown below, you can later add-remove other fields as per requirements of your HTML form.

Mark UP

Let's start coding our contact page, we start by adding an HTML form tag and some input fields, you can review the code below. A normal contact page should contain name, email, phone and message fields, you may add other fields as you like, such as check-boxes, radio buttons, select-boxes as per your requirements for the contact form.

HTML

<div class="form-style">
    <div class="form-style-heading">Please Contact Us</div>
    <div id="contact_results"></div>
    <div id="contact_body">
    <form action="contact_me.php" method="post" id="my_form" novalidate>
        <label><span>Name <span class="required">*</span></span>
            <input type="text" name="user_name" required class="input-field"/>
        </label>
        <label><span>Email <span class="required">*</span></span>
            <input type="email" name="user_email" required class="input-field"/>
        </label>
        <label><span>Phone</span>
            <input type="text" name="country_code" maxlength="4" placeholder="+91" required class="tel-number-field"/>—<input type="text" name="phone_number" maxlength="15" class="tel-number-field long" required/>
        </label>
            <label for="subject"><span>Regarding</span>
            <select name="subject" class="select-field" required>
            <option value="">---- Select ----</option>
            <option value="General Question">General Question</option>
            <option value="Advertise">Advertisement</option>
            <option value="Partnership">Partnership Oppertunity</option>
            </select>
        </label>
        <label for="field5"><span>Message <span class="required">*</span></span>
            <textarea name="message" id="message" class="textarea-field" required></textarea>
        </label>
        <label>
            <span> </span><input type="submit" id="submit_btn" value="Submit" />
        </label>
     </form>
    </div>
</div>

Now place this form in HTML document within the <body> part. Next, we will style this form using CSS.

Form Style

You can style your HTML form with CSS, you can either create a separate CSS or include the code within the <head></head> section of your HTML document. I personally use DevTool in chrome browser and Firebug in Firefox browser, these tools allow me to edit, debug, and monitor CSS, HTML and JavaScript in realtime. If you haven't used these tools before, you should definitely learn to use them, they are lifesavers.For this example, I've borrowed a HTML contact form layout from my other post here, which is included in downloadable file below, you can just download and play with form style using HTML editor until you are satisfied with the contact form look.

jQuery Ajax

Now it's time to write some jQuery code for the contact page. Before we start, make sure to included jQuery library within the <HEAD> section of your HTML document Or just before </body> tag, without this library jQuery code doesn't work.Right after the jQuery library script, we can start writing our jQuery code for the contact form. Let's start by opening <scrip> tag. You can see the code below:

JQUERY

<!-- include Google hosted jQuery Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Start jQuery code -->
<script type="text/javascript">
$("#my_form").submit(function(event){
	event.preventDefault(); //prevent default action 
	var proceed = true;
	var form = this;
	
	//simple validation at client's end
	//loop through each field and we simply change border color to red for invalid fields		
	$(form).find(':required').each(function(){
		$(this).css('border-color',''); 
		if(!$.trim($(this).val())){ //if this field is empty 
			$(this).css('border-color','red'); //change border color to red   
			proceed = false; //set do not proceed flag
		}
		//check invalid email
		var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
		if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
			$(this).css('border-color','red'); //change border color to red   
			proceed = false; //set do not proceed flag				
		}	

	}).keyup(function() { //reset previously set border colors on .keyup()
		$(this).css('border-color',''); 
	}).change(function() {  //for select box
		$(this).css('border-color',''); 
	});	
	
	if(proceed){ //everything looks good! proceed...
		//get input field values data to be sent to server
		var post_url = $(this).attr("action"); //get form action url
		var request_method = $(this).attr("method"); //get form GET/POST method
		var form_data = $(this).serialize(); //Encode form elements for submission
		
		//Ajax post data to server
		$.ajax({
			url : post_url,
			type: request_method,
			dataType : 'json',
			data : form_data
		})
		.done(function(response){ 
			if(response.type == 'error'){ //load json data from server and output message     
				output = '<div class="error">'+response.text+'</div>';
			}else{
				$(form)[0].reset(); //reset this form upon success
				output = '<div class="success">'+response.text+'</div>';
			}
			$("#contact_form #contact_results").html(output);
		});
	}
});
</script>

The above code is pretty self explanatory, when the submit button is clicked, instead of redirecting user to PHP page directly, we will validate all the input fields in same page with our input validation code. Upon error validation code will change input field border color to red. After that we prepare the data to be sent to the server (contact_me.php), and then we simply send the data using jQuery $.ajax method.Server should return JSON encoded string as Ajax response, which we will use to output success or error message to the user. The results will be displayed within the div element called #contact_results.

PHP Email

Below is our PHP code for the (contact_me.php), the file is needed to send email to the recipient, as well as respond back to user in the event of success or failure. It receives POST data from the contact page, its good idea to sanitize the data using PHP filter_var().

PHP

<?php
if($_POST)
{
	$to_email   	= "[email protected]"; //Recipient email, Replace with own email here
	$from_email     = 'noreply@your_domain.com'; //from mail, it is mandatory with some hosts and without it mail might endup in spam.
	
	//check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
		
		$output = json_encode(array( //create JSON data
			'type'=>'error', 
			'text' => 'Sorry Request must be Ajax POST'
		));
		die($output); //exit script outputting json data
    } 
	
	//Sanitize input data using PHP filter_var().
	$user_name		= filter_var($_POST["user_name"], FILTER_SANITIZE_STRING);
	$user_email		= filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
	$country_code	= filter_var($_POST["country_code"], FILTER_SANITIZE_NUMBER_INT);
	$phone_number	= filter_var($_POST["phone_number"], FILTER_SANITIZE_NUMBER_INT);
	$subject		= filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
	$message		= filter_var($_POST["msg"], FILTER_SANITIZE_STRING);
	
	//additional php validation
	if(strlen($user_name)<4){ // If length is less than 4 it will output JSON error.
		$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
		die($output);
	}
	if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
		$output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
		die($output);
	}
	if(!filter_var($country_code, FILTER_VALIDATE_INT)){ //check for valid numbers in country code field
		$output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in country code'));
		die($output);
	}
	if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field
		$output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number'));
		die($output);
	}
	if(strlen($subject)<3){ //check emtpy subject
		$output = json_encode(array('type'=>'error', 'text' => 'Subject is required'));
		die($output);
	}
	if(strlen($message)<3){ //check emtpy message
		$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
		die($output);
	}
	
	//email body
	$message_body = $message."\r\n\r\n-".$user_name."\r\nEmail : ".$user_email."\r\nPhone Number : (".$country_code.") ". $phone_number ;
	
	//proceed with PHP email.
	$headers = 'From: '. $from_email .'' . "\r\n" .
	'Reply-To: '.$user_email.'' . "\r\n" .
	'X-Mailer: PHP/' . phpversion();
	
	$send_mail = mail($to_email, $subject, $message_body, $headers);
	
	if(!$send_mail)
	{
		//If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
		$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
		die($output);
	}else{
		$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_name .' Thank you for your email'));
		die($output);
	}
}
?>

The additional server-side validation is a must in case of client-side validation faliure. Validation ensures valid user inputs and doesn't expose critical server errors to user. As you can see I have used PHP json_encode() to return JSON encoded data upon success or error, which will be parsed and displayed to user by jQuery code.That's it! we now have a neat looking Ajax based contact form. I hope this will help you create your own contact form. Or, you can just download the example files from link below and integrate it on your website right away.Next Ajax Contact Form with an Attachment (jQuery & PHP).

Download Demo

John
19th Dec 2022 at 6:20 pm
The FILTER_SANITIZE_STRING function seems to be dperecated from PHP8. Any suggestions for alternative coding? Thanks John
Shaun
13th Oct 2021 at 8:04 am
Hi Saran, The sample code could not be downloaded. After clicking on the "DOWNLOAD" button, the "Thank you for download..." message is shown but no file is downloaded and the webpage just shows "error"
- Saran Shaun
  25th Jan 2022 at 6:08 pm
  Please try again and if the problem persists, create 2 files, one HTML and the other PHP, copy the codes from this page and modify accordingly.
Ck
13th Sep 2019 at 5:13 pm
Hello, I use this script. But mail is not working..any suggestion to me.
Angelina Subbs
9th Sep 2019 at 12:17 pm
Hello We can help you with getting your website on the first page of Google. All our process is manual and white hat. We can also do a FREE NO OBLIGATION Analysis Report for your website. We look forward to hearing from you soon. ThanksAngelina
Ketan
10th Aug 2019 at 1:29 pm
Hi, How can i add my smtp details in above code.Please send me code with smtp details, my form not work without smtp details.Thanks Ketan