Jump to content

Ajax Contact Form

TylerA

By TylerA
in PHP Coding Help

 Share

Recommended Posts

TylerA Newbie

TylerA

Posted
Posted (edited)

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 = "NAME@EMAILDOMAIN.COM";
$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;
}
?>

Edited by TylerA
Link to comment
Share on other sites
PFMaBiSmAd Advanced Member

PFMaBiSmAd

Posted
Posted

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
Share on other sites
TylerA Newbie

TylerA

Posted
  • Author
Posted

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@domain.com";
$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
Share on other sites
Muddy_Funster Regular Member

Muddy_Funster

Posted
Posted

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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.