Skip to content

Instantly share code, notes, and snippets.

Last active March 11, 2021 20:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rajuahmmed/cdcacbc335bbbc9fb1253e79ea618021 to your computer and use it in GitHub Desktop.
Save rajuahmmed/cdcacbc335bbbc9fb1253e79ea618021 to your computer and use it in GitHub Desktop.
<!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>
<button type="submit" class="btn btn-primary">Submit</button>
<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";
Copy link

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?

Copy link

Yeah where is the submit? Test for dummies?

Copy link

KazeroG commented Mar 11, 2021

UP !

The AJAX function doesn't work on mobile version !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment