I have a contact form on a landing page that I want to send through with AJAX & PHP but for some reason, the variables are not passing. I am getting the email but the variables are blank. You can go to removed to see the text site, it's not set up with the database on this site though, so if you try to click through nothing will happen.
Does anyone have any idea what could be causing my form to not cooperate?
The HTML
<form role="form" id="form" name="form" action="submit.php" method="post">
<div class="form-group has-feedback">
<input type="text" class="form-control input-lg" id="name" name="name" placeholder="Full Name" />
<span class="help-block" style="display: none;">Please enter your full name.</span>
</div>
<div class="form-group has-feedback">
<input type="tel" class="form-control input-lg optional" id="phone" name="phone" placeholder="Phone (Optional)"/>
<span class="help-block" style="display: none;">Please enter a valid phone number.</span>
</div>
<div class="form-group has-feedback">
<input type="email" class="form-control input-lg" id="email" name="email" placeholder="Email" />
<span class="help-block" style="display: none;">Please enter a valid email address.</span>
</div>
<div class="form-group has-feedback">
<textarea rows="5" cols="30" class="form-control input-lg" id="message" name="message" placeholder="Message" ></textarea>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group has-feedback">
<label>
<input type="checkbox" class="form-control input-sm optional" id="newsletter" name="newsletter" checked="checked">
Opt-in to our newsletters to stay up-to-date with the latest information. </label>
<span class="help-block" style="display: none;">Would you like to sign up for our newsletter?</span>
</div>
<div class="form-group has-feedback">
<button type="submit" id="feedbackSubmit" class="btn btn-success btn-lg pull-right" data-loading-text="Sending..." style="display: block; margin-top: 10px;">Submit</button>
</div>
</form>
The Script
//*Form*//
$('document').ready(function(){
$('#form').validate({
rules:{
"name":{
required:true,
maxlength:40
},
"phone":{
required:false
},
"email":{
required:true,
email:true,
maxlength:100
},
"message":{
required:false
},
"newsletter":{
required:false
}},
messages:{
"name":{
required:"This field is required"
},
"phone":{
required:"This field is required"
},
"email":{
required:"This field is required",
email:"Please enter a valid email address"
},
"message":{
required:"This field is required"
},
"newsletter":{
required:"This field is required"
}},
submitHandler: function(form){
$.ajax ({
type: "POST",
url: "submit.php",
dataType: "json",
data:{"name":$("#name").text(),"phone":$("#phone").text(),"email":$("#email").text(),"message":$("message").text(),"newsletter":$("#newsletter").checked},
target: '#preview',
success: function(Result) {
alert(Result[0]);
$('#formbox').slideUp('fast');
$('#success').html();
$('#success').show();
},
failure: function (arg1, arg2) {
alert(arg1 + '\n\n' + arg2);
},
error: function (Result, Error, arg3, arg4) {
alert(Result + '\n\n' + Error + '\n\n' + arg3 + '\n\n' + arg4);
}
});
}
});
});
</script>
The PHP
<?php
require_once 'db.php';
header('Content-Type: application/json');
/*
$checkemail = $_POST['email'];
if (filter_var($checkemail, FILTER_VALIDATE_EMAIL)) { echo ""; }
else { die ("Invalid email, form processing has not completed.");
}
*/
// check email validity. clean name, phone, and message.
$name = htmlspecialchars(filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING));
$email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
$phone = htmlspecialchars(filter_input(INPUT_POST, 'phone', FILTER_SANITIZE_STRING));
$message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$newsletter = htmlspecialchars(filter_input(INPUT_POST, 'newsletter', FILTER_SANITIZE_STRING));
// commit to database
require_once 'db.php';
$stmt = $pdo->prepare("INSERT INTO contact (name, phone, email, message, newsletter) VALUES (?,?,?,?,?)");
$stmt->bindParam(1, $name, PDO::PARAM_STR, 50);
$stmt->bindParam(3, $phone, PDO::PARAM_STR, 50);
$stmt->bindParam(2, $email, PDO::PARAM_STR, 50);
$stmt->bindParam(4, $message);
$stmt->bindParam(5, $newsletter, PDO::PARAM_STR, 64);
$pdo->beginTransaction();
$stmt->execute();
$pdo->commit();
//form email
$today = date("Y-m-j");
$body = "";
$body .= "Name: $name\n";
$body .= "Email: $email\n";
$body .= "Phone: $phone\n";
$body .= "Message: $message\n";
$body .= "Newsletter: $newsletter\n";
//send email 'change me to clients address'
mail("angela#etvsoftware.com","Dogwood Hills Gun Club Contact Form",$body,"angela#etvsoftware.com");
$stmt = null;
$pdo = null;
#What we say when everything goes right
$result = array(
"message" => "Your message has been sent. We will respond to you as soon as possible."
);
print json_encode($result);
?>
Instead of:
data:{"name":$("#name").text(),"phone":$("#phone").text(),"email":$("#email").text(),"message":$("message").text(),"newsletter":$("#newsletter").checked}
You should consider something cleaner and more flexible using serialize() like that:
data: $('#form').serialize()
This will send all the form fields in the POST request with your ajax call. If this is not working, Please try to var_dump($_POST) to make sure what you are getting.
Related
First - Im not an expert in PHP, but just know how to make some basic changes within contact form using PHP.
On this contact form when I filled in the required textfields and hit the submit button it redirects to the contact.php with a Contact form successfully submitted. Thank you, I will get back to you soon! message instead of displaying the message inside the <div class="messages"></div> on request-interpreter.html
HTML (form)
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div> <----- displays alert messages
<div class="controls">
<div class="row-form">
<div class="col-md-6">
<p class="text-req"><strong>*</strong> These fields are required. </p>
</div>
</div>
<div class="row-form">
<div class="col-md-6">
<div class="form-group">
<input id="form_name" type="text" name="name" class="form-control" placeholder="First name *" required="required" data-error="First name is required." tabindex="1">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="form_email" type="email" name="email" class="form-control" placeholder="Email *" required="required" data-error="Your email address is required." tabindex="3">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row-form">
<div class="col-md-6">
<div class="form-group">
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Last name *" required="required" data-error="Last name is required." tabindex="2">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Phone *" required="required" data-error="Your phone number is required." tabindex="4">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row-form">
<div class="col-md-12">
<div class="form-group">
<textarea id="form_message" name="message" class="form-control" placeholder="Leave a message for us *" rows="4" required="required" data-error="Your important message is required." tabindex="5"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<input type="submit" class="btn btn-success btn-send" value="Send Request" tabindex="6">
</div>
</div>
</div>
</form>
contact.php
<?php
// an email address that will be in the From field of the email.
$from = 'Contact form';
// an email address that will receive the email with the output of the form
$sendTo = $_POST['email'];
// subject of the email
$subject = 'New message from contact form';
// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message');
// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';
// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';
// if you are not debugging and don't need error reporting, turn this off by
error_reporting(0);
error_reporting(E_ALL & ~E_NOTICE);
try
{
if(count($_POST) == 0) throw new \Exception('Form is empty');
$emailText = "You have a new message from your contact form\n=============================\n";
foreach ($_POST as $key => $value) {
// If the field exists in the $fields array, include it in the email
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
// All the neccessary headers for the email.
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
// Send email
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
// else just display the message
else {
echo $responseArray['message'];
}
Alert message AJAX
$(function () {
// init the validator
// validator files are included in the download package
// otherwise download from http://1000hz.github.io/bootstrap-validator
$('#contact-form').validator();
// when the form is submitted
$('#contact-form').on('submit', function (e) {
// if the validator does not prevent form submit
if (e.isDefaultPrevented()) {
var url = "contact.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox); <------ it should display the alert message, but its not working.
// empty the form
$('#contact-form')[0].reset();
}
}
});
}
})
});
You are echoing it (printing it) instead of returning the response, change it like this in your Contact.php
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
return $encoded;
}
// else just display the message
else {
return $responseArray['message'];
}
I am trying to add one more input (called servizio) in this contact form but on submit I get an error message in the console 'Uncaught ReferenceError: servzio is not defined' even if it is defined in both JS and PHP file.
Can you please recognise if I am doing something wrong? Thanks in advance for your help
File contact.js
(function($){
$(document).ready(function() {
/* ---------------------------------------------- /*
* Contact form ajax
/* ---------------------------------------------- */
$('#contact-form').find('input,textarea').jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault();
var submit = $('#contact-form submit');
var ajaxResponse = $('#contact-response');
var name = $("input#cname").val();
var email = $("input#cemail").val();
var servizio = $("input#cservizio").val();
var message = $("textarea#cmessage").val();
$.ajax({
type: 'POST',
url: 'assets/php/contact.php',
dataType: 'json',
data: {
name: name,
email: email,
servzio: servzio,
message: message,
},
cache: false,
beforeSend: function(result) {
submit.empty();
submit.append('<i class="fa fa-cog fa-spin"></i> Wait...');
},
success: function(result) {
if(result.sendstatus == 1) {
ajaxResponse.html(result.message);
$form.fadeOut(500);
} else {
ajaxResponse.html(result.message);
}
}
});
}
});
});
This is the File contact.php
<?php
// Mail settings
$to = "emiliano#dsasa.agency";
$subject = "asdsa's";
// You can put here your email
$header = "From: emiliano#dsadsa.agency\r\n";
$header.= "MIME-Version: 1.0\r\n";
$header.= "Content-Type: text/plain; charset=utf-8\r\n";
$header.= "X-Priority: 1\r\n";
if ( isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["servizio"]) && isset($_POST["message"])) {
$content = "Name: " . $_POST["name"] . "\r\n";
$content .= "Email: " . $_POST["email"] . "\r\n";
$content .= "servizio: " . $_POST["servizio"]; . "\r\n"
$content .= "Message: " . "\r\n" . $_POST["message"];
if (mail($to, $subject, $content, $header)) {
$result = array(
"message" => "Thanks for contacting us.",
"sendstatus" => 1
);
echo json_encode($result);
} else {
$result = array(
"message" => "Sorry, something is wrong.",
"sendstatus" => 0
);
echo json_encode($result);
}
}
?>
This is the html
<form id="contact-form" role="form" novalidate="">
<div class="form-group">
<label class="sr-only" for="cname">Name</label>
<input type="text" id="cname" class="form-control" name="cname" placeholder="Name*" required="" data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<label class="sr-only" for="cservizio">1 Servizio Video o 2 Servizio Foto</label>
<input type="text" id="cservizio" name="cservizio" class="form-control" placeholder="Indica il numero corrispondente al servizio">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<label class="sr-only" for="cemail">Your Email</label>
<input type="email" id="cemail" name="cemail" class="form-control" placeholder="Your E-mail*" required="" data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<textarea class="form-control" id="cmessage" name="cmessage" rows="7" placeholder="Message*" required="" data-validation-required-message="Please enter your message."></textarea>
<p class="help-block text-danger"></p>
</div>
<div class="text-center">
<button type="submit" class="btn btn-block btn-round btn-d">Submit</button>
</div>
</form>
<!-- Ajax response -->
<div id="contact-response" class="ajax-response font-alt"></div>
I have a fully working html contact page, with a php email script, with recaptcha 2 - all of these work perfectly.
Previously, the form redirected to the php file, which showed a basic success message. Again, this worked fine.
I've tried incorporating a contact.js file onto the page, and the form submission still works, but the success message in the PHP script isn't being displayed.
I'm an idiot when it comes to JS so that's probably the issue, but any help would be gratefully received.
Here's the HTML, PHP and JS:
<form id="contact-form" method="post" action="#" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your name *" required="required" data-error="Name is required">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email address *" required="required" data-error="A valid email is required">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_phone">Telephone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter a contact telephone number (optional)">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Please enter your message *" rows="4" required="required" data-error="Please enter your message"></textarea>
<div class="help-block with-errors"></div>
</div>
<p><div class="g-recaptcha" data-sitekey="xxxxxx"></div></p>
<input type="submit" class="btn btn-success btn-send" value="Submit" onClick="window.location = '#formstart'"></p>
<br><p class="text-muted"><strong>*</strong> These fields are required.</p>
</form>
PHP:
<?php
$sendTo = "email#email.com";
$subject = "New message from email.com";
$headers .= 'From: <enquiries#email.com' . "\r\n";
$name = #$_POST['name'];
$phone = #$_POST['phone'];
$email = #$_POST['email'];
$message = #$_POST['message'];
$okMessage = 'Thank you for your message. One of the team will be in touch as soon as possible.';
$errorMessage = 'There was an error while submitting the form. Please try again later';$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey = "XXXXX";
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
$emailText = "Name: $name \n Phone: $phone \n Email: $email \n Message: $message";
if (isset($data->success) AND $data->success==true) {
mail($sendTo, $subject, $emailText, $headers);
$responseArray = $okMessage;
}
else
{
//verification failed
$responseArray = $errorMessage;
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray;
}
JS:
$(function () {
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
grecaptcha.reset();
}
}
});
return false;
}
})
});
Any help greatly appreciated!
Would:
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
grecaptcha.reset();
}
this not clear the message you are trying to invoke?
since the class messages is the first child on "#contact-form" would it not always reset the messages you put in immediately, after putting in the data in the line before?
Also, why aren't you just toggling a modal or a popup instead of injecting an entire div dynamically? this seems like a lot of work, for something that could be done more easily with pre-loaded html? Or am I missing something obvious?
I am assuming of course that the alert, is the "success" message. But why call it an alert in your code? Why not call it successmessage? Using proper terminology will help yourself and others read your code later ;)
There is an option in the ajax method to have seperate functions for failures and successes.
I hope I helped, even if I am wrong about why you don't see your text.
try adding
if (messageAlert && messageText) {
alert("Test");
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
grecaptcha.reset();
}
I'm new in ajax/js/php.
I have a small contact form
<form id="contact-form" method="post" action="process.php" role="form">
<div class="messages"></div>
<div class="form-group">
<label for="form_name">First name *</label>
<input id="form_firstname" type="text" name="name" class="form-control" placeholder="Please enter your first name *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_lastname">Last name *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your last name *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
<div class="help-block with-errors"></div>
</div>
<p><strong>*</strong> These fields are required.</p>
</form>
<button type="submit" class="btn btn-info" value="Create Account">Create Account</button>
with small js and php
script.js
$("#contact-form").submit(function(event) {
// cancels the form submission
"use strict";
event.preventDefault();
submitForm();
});
function submitForm() {
// Initiate Variables With Form Content
"use strict";
var firstname = $("#form_firstname").val();
var lastname = $("#form_lastname").val();
var email = $("#email").val();
var phone = $("#phone").val();
$.ajax({
type: "POST",
url: "process.php",
data: "name=" + firstname + lastname + "&email=" + email + "&phone=" + phone,
});
}
process.php
<?php
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$EmailTo = "name#email.com";
$Subject = "New Message Received";
// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Phone: ";
$Body .= $phone;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success){
echo "success";
} else {
echo "invalid";
}
?>
for some reason it's not working on way I would like to, not sending me emails (i know to put my email in $Emailto).
Often I was using only php form but I would like to avoid reloading page. I try to understand where I'm making error.
$('#contact-form').submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "process.php",
data:$(this).serialize(), //get form values
}).done(function(data){
console.log(data); // will contain success or invalid
});
});
Change your submit function to:
$(document).ready(function() {
$("#contact-form").submit(function(event){
"use strict";
event.preventDefault(); // cancels the form submission
var firstname = $("#form_firstname").val();
var lastname = $("#form_lastname").val();
var email = $("#form_email").val();
var phone = $("#form_phone").val();
$.ajax({
type: "POST",
url: "process.php",
data: {
name: firstname + lastname, //or firstname + " " + lastname if you want the first and lastname to be separated by a space
email: email,
phone: phone
}
}).done(function(data){
console.log(data); // will contain success or invalid
});
});
});
The values you were trying to get for email and phone were not properly defined (they were lacking the form_).
And you cannot use a querystring with a POST type only when using a GET type.
Wish you all a happy 2015!
I have a simple contact us php form. I am validating it with parsley.js. The validation works fine but I am receiving a lot of spam mails.
I believe if I can force the form to be submitted only if Jquery is enabled, then it should solve my problem (right?).
I'm not an expert with PhP/ Jquery and any help will be appreciated.
Here is my PHP code
<?php
// Define Variables i.e. name tag, as per form and set to empty
$contact_name = $contact_email = $contact_phone = $contact_message = "";
// Sanitize data and use friendly names
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["contact_name"]);
$email = test_input($_POST["contact_email"]);
$phone = test_input($_POST["contact_phone"]);
$message = test_input($_POST["contact_message"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
// Set values
$to = 'info#foryourservice.in';
$subject = 'New Message from Website';
$headers = 'From: info#domainname.com' . "\r\n" .
'Reply-To: info#domainname.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
// Set Email content
$emailcontent = "A new message has been submitted from the website.
\n
Name : $name
Email : $email
Phone : $phone
Message : $message";
// Mail function
$send_contact=mail($to,$subject,$emailcontent,$headers);
if($send_contact){
header('Location: index.php#contactusform');
}
else {
echo "<script type='text/javascript'>alert('We encountered an ERROR! Please go back and try again.');</script>";
}
?>
Here is my HTML ( Im using Twitter Bootstrap)
<form role="form" method="POST" action="contactusform.php" id="contactusform" data-parsley-validate>
<div class="col-xs-6">
<div class="form-group" style="margin-bottom: -5px">
<label for="input1"></label>
<input type="text" name="contact_name" class="form-control" id="input1" placeholder="Name*" required data-parsley-required-message="Please enter your name">
</div>
<div class="form-group" style="margin-bottom: -5px">
<label for="input2"></label>
<input type="email" name="contact_email" class="form-control" id="input2" placeholder="Email Address*" data-parsley-trigger="change" required data-parsley-required-message="Please enter a valid Email address">
</div>
<div class="form-group" style="margin-bottom: -5px">
<label for="input3"></label>
<input type="tel" name="contact_phone" class="form-control" id="input3" placeholder="Phone Number*" required data-parsley-type="digits" data-parsley-minlength="10" data-parsley-maxlength="10" data-parsley-required-message="Please enter a 10 digit number">
</div>
<br>
<div class="form-group">
<button type="submit" id="contactbutton" class="btn btn-primary" style="background-color: #A8B645; border-color: transparent">Submit</button>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="input4"></label>
<textarea name="contact_message" class="form-control" rows="7" id="input4" placeholder="Message*" required required data-parsley-required-message="Say something!"></textarea>
</div>
</div>
</form>
This is what the Spam Email looks like :
A new message has been submitted from the website.
Name : お買い得アナスイ ミロード大壳り出しランキング
Email : rsilau#gmail.com
Phone : お買い得アナスイ ミロード大壳り出しランキング
Message : Shoppers takes the boast on bag
お買い得アナスイ ミロード大壳り出しランキング http://www.frkapaun.org/dyqfmnwg/ysl-annasuixmraAekm.asp
Add a hidden field to your form:
<input type="hidden" value="0" id="botcheck" name="botcheck" />
Then with jQuery set the value to 1:
$("#botcheck").val("1");
Then server-side check the value of $_POST["botcheck"].
You might want to check if your form is submitted using ajax:
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//Process form here
}
For further explanation