Created
November 19, 2015 03:54
-
-
Save spekkionu/0592cb75ddfe15cadbc2 to your computer and use it in GitHub Desktop.
Contact From with AJAX
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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