So I am wanting to write a PHP contact form that will perform the following
Server side validation by the PHP script for greater security
Validation of Google ReCaptcha
Relying on Javascript for printing error messages and making CSS changes
The original contact form I have just prints the error messages but now I am looking to utilize JSON to pass the errors onto Javascript for printing.
What would be the best method to achieve this?
My Original PHP:
<?php
ob_start();
/* Put Here email where you will receive Contact message*/
$yourEmail = "email@email.com"; // <== Your Email
$secret = 'LALALALAALALALALALALA'; // <==Your recaptcha Privte Key
/*---------------------------------------*/
// ---------------------Start the recaptcha ------------------------------------//
if(isset($_POST['g-recaptcha-response']) && ($_POST['g-recaptcha-response'])){
session_start();
$ip = $_SERVER['REMOTE_ADDR'];
$captcha = $_POST['g-recaptcha-response'];
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$captcha&remoteip=$ip");
$result = json_decode($response,TRUE);
if($result['success'] == 1){
$_SESSION['result'] = $result['success'];
}
// --------------------End Of the Captcha Check------------------------- //
/////////////Showing all errors in array : DO NOT DELETE THIS
$formerrors = array();
///////////////////This Array will Hold all errors
// Start Captcha
if(!isset($_SESSION['result']) || $_SESSION['result'] == 0){
$formerrors[] = 'Captcha Error';
}
//end Captcha
// remove this to make name not required
if(empty($_POST['name'])){
$formerrors[] = "Name Cannot be empty";
}
// End name
// Remove this to make email not required
if(empty($_POST['email'])){
$formerrors[] = "Email Cannot be empty";
}
// End of email
// Remove this to make email not required
if(filter_var($_POST['email'],FILTER_VALIDATE_EMAIL) == FALSE){
$formerrors[] = "Make Sure Email is valid";
}
// End of email
// Remove this to make Phone not required
if(empty($_POST['phone'])){
$formerrors[] = "Phone Number Cannot be empty";
}
// End of Phone
// Remove this to make Phone not required
if(!is_numeric($_POST['phone'])){
$formerrors[] = "Phone Is not valid";
}
// End of Phone
// Remove this to make Message not required
if(empty($_POST['message'])){
$formerrors[] = "Message Cannot be empty";
}
// End Of Message
/* Your New inputs */
// CODE HERE
/* end of new Inputs*/
// End Showing Errors In Array
if(count($formerrors) == 0){
// Saving data in variable :
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
/* Your New inputs */
// $newinput = $_POST['new-input'] // new-input same as ID and ajax
/* end of new Inputs*/
//If No Error in the Array Start Sending the email
$to = $yourEmail; // Email to receive contacts
$from = $email;
$subject = 'Contact Form Email : ' . $title;
$message = '<style>
body{background-color:#fefefe}
.email-style {padding: 30px;background: #fafafa;font-size: 18px;border: 1px solid #ddd;width: 60%;margin: auto;}
p {padding: 15px 0px;}
</style>
<div class="email-style"><p> '.$title . '</p>
<p>Contact Full Name : '.$name . ' </p>
<p>Contact Email : '.$email . ' </p>
<p>Contact Phone Number : '.$phone . '</p>
<p>Message : '.$message . ' </p>
<p>Cheers,</p>
<p>'.$name.' Via Contact Form</p></div>';
$headers = "From: $from\n";
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";
if( mail($to, $message, $headers) ){
echo "sent";
session_unset();
session_destroy();
} else {
echo "The server failed to send the message. Please try again later.";
}
// If there are Errors in form :
}else{
//if there are Errors in the Array , Show errors in form
echo '<div id="contact-errors">';
foreach($formerrors as $error){
echo '<div class="errors-section mdl-cell mdl-cell--12-col">
<span class="mdl-chip mdl-chip--contact">
<span class="mdl-chip__contact mdl-color-text--white"><i class="material-icons error-form">error_outline</i></span>
<span class="mdl-chip__text">' . $error . '</span>
</span></div>';}
echo '</div>';}// End of errors here
}else{
echo 'Fill in Captcha ';
}
ob_flush();
?>
Javascript:
$(document).ready(function() {
$('#submit').click(function(e){
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "formmaster.php",
dataType: "json",
data: {name:name, email:email, phone:phone, message:message},
success : function(data){
if (data.code == "200"){
alert("Success: " +data.msg);
} else {
$(".display-error").html("<ul>"+data.msg+"</ul>");
$(".display-error").css("display","block");
}
}
});
});
});
But how do I do this properly with PHP performing the validation and then passing the messages to print to Javascript?