How to create ajax contact form with php?

Every business website needs working contact form on their website. Standard contact form works fine but it’s require loading. So with ajax we can make it more cool and fast. Nowadays most of the business site use ajax contact form for their website.

In this tutorial, you are going to learn how to create ajax contact form with PHP? For this tutorial you need:

Server with php (local server is OK)
Server should support mail sending feature
A Text Editor (like Sublime Text, Atom, etc.)
Current version of bootstrap

Before we should start we need to know some F.A.Q. about ajax php contact form.

What is ajax contact form?

Standard contact form send request to server by loading form. But Ajax send the request in background without loading page. So it’s fast and cool.

How it’s work?

Now we know ajax send request in background. But we need a clear concept how they send request and how it’s work. Ajax request is done by JavaScript and it’s come with browser called XMLHttpRequest. When a user click on submit button, JS ajax action called and it’s send request to server. Now server Process it and get back to browser.

Diagram of Ajax for php ajax contact form

Now we know about ajax how it’s work and why we need ajax. Let’s create simple ajax contact form with php.

Creating a simple ajax contact form

Now finally we will create ajax php contact form. So let’s start now.

The basic file structure

contact.html
contact.php
contact.js

Now first step is creating contact.html file. Add form tag with ID ajax-contact-form, method with post and action to contact.php.

<form id="ajax-contact-form" method="post" action="contact.php">
    <!--// Form input fields here //-->
</form>

Now add input fields. All type of input field will work with this ajax PHP contact form. Let’s add input fields. As of bootstrap 3, you need to wrap input field and label inside of .form-group. Below the example of an input field.

<div class="form-group">
    <label for="name">Your Name</label>
    <input type="text" class="form-control" id="name" name="name" placeholder="Full Name">
</div>

Need only name attribute value for ajax contact form php. The name attribute should be unique for every input field like for Name field name, for Email field email, etc.

Full form HTML code:

<form id="ajax-contact-form" method="post" action="contact.php">
	<div class="form-group">
		<label for="name">Your Name</label>
		<input type="text" class="form-control" id="name" name="name" placeholder="Full Name">
	</div>
	<div class="form-group">
		<label for="email">Your Email</label>
		<input type="text" class="form-control" id="email" name="email" placeholder="Full Name">
	</div>
	<div class="form-group">
		<label for="subject">Your Subject</label>
		<input type="text" class="form-control" id="subject" name="subject" placeholder="Full Name">
	</div>
	<div class="form-group">
		<label for="message">Your Message</label>
		<textarea class="form-control" id="message" name="message" placeholder="Full Name"></textarea>
	</div>
</form>

Add form submit action message for user which will be show success and error message.

<div id="form-messages"></div>

Now lets create contact.js file for ajax action. Just add those code to contact.js file.

(function($) {
    // Select the form and form message
    var form = $('#ajax-contact-form'),
        form_messages = $('#form-messages');
        
    // Action at on submit event
    $(form).on('submit', function(e) {
        e.preventDefault(); // Stop browser loading
        
        // Get form data
        var form_data = $(form).serialize();
        
        // Send Ajax Request
        var the_request = $.ajax({
            type: 'POST', // Request Type POST, GET, etc.
            url: "contact.php",
            data: form_data
        });
        
        // At success
        the_request.done(function(data){
            form_messages.text("Success: "+data);
            
            // Do other things at success
        });
        
        // At error
        the_request.done(function(){
            form_messages.text("Error: "+data);
            
            // Do other things at fails
        });
    });
})(jQuery);

Now finally we will create contact.php file for our ajax contact form php. Just add these php code.

<?php
// Proccess at only POST metheod
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // name of sender
    $name = strip_tags(trim($_POST["name"]));
    
    // Email of sender
    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    
    // Sender subject
    $subject = strip_tags(trim($_POST["subject"]));
    
    // Sender Message
    $message = trim($_POST["message"]);
    
    // Your email where this email will be sent
    $your_email = "[email protected]";
    //Your site name for identify 
    $your_site_name = "Example";
    
    // Build email subject
    $email_subject = "[{$your_site_name}] New Message by {$name}";
    
    // Build Email Content
    $email_content = "Name: {$name}\n";
    $email_content .= "Email: {$email}\n";
    $email_content .= "Subject: {$subject}\n";
    $email_content .= "Message: {$message}\n";
    
    // Build email headers
    $email_headers = "From: {$name} <{$email}>";
    
    // Send email
    $send_email = mail($your_email, $email_subject, $email_content, $email_headers);
    
    // Check email sent or not
    if($send_email){
        // Send a 200 response code.
        http_response_code(200);
        echo "Thank You! Your message has been sent."; 
    } else {
        // Send a 500 response code.
        http_response_code(500);
        echo "Oops! we couldn't send your message. Please try again later";
    }
} else {
    // Send 403 response code
    http_response_code(403);
    echo "Oops! Submition problem. Please try again later";
}
?>

Get full code of our ajax contact form php or download it from GitHub Download Now

How to create ajax contact form with php?

What is ajax contact form?

How it’s work?

Creating a simple ajax contact form

Subscribe For More!

Leave a Reply Cancel reply