rajuahmmed/contact.html

## contact.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Ajax Contact with php by CantoThemes</title>

        <!-- Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    </head>
    </body>
        <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>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <div id="form-messages"></div>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="contact.js"></script>
    </body>
</html>

## contact.js
(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);

## contact.php
<?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 = "example@example.com";
    //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";
}
?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>Ajax Contact with php by CantoThemes</title>

	<!-- Bootstrap -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	</head>
	</body>
	<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>
	<button type="submit" class="btn btn-primary">Submit</button>
	</form>
	<div id="form-messages"></div>
	<!-- jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="contact.js"></script>
	</body>
	</html>
	(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);
	<?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 = "example@example.com";
	//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";
	}
	?>