Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
</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";
}
?>
@profuzion

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.