Help with my Contact page please

Just an odd thing here.

I don’t know if my contact page form is having an issue or not. When I test it (in all major browsers), it woks fine. When I comb over the code, it looks fine.

Yet, I sometimes get emailed from this form, where the text fields are blank. This is a problem of course, because I don’t know if it is a legitimate client (or prospective client) trying to reach me…or if it is a weird server issue or maybe even bad code somewhere. I thought it may be spambots, but if that were the case, then I should at least get some text in the email responses.

I’ve been trying to figure this out for hours (spanning several days). Sometimes it’s best to have fresh eyes. I’m tempted to just use a brand new script (sometimes that is best), but I’d prefer to find out what I did wrong here (if anything) and how to fix it so it doesn’t happen again…

Here’s my contact page: www.harmonywebworks.com/contact.html

I’m not sure what the “best practice” is here for submitting code to be reviewed so please let me know if I need to do something more, or if I did something wrong. Below is the html, php, and 2 links to the relevant style sheets.

Here’s the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Harmony Webworks - Contact Us</title>
<link rel="shortcut icon" type="image/x-icon" href="images/color/blue/favicon.ico" />

<!-- Stylesheets -->
<link href="css/colors/blue.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />

<link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<link href="css/slider1.css" rel="stylesheet" type="text/css" />
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" />
<link href="css/tipsy.css" rel="stylesheet" type="text/css" media="screen" />

<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css" />

<!--[if IE]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!-- JQuery -->
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="http://twitterjs.googlecode.com/files/twitter-1.13.1.min.js" ></script>
<script type="text/javascript" src="js/jmenu.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>



</head>

<body>

	<div id="parent">
		
		<div id="top">
				
			<div class="inner">
			
				<div id="logo">
				
					<a href="index.html"><img src="images/logo.png" alt="Harmony Webworks" /></a>
				
				</div>
				
				<div id="menu">
				
					<ul>
					
						<li>
						
							<a href="index.html">Home</a>

														
						</li>
						<li><a href="gallery.html">Gallery</a></li>
						<li class="current_page_item"><a href="contact.html">Contact</a></li>
					
					</ul>
				
				</div>
			
			</div><!-- End "top-inner" -->
				
		</div><!-- End "top" -->
		
		<div id="header">
		
			<div class="inner">
							
				<h1 class="page-title">Contact Page</h1>
				<h3 class="page-sub">Grab Our Attention</h3>
							
			</div><!-- End "header-inner" -->
		
		</div><!-- End "header" -->
		
		<div id="content">
		
			<div class="inner">
			
				<div id="main-col">
				
					<h3>Contact Form</h3>
					<p>Use the form below for questions or project ordering (interactive order form coming soon).</p>
					
					<!--||||||| BEGIN CONTACT FORM |||||||-->
					
					<form id="contact-form" method="post" action="contact.php">
						
						<div class="textbox-block">
						
							<div>
							
								<label class="name">Full Name <span>*</span></label>
								<input type="text" name="Name" class="Name required" />
							
							</div>
							
							<div>
							
								<label class="email">Email Address <span>*</span></label>
								<input type="text" name="Email" class="Email required" />
							
							</div>
							
							<div class="last">
							
								<label class="subject">Subject Matter</label>
								<input type="text" name="Subject" class="Subject" />
							
							</div>
						
						</div>
						
						<div class="textarea-block">
						
							<label class="message">Message <span>*</span></label>
							<textarea name="Message" class="Message required" cols="45" rows="15"></textarea>
						
						</div>
						
						<p><span class="red">*</span> Indicates required field</p>
						
						<p><button type="submit" class="button small color submit"><span>Send Message</span></button></p>
					
					</form>
					
					<!--||||||| END CONTACT FORM |||||||-->
				
				</div>
				
				<div id="sidebar">
				

					
					<div class="widget widget-map">
					
						<h3 class="widget-title">Current Promotions</h3>
						
						<p><strong>66% discount on all websites!</strong></p>
						<p>Contact me for  details!</p>


					<!-- <a href="#"><img src="images/promo.gif" alt="Promotion" /></a> -->
						
					</div>
					

					
					<div class="widget widget-text">
					
						<h3 class="widget-title">To order a project . . .</h3>
						
						<p>For all inquiries and orders for websites, logos, or printwork, please use this contact form and I will respond within 12-24 hours.</p>
						<p>Please leave a phone number if you would like me to call instead of contacting you by email.</p>
					
					</div>
					
				</div>
			
			</div><!-- End "inner" -->
		
		</div><!-- End "content" -->
		
	</div><!-- End "parent" -->
	
	<div id="footer">
	
		<div id="footer-wrap">
		
			<div class="inner">
		
				<div id="footer-widgets">
				
					<div class="widget">
					
						
						<h3>About Harmony Webworks</h3>
						<p>Harmony Webworks is owned and operated by designer Jeremy Lewis who has over 11 years experience in graphic design and web development. Harmony Webworks, while a newer company, has traditional values of dedicated service, quality work, and true customer satisfaction.</p>
							
						<!-- <a href="#">Read More &#8594;</a> -->
					
					</div>
					
					<div class="widget">
					
						<h3>Latest Tweets</h3>
						
						<div id="twitter">
	
							<div id="myTweets" class="twitters"></div>
							
						</div><!-- End "twitter" -->
					
					</div>
					
					<div class="widget">
					
						
						<h3>From The Blog</h3>
						
						<div class="recent-post">
						
							<h4><a href="#">Coming Soon!</a></h4>
							
							<div class="meta-data">
							
								
							
							</div>
						
							<p> </p>
						
						</div>
					
					</div>
					
					<div class="widget">
					
						<div class="flickr-widget">
						
							<h3>Flickr Photostream</h3>
							<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=59018165@N07"></script>
						

                     <div class="recent-post">
 						
							<h4><a href="#">Coming Soon!</a></h4>
					 </div>
                             <p>A cool new feature that will showcase client projects in real time!</p>

						</div>
					
					</div>
				
				</div><!-- End "footer-widgets" -->
				
			</div>
			
			<div id="copyright">
				
				<div class="inner">
				
					<div class="left"><p>&copy; All Rights Reserved.  Site developed by <a href="http://harmonywebworks.com">Harmony Webworks</a></p></div>
					
					<div class="right"><p>Find us on <a href="http://twitter.com/#!/HarmonyWebworks">Twitter</a>, <a href="http://dribbble.com/#">Dribbble</a> &amp; <a href="http://www.facebook.com/pages/#">Facebook</a></p></div>
					
					
				</div>
			
			</div><!-- End "copyright" -->
		
		</div><!-- End "footer-wrap" -->
	
	</div><!-- End "footer" -->

<script type="text/javascript">

$(window).load(function() {
	$("#contact-form").validate();
});

</script>

<script type="text/javascript" src="js/video-fancybox.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

</body>

</html>

Here’s the php:

<?php

$EmailTo = "sales@harmonywebworks.com";
$Subject = "HW Contact Page";
$EmailFrom = Trim(stripslashes($_POST['Name']));

//boxes
$Name = Trim(stripslashes($_POST['Name']));
$Email = Trim(stripslashes($_POST['Email']));
$Subject = Trim(stripslashes($_POST['Subject']));
$Message = Trim(stripslashes($_POST['Message']));

// validation
$validationOK=true;
if (!$validationOK) {
  print "<meta http-equiv=\\"refresh\\" content=\\"0;URL=error.htm\\">";
  exit;
}

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\
";

$Body .= "Email: ";
$Body .= $Email;
$Body .= "\
";

$Body .= "Subject: ";
$Body .= $Subject;
$Body .= "\
";

$Body .= "Message: ";
$Body .= $Message;
$Body .= "\
";

// send email
$success = mail($EmailTo, $Subject, $Body, "From: $EmailFrom");

// redirect to success page
if ($success){
  print "<meta http-equiv=\\"refresh\\" content=\\"0;URL=thanks.html\\">";
}
else{
  print "<meta http-equiv=\\"refresh\\" content=\\"0;URL=error.htm\\">";
}
?>

Stylesheets:
http://www.harmonywebworks.com/style.css
http://www.harmonywebworks.com/css/colors/blue.css

I appreciate any help you can offer.

Hi Apokalupsis. Welcome to the forums. :slight_smile:

In your PHP, you don’t have any checks to make sure that there is content in each field. You are leaving it up to JS to do that, but simply by turning off JS (a simple button click for some people) the form can be submitted empty. There’s also nothing to stop someone submitting malicious data via the form. So you need a better PHP script that locks the form down more tightly. :slight_smile:

Thanks for your quick reply!

And yes, I figured it was something simple.

However, instead of modifying the php, why not just use the “required” attribute in the input/text area elements?

required="required"

I’ve tested it, it works, w/ and w/o JS.

This seems much simpler than using more validation with the php. Is there still the issue of malicious scripts in the input? If so, wouldn’t a complex php script be required (vs mere validation)?

I can’t edit the above post…

Anyway, here’s what I’ve found since then:

The “required” attribute is html5, and as such, not all browsers will recognize that attribute. So that’s not a good solution.

I agree the best way to do this would be to modify the php, but I’m not sure how to do that as php isn’t my strong suit (still something I’m learning). Any pointers on how to get started w/ the validation code?

As “empty” seems to be the main issue you should check for each POSTed value for empty and setting a simple variable flag will control if email is sent or not.

$EmailTo = "sales@harmonywebworks.com";
$Subject = "HW Contact Page RE: ";
$EmailFrom = Trim(stripslashes($_POST['Name']));

//boxes
$Name = Trim(stripslashes($_POST['Name']));
$Email = Trim(stripslashes($_POST['Email']));
$Subject .= Trim(stripslashes($_POST['Subject']));
$Message = Trim(stripslashes($_POST['Message']));

//Add Basic check for empty
if (
isset($_POST['Subject']) && !empty($_POST['Subject']) &&
isset($_POST['Name']) && !empty($_POST['Name']) &&
isset($_POST['Email']) && !empty($_POST['Email']) &&
isset($_POST['Message']) && !empty($_POST['Message'])){
	$passed = "true";
}else{
	$passed = "false";
}


// validation	
$validationOK=true;
if (!$validationOK || $passed == "false") {
  print "<meta http-equiv=\\"refresh\\" content=\\"0;URL=error.htm\\">";
  exit;
} 

Thanks Drummin! That seems to have done the trick.

I took 1 PHP course in college a couple years ago, did well…but haven’t used PHP since then (my focus has been more on graphic design). I do remember going over validation, but when I looked at my notes recently…man…I was just drawing a blank. It would have taken hours to decipher and recall something as simple as what you posted. I appreciate it.

I’ll build from that and add more security validation as I learn more PHP.