I am trying to add a small contact form in the sidebar of my WordPress site. I transferred my code from it’s original html file into the appropriate WordPress php files. The only thing that isn’t working is the contact form.
When I click on the send button it goes to the mailer.php file in the URL bar instead of sending the message.
This is the form:
<div class="w3-container w3-padding w3-white"> <h4 class="w3-left">Contact</h4> <br> <br> <div id="form-messages"> </div> <form id="ajax-contact" class="w3-container w3-margin" action="mailer.php" method="post"> <div class="w3-row w3-section field"><label for="name">Name:</label> <input id="name" class="w3-input w3-border" name="name" required="" type="text"></div> <div class="w3-row w3-section field"><label for="email">Email:</label> <input id="email" class="w3-input w3-border" name="email" required="" type="email"></div> <div class="w3-row w3-section field"><label for="message">Message:</label> <textarea id="message" class="w3-input w3-border" name="message" required=""></textarea></div> <div class="field"><button class="w3-button w3-blue w3-ripple w3-section" type="submit">Send</button></div> </form></div>
This is the mailer.php file:
<?php // My modifications to mailer script from: // http://blog.teamtreehouse.com/create-ajax-contact-form // Added input sanitizing to prevent injection // Only process POST reqeusts. if ($_SERVER["REQUEST_METHOD"] == "POST") { // Get the form fields and remove whitespace. $name = strip_tags(trim($_POST["name"])); $name = str_replace(array("r","n"),array(" "," "),$name); $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL); $message = trim($_POST["message"]); // Check that data was sent to the mailer. if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) { // Set a 400 (bad request) response code and exit. http_response_code(400); echo "Oops! There was a problem with your submission. Please complete the form and try again."; exit; } // Set the recipient email address. // FIXME: Update this to your desired email address. $recipient = "jerry@jerrylcrews.com"; // Set the email subject. $subject = "New contact from $name"; // Build the email content. $email_content = "Name: $namen"; $email_content .= "Email: $emailnn"; $email_content .= "Message:n$messagen"; // Build the email headers. $email_headers = "From: $name <$email>"; // Send the email. if (mail($recipient, $subject, $email_content, $email_headers)) { // Set a 200 (okay) response code. http_response_code(200); echo "Thank You! Your message has been sent."; } else { // Set a 500 (internal server error) response code. http_response_code(500); echo "Oops! Something went wrong and we couldn't send your message."; } } else { // Not a POST request, set a 403 (forbidden) response code. http_response_code(403); echo "There was a problem with your submission, please try again."; }
Advertisement
Answer
Add a function like this to the onClick event.
function sendmail() { var name = document.getElementById("name").value; var email = document.getElementById("email").value; var message = document.getElementById("message").value; var SendInfo= { "name":name, "email":email, "message":message }; $.ajax({ type: 'POST', url: 'mailer.php', data: SendInfo, contentType: "application/x-www-form-urlencoded; charset=UTF-8", traditional: true, success: function (data) { // Whatever } }); }