Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html lang="en">
<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="" rel="stylesheet">
<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 class="form-group">
<label for="email">Your Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Full Name">
<div class="form-group">
<label for="subject">Your Subject</label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="Full Name">
<div class="form-group">
<label for="message">Your Message</label>
<textarea class="form-control" id="message" name="message" placeholder="Full Name"></textarea>
<div id="form-messages"></div>
<!-- jQuery -->
<script src=""></script>
<script src="contact.js"></script>
(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
form_messages.text("Success: "+data);
// Do other things at success
// At error
form_messages.text("Error: "+data);
// Do other things at fails
// Proccess at only POST metheod
// 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 = "";
//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
// Send a 200 response code.
echo "Thank You! Your message has been sent.";
} else {
// Send a 500 response code.
echo "Oops! we couldn't send your message. Please try again later";
} else {
// Send 403 response code
echo "Oops! Submition problem. Please try again later";

This comment has been minimized.

Copy link

profuzion commented Jan 24, 2018

Hey Everyone,

Is it just me, or shouldn't there be a "submit" button in this form?

Also, can't we get the SUCCESS message to be at the bottom of the form, and not in a new window with no style?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.