Skip to content

Instantly share code, notes, and snippets.

@spekkionu
Created November 19, 2015 03:54
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 spekkionu/0592cb75ddfe15cadbc2 to your computer and use it in GitHub Desktop.
Save spekkionu/0592cb75ddfe15cadbc2 to your computer and use it in GitHub Desktop.
Contact From with AJAX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Contact Us</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src='//www.google.com/recaptcha/api.js' async defer></script>
</head>
<body>
<form id="contact-form" action="sendmessage.php" method="post" accept-charset="utf-8" data-parsley-validate novalidate>
<fieldset>
<legend>Contact Us</legend>
<div class="row">
<label for="name"><span style="color:red;">*</span>Name: </label>
<input id="name" type="text" name="name" required data-parsley-required-message="You must enter your name.">
</div>
<div class="row">
<label for="email"><span style="color:red;">*</span>Email Address: </label>
<input id="email" type="email" name="email" required data-parsley-required-message="You must enter your email address." parsley-type-email-message="You must enter a valid email address.">
</div>
<div class="row">
<label for="message"><span style="color:red;">*</span>Message:</label>
<textarea id="message" name="message" required data-parsley-required-message="You must enter a message."></textarea>
</div>
<div class="g-recaptcha" data-sitekey="PUBLIC_RECAPTCHA_KEY"></div>
<div class="row">
<input type="submit" value="Submit">
</div>
</fieldset>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.2/parsley.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#contact-form').ajaxForm({
dataType: 'json',
success: function(response) {
grecaptcha.reset();
if(response.success) {
$('#contact-form').clearForm();
swal("Thank You!", "Your message has been sent!", "success")
} else if (response.errors) {
var messages = [];
$.each(response.errors, function(field, message) {
messages.push(message);
});
swal("Uh Oh!", messages.join("\n"), "error")
} else {
swal("Uh Oh!", "Failed to send your message!", "error")
}
}
});
});
</script>
</body>
</html>
<?php
/**
* Sends response as json
*
* @param boolean $successful Was the action successful
* @param array $errors An array of any errors that occurred
*/
function sendJsonResponse($successful = true, $errors = [])
{
header('Content-Type: application/json');
echo json_encode(['success' => $successful, 'errors' => $errors]);
exit;
}
// Load config file
$config = include(__DIR__ . '/config.php');
// Download from https://github.com/google/recaptcha
require(__DIR__ . '/recaptcha/src/autoload.php');
$recaptcha = new \ReCaptcha\ReCaptcha($config['recaptcha']['privatekey']);
$valid = true;
if (isset($_POST['g-recaptcha-response'])) {
$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
if (!$resp->isSuccess()) {
$valid = false;
$errors['captcha'] = "You must solve the CAPTCHA.";
}
$contact = filter_input_array(INPUT_POST, array(
'name' => FILTER_SANITIZE_STRING,
'email' => FILTER_SANITIZE_STRING,
'message' => FILTER_SANITIZE_STRING,
), true);
if (empty($contact['name'])) {
$valid = false;
$errors['name'] = "You must enter your name.";
}
if (empty($contact['email'])) {
$valid = false;
$errors['email'] = "You must enter your email address.";
} elseif (!filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL)) {
$valid = false;
$errors['email'] = "You must enter a valid email address.";
}
if (empty($contact['message'])) {
$valid = false;
$errors['message'] = "You must enter a message.";
}
if ($valid) {
// The email address the email will be sent to
$to = $config['contact']['to'];
// Set the from address for the email
$from = $config['contact']['from'];
// The email subject
$subject = "Contact Form Submission";
// Set the from and reply-to address for the email
$headers = "From: " . $from . "\r\n"
. "Reply-To: " . $contact['email'] . "\r\n"
. "X-Mailer: PHP/" . phpversion();
// Build the body of the email
$mailbody = "The contact form has been filled out.\n\n"
. "Name: " . $contact['name'] . "\n"
. "Email: " . $contact['email'] . "\n"
. "Message:\n" . $contact['message'];
// Send the email
mail($to, $subject, $mailbody, $headers);
// Go to the thank you page
sendJsonResponse(true);
} else {
sendJsonResponse(false, $errors);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment