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>
<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";
}
?>
@profuzion

This comment has been minimized.

Copy link

@profuzion 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?

@helenashwarts

This comment has been minimized.

Copy link

@helenashwarts helenashwarts commented Oct 9, 2020

Yeah where is the submit? Test for dummies?

@KazeroG

This comment has been minimized.

Copy link

@KazeroG 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