Problems with my contact page?

A

Apokalupsis

New Member
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 continue to 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:
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 →</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: 
<?php

$EmailTo = "[email protected]";
$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 .= "\n";

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

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

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

// 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.
 
chrishirst

chrishirst

Well-Known Member
Staff member
Just use a . operator for simple concatenation rather than the concatenating assignment operator .=
 
A

Apokalupsis

New Member
chrishirst said:
Just use a . operator for simple concatenation rather than the concatenating assignment operator .=
Click to expand...
Thank you for responding so quickly!

However, re: concatenating via ".", isn't that just another way to format the php? That is, I don't understand how it would have any effect on it.

Also, playing around a bit with JS, turning it off does seem to reproduce the result (of having empty fields pass through, submitted).

So in the html, I required each field via the "require attribute:

HTML: 
required="required"

And I think that may do the trick...unless there's something I'm missing here.
 
chrishirst

chrishirst

Well-Known Member
Staff member
Because the '.' operator ONLY concatenates (appends) the right hand side operand to the left hand side operand.

Whereas the assignment concatenating operator changes the VALUE of the left side variable AND appends the right hand side operand and as such is used for concatenating values where only ONE variable is involved

PHP: 
<?php
$var = 'Left Side';
$var .= ' and the Right Side':
?>

When you are concatenating several strings or variables to another, the '.' is the one to use.

PHP: 
<?php
$string = 'Some text';

$anotherString = $string . ' and some more text'

?>


And I think that may do the trick...unless there's something I'm missing here.
Click to expand...

Errrmmm No! and yes there is the fact that the required attribute is ONLY valid with a HTML5 DTD and is NOT supported by all browsers as yet.

AND is some fields are required you should be checking them server side rather than relying on relatively unsupported HTML attributes and javascript which can be disabled.
 
A

Apokalupsis

New Member
I fixed it using empty field validators in the php.

I would have edited the above post if I could have, but it went into moderation and didn't appear until too late.

I found out that only a couple browsers recognize the "required" attribute (since it is HTML5). I used it, so it helps on the client side. But also added the simple empty php validation.

I didn't change the concatenation. I understand what you are saying, but it doesn't affect the issue I was having. It came down to php not-validating empty fields, which were able to go through if JS was turned off on the client's browser.
 
Last edited:
You must log in or register to reply here.
Top