Jump to content

Ajax Contact Form


TylerA

Recommended Posts

I have this contact form, that functions. However, I am concerned because you are able to directly access "sendmessage.php" and it emails a blank message to my inbox. I am having trouble addressing the issue. Should I restrict the file to ajax requests? If so, how?

 

You can see it in action at tylerabell.com

 

 

HTML file

<!-- Trigger Link -->
<a class="modalbox last" href="#inline">Contact</a></div>

<!-- hidden inline form -->
<div id="inline">
<form id="contact" name="contact" action="#" method="post">
<div id="your_name">
<label for="name">Name</label>
<input type="name" id="name" name="name" class="txt">
</div>
<div id="your_email">
<label for="email">Email</label>
<input type="email" id="email" name="email" class="txt">
</div>
<div id="your_message">
<label for="message">Message</label>
<textarea id="message" name="message" class="txtarea"></textarea>
</div>
<button id="send">Send Message</button>
</form>
</div>

 

Script using jQuery:

// basic fancybox setup
function validateEmail(email) {
var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}


$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });



$("#send").on("click", function(){
var emailval = $("#email").val();
var messageval = $("#message").val();
var messagelen = messageval.length;
var nameval = $("#name").val();
var namelen = nameval.length;
var mailvalid = validateEmail(emailval);

if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}

if(messagelen < 4) {
$("#message").addClass("error");
}
else if(messagelen >= 4){
$("#message").removeClass("error");
}


if(namelen < 2) {
$("#name").addClass("error");
}
else if(namelen >= 2){
$("#name").removeClass("error");
}

if(mailvalid == true && messagelen >= 4 && namelen >= 2) {
// if both validate we attempt to send the e-mail
// first we hide the submit btn so the user doesnt click twice
$("#send").replaceWith("<p>Sending your message...</p>");

$.ajax({
 type: 'POST',
 url: 'sendmessage.php',
 data: $("#contact").serialize(),
 success: function(data) {
 if(data == "true") {
 $("#contact").fadeOut("slow", function(){
 $(this).before("<p>Success, Your message has been sent.</p>");
 setTimeout("$.fancybox.close()", 1000);
 });
 }
 }
});
}
});
});

 

 

PHP "Sendmessage.php"

<?php
$sendto = "[email protected]";
$usermail = $_POST['email'];
$username = $_POST['name'];
$content = nl2br($_POST['message']);
$subject = "Contact Form Submission";
$ipaddress = get_ip_address();
$host = gethostbyaddr($_SERVER['REMOTE_ADDR']);
$agent = $_SERVER['HTTP_USER_AGENT'];
$date = date('l, F, d Y');
$time = date('g:i:s a');
$headers = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";


$msg = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><title></title><XSSCleaned_tag http-equiv='Content-Type' content='text/html; charset=utf-8' /><XSSCleaned_tag http-equiv='Content-Language' content='en-us' /></head><body title='278582'><div style='font-family:'Lucida Grande','Lucida Sans Unicode', Tahoma, sans-serif;'><table cellspacing='0' style='width: 731px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, sans-serif; '><div><p>This message was submitted<strong> {$date} at {$time} </strong>from the contact form on <b><a href='http://tylerabell.com'>tylerabell.com</a></b></p></div><tbody><tr><td class='h2' style='width: 721px; font-weight: normal; line-height: 42px; font-size: 22px; clear: left; padding: 0px 10px 7px 0px; '>Contact Form Submission</td></tr></tbody></table><table class='readonly' cellspacing='0' cellpadding='0' style='width:100%;border-bottom:1px solid #eee;font-size:12px;line-height:135%;font-family:'Lucida Grande','Lucida Sans Unicode', Tahoma, sans-serif'>
<tr style='background-color:#F5F5F5'>
<th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Name</th>
<td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
<span>{$username}</span>
</td>
</tr>


<tr style='background-color:#FFFFFF'>
<th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Email</th>
<td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
<span><a href='mailto:{$usermail}'>{$usermail}</a></span>
</td>
</tr>


<tr style='background-color:#FFFFFF'>
<th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Message</th>
</tr>

<tr style='background-color:#FFFFFF'>
<th style='vertical-align:top;color:#222;width:100%;text-align:left;padding:7px 9px 7px 9px;'><div>{$content}</div></th>
</tr></table><br><br><table cellspacing='0' style='width: 731px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, sans-serif; '><tbody><tr><td class='h2' style='width: 721px; font-weight: normal; line-height: 42px; font-size: 22px; clear: left; padding: 0px 10px 7px 0px; '>Additional Information</td></tr></tbody></table>
<table class='readonly' cellspacing='0' cellpadding='0' style='width:100%;border-bottom:1px solid #eee;font-size:12px;line-height:135%;font-family:'Lucida Grande','Lucida Sans Unicode', Tahoma, sans-serif'>
<tr style='background-color:#F5F5F5'>
<th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>IP Address</th>
<td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
<span>{$ipaddress}</span>
</td>
</tr>


<tr style='background-color:#FFFFFF'>
<th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Host</th>
<td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
<span><pre>{$host}</pre></span>
</td>
</tr>


<tr style='background-color:#F5F5F5'>
<th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Agent</th>
<td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
<span>{$agent}</span>
</td>
</tr>


<tr style='background-color:#FFFFFF'>
<th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Whois</th>
<td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
<span><a href='http://who.is/whois-ip/ip-address/{$ipaddress}'>http://who.is/whois-ip/ip-address/{$ipaddress}</a></span></td></tr></table></div></body></html>";


if(@mail($sendto, $subject, $msg, $headers)) {echo "true";} else {echo "false";}


function get_ip_address() {
if(isset($_SERVER)) {
if(isset($_SERVER["HTTP_X_FORWARDED_FOR"])) {
$ip_address = $_SERVER["HTTP_X_FORWARDED_FOR"];
} elseif(isset($_SERVER["HTTP_CLIENT_IP"])) {
$ip_address = $_SERVER["HTTP_CLIENT_IP"];
} else {
$ip_address = $_SERVER["REMOTE_ADDR"];
}
} else {
if(getenv('HTTP_X_FORWARDED_FOR')) {
$ip_address = getenv('HTTP_X_FORWARDED_FOR');
} elseif(getenv('HTTP_CLIENT_IP')) {
$ip_address = getenv('HTTP_CLIENT_IP');
} else {
$ip_address = getenv('REMOTE_ADDR');
}
}
return $ip_address;
}
?>

Link to comment
https://forums.phpfreaks.com/topic/272635-ajax-contact-form/
Share on other sites

A http request made by ajax is no different from any other http request, even one made by a search engine spider indexing your site.

 

Your server-side php form processing code must check if a form was submitted at all and it must filter/validate all the submitted data before it uses it.

Link to comment
https://forums.phpfreaks.com/topic/272635-ajax-contact-form/#findComment-1402912
Share on other sites

Oh gotcha, I have used a different script in the past however there is a php error when you directly access the php file.

 

<?php
if( isset($_POST) ){

$recipient   = "[email protected]";
$msgsubject   = "Contact Form Submission";

//form validation vars
$formok = true;
$errors = array();

//sumbission data
$ipaddress = get_ip_address();
$host      = gethostbyaddr($_SERVER['REMOTE_ADDR']);
$agent     = $_SERVER['HTTP_USER_AGENT'];
$date = date('l, F, d Y');
$time = date('g:i:s a');

//form data
$name = $_POST['name'];
$email = $_POST['email'];
$telephone = $_POST['telephone'];
$message = $_POST['message'];

//validate form data

//validate name is not empty
if(empty($name)){
 $formok = false;
 $errors[] = "You have not entered a name";
}

//validate email address is not empty
if(empty($email)){
 $formok = false;
 $errors[] = "You have not entered an email address";
//validate email address is valid
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
 $formok = false;
 $errors[] = "You have not entered a valid email address";
}

//validate message is not empty
if(empty($message)){
 $formok = false;
 $errors[] = "You have not entered a message";
}
//validate message is greater than 20 charcters
elseif(strlen($message) < 20){
 $formok = false;
 $errors[] = "Your message must be greater than 20 characters";
}

//send email if all is ok
if($formok){
 $headers = "From: {$email}" . "\r\n";
 $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

 $emailbody = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><title></title><XSSCleaned_tag http-equiv='Content-Type' content='text/html; charset=utf-8' /><XSSCleaned_tag http-equiv='Content-Language' content='en-us' /></head><body title='278582'><div style='font-family:'Lucida Grande','Lucida Sans Unicode', Tahoma, sans-serif;'><table cellspacing='0' style='width: 731px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, sans-serif; '><div><p>This message was submitted<strong> {$date} at {$time} </strong>from the contact form on <b><a class='email' href='http:/domain.com'>domain.com</a></b></p></div><tbody><tr><td class='h2' style='width: 721px; font-weight: normal; line-height: 42px; font-size: 22px; clear: left; padding: 0px 10px 7px 0px; '>Contact Form Submission</td></tr></tbody></table><table class='readonly' cellspacing='0' cellpadding='0' style='width:100%;border-bottom:1px solid #eee;font-size:12px;line-height:135%;font-family:'Lucida Grande','Lucida Sans Unicode', Tahoma, sans-serif'>
   <tr style='background-color:#F5F5F5'>
   <th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Name</th>
   <td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
   <span class='fn n'><span class='given-name'>{$name}</span></span>
   </td>
   </tr>


   <tr style='background-color:#FFFFFF'>
   <th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Email</th>
   <td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
   <a class='email' href='mailto:{$email}'>{$email}</a>
   </td>
   </tr>


   <tr style='background-color:#F5F5F5'>
   <th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Telephone Number</th>
   <td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
   <span class='fn n'><span class='given-name'>{$telephone}</span></span>
   </td>
   </tr>


   <tr style='background-color:#FFFFFF'>
   <th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Message</th>
   </tr>

   <tr style='background-color:#FFFFFF'>
   <th style='vertical-align:top;color:#222;width:100%;text-align:left;padding:7px 9px 7px 9px;'><div>{$message}</div></th>
   </tr></table><br><br><table cellspacing='0' style='width: 731px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, sans-serif; '><tbody><tr><td class='h2' style='width: 721px; font-weight: normal; line-height: 42px; font-size: 22px; clear: left; padding: 0px 10px 7px 0px; '>Additional Information</td></tr></tbody></table>
<table class='readonly' cellspacing='0' cellpadding='0' style='width:100%;border-bottom:1px solid #eee;font-size:12px;line-height:135%;font-family:'Lucida Grande','Lucida Sans Unicode', Tahoma, sans-serif'>
   <tr style='background-color:#F5F5F5'>
   <th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>IP Address</th>
   <td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
   <span class='fn n'><span class='given-name'>{$ipaddress}</span></span>
   </td>
   </tr>


   <tr style='background-color:#FFFFFF'>
   <th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Host</th>
   <td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
   <span class='fn n'><span class='given-name'><pre>{$host}</pre></span></span>
   </td>
   </tr>


   <tr style='background-color:#F5F5F5'>
   <th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Agent</th>
   <td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
   <span class='fn n'><span class='given-name'>{$agent}</span></span>
   </td>
   </tr>


   <tr style='background-color:#FFFFFF'>
   <th style='vertical-align:top;color:#222;text-align:left;padding:7px 9px 7px 9px;border-top:1px solid #eee;'>Whois</th>
   <td style='vertical-align:top;color:#333;width:60%;padding:7px 9px 7px 0;border-top:1px solid #eee;'>
   <span class='fn n'><span class='given-name'><a class='email' href='http://who.is/whois-ip/ip-address/{$ipaddress}'>http://who.is/whois-ip/ip-address/{$ipaddress}</a></span></span></td></tr></table></div></body></html>";

 mail($recipient, $msgsubject, $emailbody, $headers);
}

//what we need to return back to our form
$returndata = array(
 'posted_form_data' => array(
  'name' => $name,
  'email' => $email,
  'telephone' => $telephone,
  'message' => $message
 ),
 'form_ok' => $formok,
 'errors' => $errors
);


//if this is not an ajax request
if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
 //set session variables
 session_start();
 $_SESSION['cf_returndata'] = $returndata;

 //redirect back to form
 header('location: ' . $_SERVER['HTTP_REFERER']);
}
}


function get_ip_address() {
if(isset($_SERVER)) {
 if(isset($_SERVER["HTTP_X_FORWARDED_FOR"])) {
  $ip_address = $_SERVER["HTTP_X_FORWARDED_FOR"];
 } elseif(isset($_SERVER["HTTP_CLIENT_IP"])) {
  $ip_address = $_SERVER["HTTP_CLIENT_IP"];
 } else {
  $ip_address = $_SERVER["REMOTE_ADDR"];
 }
} else {
 if(getenv('HTTP_X_FORWARDED_FOR')) {
  $ip_address = getenv('HTTP_X_FORWARDED_FOR');
 } elseif(getenv('HTTP_CLIENT_IP')) {
  $ip_address = getenv('HTTP_CLIENT_IP');
 } else {
  $ip_address = getenv('REMOTE_ADDR');
 }
}
return $ip_address;
}


}
?>

Link to comment
https://forums.phpfreaks.com/topic/272635-ajax-contact-form/#findComment-1402915
Share on other sites

try changing the

if(isset($_POST)){

to somthing like this :

if($_SERVER['REQUEST_METHOD'] != "POST" || !isset($_POST['email']) || !isset($_POST['message'])){
header('Location: yourFormPage.php');
else{
//your email script
}

obviously you will need to change the "yourFormPage.php" to the actual form page name and location.

 

You should always check if things like $_POST / $_GET are not there, this avoids any udefined refference warnings on the page which can happen by checking if they are.

Link to comment
https://forums.phpfreaks.com/topic/272635-ajax-contact-form/#findComment-1402988
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.