3 Replies - 2660 Views - Last Post: 08 November 2011 - 02:45 AM

#1 Befuddled   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 05-September 10

Trouble with contact form

Posted 06 November 2011 - 09:05 AM

I am fresh out of college and trying to design a website for my daughter and son-in-law to gain experience while I look for work. I am having trouble with my contact form. I started with the

<form action="mailto:[email protected]" method="post" enctype="text/plain" >

but that did now work with Internet Explorer 8. So I tried with CGi (which I have never used before) and now I get a 404 error message. Can anyone help me with this? the two files are as follows:

HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Housekeeping Gurus Contact Us</title>
<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #CCC;
	width: 985 px;
}
#wrapper {
  width: 985px;
  margin: 0 auto;
  	padding-left: 20px;
	padding-right: 20px;
}
a img {
	border: none;
}
.twoColFixLtHdr #container {
	width: 985px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColFixLtHdr #header { 
	background: #fff; 
	padding: 0 0px 0 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.twoColFixLtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

}
.twoColFixLtHdr #mainContent { 
	margin: 0 0 0 60px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	width: 865px;
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 
.twoColFixLtHdr #footer { 
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#fff; 
} 
.twoColFixLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	background-color: #FFF;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
body,td,th {
	font-family: Century Gothic;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Century Gothic;
	color: #090;
}
#Green {color: #090;
}
#green {color: #090;
}
#green {color: #090;
}
#green {color: #090;
}
--> 
</style><!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationConfirm.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
    } if (errors) alert('The following error(s) occurred:\n'+errors);
    document.MM_returnValue = (errors == '');
} }
//-->
</script>
</head>

<body class="twoColFixLtHdr">
<div id="container">
  <div id="header"><img src="Images/guru2[1].jpg" width="182" height="200" alt="logo" />
    <img src="Images/Banner.jpg" width="784" height="200" alt="Housekeeping Gurus 402-802-2709" />
    <!-- end #header -->
  <a href="index.html"><img src="Images/Tabs/home.jpg" alt="Home" width="106" height="37" align="left" /></a>  <a href="Maid.html"><img src="Images/Tabs/Maid.jpg" width="106" height="37" alt="Maid Services" /></a><a href="Commerc.html"><img src="Images/Tabs/Commercial.jpg" width="106" height="37" alt="Commercial Cleaning" /></a><a href="Gift.html"><img src="Images/Tabs/Gift.jpg" width="106" height="37" alt="Gift Certificates" /></a><a href="FAQs.html"><img src="Images/Tabs/FAQ.jpg" width="106" height="37" alt="FAQ'S" /></a><img src="Images/Tabs/used contact.jpg" width="106" height="37" alt="quote" /><img src="Images/Tabs/BlankBar.jpg" width="349" height="37" /></div>
  
  <div id="mainContent">
    <h1><strong>Contact Us</strong></h1>
    <p>Our office hours are Monday-Friday 8am-5pm. Our phone lines  are answered 7 days a week 8am-10pm.</p>
    <p><strong>We service:</strong><br />
      Lincoln, Waverly,  Eagle, Roca, Hickman and the surrounding  areas.</p>
    <p>If you are interested in receiving a quote, please call us  or submit the form below. A representative will contact you shortly.</p>
    
    <form name = "quote" action="http://www.housekeepinggurus.com/cgi-bin/feedback.cgi"  method="post" enctype="text/plain" >
      <table width="870" border="0">
        <tr>
          <td>First*</td>
          <td><span id="first">
            <input name="fname" type="text" id="fname" size="50" />
          <span class="textfieldRequiredMsg">Required.</span></span></td>
          <td>Last</td>
          <td><span id="last">
            <input name="lname" type="text" id="lname" size="50" />
          <span class="textfieldRequiredMsg">A value is required.</span></span></td>
        </tr>
        <tr>
          <td>Title</td>
          <td><input name="title" type="text" id="title" size="50" /></td>
          <td>Company</td>
          <td><input name="company" type="text" id="company" size="50" /></td>
        </tr>
        <tr>
          <td>Email*</td>
          <td><span id="spryemail1">
            <input name="email1" type="text" id="email1" size="50" />
          <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
          
          <td>Confirm Email*</td>
          <td><span id="spryconfirm2">
            <input name="email2" type="text" id="email2" size="50" />
          <span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span></td>
        </tr>
        <tr>
          <td>Phone</td>
          <td><span id="spryphone">
          <input name="phone1" type="text" id="phone1" size="50" />
</span></td>
          <td>Alternative Phone</td>
          <td><span id="spryphone2">
          <input name="phone2" type="text" id="phone2" size="50" />
</span></td>
        </tr>
        <tr>
          <td>City</td>
          <td><input name="city" type="text" id="city" size="50" /></td>
          <td>State</td>
          <td><input name="state" type="text" id="state" size="50" /></td>
        </tr>
        <tr>
          <td>Where did you hear about us?</td>
          <td><textarea name="refer" id="refer" cols="37" rows="5"></textarea></td>
          <td>Comments</td>
          <td><textarea name="comments" id="comments" cols="37" rows="5"></textarea></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><input type="submit" name="submit" id="submit" value="Submit" /></td>
        </tr>
      </table>
    </form>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
<!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  <div id="footer">
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("first", "none", {validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("last", "none", {validateOn:["blur"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("spryphone", "none", {isRequired:false});
var sprytextfield6 = new Spry.Widget.ValidationTextField("spryphone2", "none", {isRequired:false});
var spryconfirm2 = new Spry.Widget.ValidationConfirm("spryconfirm2", "email1", {validateOn:["blur"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("spryemail1", "email", {validateOn:["blur"]});
//-->
</script>
</body>
</html>



CGI
#!/usr/cgibin/perl
use CGI::Carp qw(fatalsToBrowser);

# The following accepts the data from the form and splits it into its component parts

if ($ENV{'REQUEST_METHOD'} eq 'POST') {

	read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
	
	@pairs = split(/&/, $buffer);
	
	foreach $pair (@pairs) {
		($name, $value) = split(/=/, $pair);
		$value =~ tr/+/ /;
		$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
		$FORM{$name} = $value;
	}



# Then sends the email 

open (MESSAGE,"| /usr/sbin/sendmail -t");

	print MESSAGE "To: headuguru\@housekeepinggurus.com\n"; # Don't forget to escape this @ symbol!
	print MESSAGE "From: " . $FORM{fname} . ", reader\n";
	print MESSAGE "Reply-to: " . $FORM{email1} . "(" . $FORM{fname} . ")\n";
	
	print MESSAGE "Subject: Feedback from $FORM{fname} \n\n";
	
	print MESSAGE "$FORM{fname} wrote:\n\n";
	print MESSAGE "Last Name: $FORM{lname}\n\n";
	print MESSAGE "Title: $FORM{title}\n\n";
	print MESSAGE "Company: $FORM{company}\n\n";
		print MESSAGE "Email: $FORM{email1}\n\n";
	print MESSAGE "Confirm Email: $FORM{email2}\n\n";
	print MESSAGE "Phone: $FORM{phone1}\n\n";
	print MESSAGE "Alt Phone: $FORM{phone2}\n\n";
	print MESSAGE "City: $FORM{city}\n\n";
	print MESSAGE "State: $FORM{state}\n\n";
	print MESSAGE "Where he or she heard of us: $FORM{refer}\n\n";
	print MESSAGE "Comment: $FORM{comment}\n\n";
	print MESSAGE "Sent by: $FORM{lname} ($FORM{email}).\n";

close (MESSAGE);

&thank_you; #method call
} 



#The code then goes on to generate the thank-you page

sub thank_you {

print "Content-type: text/html\n\n";

print <<EndStart;

	<html>
	<head>
	<title>Thank You</title>
	</head>
	
	<body bgcolor="#ffffff" text="#000000">
	
	<h1>Thank You</h1>
	
	<p>Your feedback has been received. Thanks for sending it.</p>
	
	<hr>
	
	
EndStart

	print "<p>You wrote:</p>\n";
	print "<blockquote><em>$FORM{comment}</em></blockquote>\n\n";
	
print <<EndHTML;
	
	</body>
	</html>

EndHTML

exit(0);
}



Any help would be greatly appreciated. I am not sure why we did not learn anything about PHP or CGI in my classes but am thinking I better sign up for classes in writing these!

This post has been edited by modi123_1: 06 November 2011 - 11:10 AM
Reason for edit:: pleae use code tags..


Is This A Good Question/Topic? 0
  • +

Replies To: Trouble with contact form

#2 AMZDeCoder   User is offline

  • D.I.C Head

Reputation: 25
  • View blog
  • Posts: 102
  • Joined: 04-November 11

Re: Trouble with contact form

Posted 06 November 2011 - 09:07 AM

Dear,

Please use code tags to wrap your code, also please highlight your exact problem your post is so long and your code is difficult to read.
Was This Post Helpful? 0
  • +
  • -

#3 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Trouble with contact form

Posted 06 November 2011 - 09:33 AM

View PostAMZDeCoder, on 06 November 2011 - 12:07 PM, said:

Dear,

Please use code tags to wrap your code, also please highlight your exact problem your post is so long and your code is difficult to read.

We have a report button for a reason, if you see someone who doesn't use code tags then just press the report button under their post and say that code tags are missing and a moderator will take care of it. Also I doubt that this is a HTML and CSS problem. it's more than likely with your CGI (which I don't know, I'm a PHP dev).

This post has been edited by EnvXOwner: 06 November 2011 - 09:35 AM

Was This Post Helpful? 0
  • +
  • -

#4 dsherohman   User is offline

  • Perl Parson
  • member icon

Reputation: 227
  • View blog
  • Posts: 654
  • Joined: 29-March 09

Re: Trouble with contact form

Posted 08 November 2011 - 02:45 AM

Your form is set to post to http://www.housekeep...in/feedback.cgi so I checked that URL to verify that it came up 404, but it didn't... It's an "Internal Server Error" page, with a note at the bottom saying that an additional 404 error was generated, but that's a separate issue, unrelated to your CGI code.

For the first problem, the Internal Server Error, this means that either:

1) The web server was not able to run your Perl code.
2) The code exited without printing a set of HTTP headers (which must include a Content-Type: header) followed by a blank line.

If you have access to the web server's error log, you can get the exact error message from there to see whether it's a Perl problem, not getting the required output, permissions, or whatever else. Lacking that information, the major possibilities for why the server might not be able to run your Perl are:

- Your CGI script is not marked as "executable"
- Your CGI script is in a directory which doesn't have the web server's CGIExec option enabled
- /usr/cgibin/perl doesn't exist
- The user that the web server is running as (usually "nobody" or "apache") doesn't have permission to read your file or the directory containing it

The script is syntactically valid and, when I run it on the command line, it completes without errors, but it doesn't display any output either (because there's no $ENV{REQUEST_METHOD}). It should always send some response, even when called in an invalid manner, because of possibility #2 above - if it doesn't emit valid HTTP headers, that will trigger an Internal Server Error report from the web server.


As for the 404 part of the error, that's because you have an ErrorDocument set in the web server configuration which attempts to display a custom error page, but the custom error page doesn't exist. Either remove the ErrorDocument or put something at the specified URL and that'll take care of that.


Now, your Perl code... Two major points on that:

1) Always start your Perl code with "use strict; use warnings;", then clean up the problems they complain about. Mostly, this will just mean putting "my" before the first use of each variable, which protects you against accidentally creating new variables if you mistype the name of a variable when referencing it.

2) Never attempt to implement the CGI interface (i.e., parsing the body of your POST) yourself. "use CGI" instead. See http://search.cpan.org/perldoc?CGI for documentation.

It would also be better to call your thank_you sub with "thank_you()" rather than "&thank_you". It doesn't really matter in this case, but it's a good habit to develop - calling subs with an "&" prefix is a Perl 4 holdover with non-obvious side-effects which are generally not what you want.

Here's a quick clean-up. It's syntactically valid, but has not been run to verify that it actually does what you want:
#!/usr/cgibin/perl
use strict;
use warnings;

use CGI;
use CGI::Carp qw(fatalsToBrowser);

# MIME::Lite may not be installed on your server, but there's a good chance it
# is
use MIME::Lite;

my $q = CGI->new;

send_email();

exit;

sub send_email {
  # Using || to provide default values for all form fields.  This ensures that
  # a hostile user can't break anything by leaving fields blank.  You probably
  # want to do better data validation than this, but at least it's a start.
  my $fname  = $q->param('fname')  || 'Unnamed';
  my $lname  = $q->param('lname')  || '';
  my $email1 = $q->param('email1') || '';
  my $email2 = $q->param('email2') || '';
  my $sender = ($email1 || '[email protected]') . "($fname)";
  my $title   = $q->param('title')   || '';
  my $company = $q->param('company') || '';
  my $phone1  = $q->param('phone1')  || '';
  my $phone2  = $q->param('phone2')  || '';
  my $city    = $q->param('city')    || '';
  my $state   = $q->param('state')   || '';
  my $refer   = $q->param('refer')   || '';
  my $comment = $q->param('comment') || '';
  
  my $message_body = <<EOM;
$fname wrote:

Last Name: $lname
Title: $title
Company: $company
Email: $email1
Confirm Email: $email2
Phone: $phone1
Alt Phone: $phone2
City: $city
State: $state
Where he or she heard of us: $refer
Comment: $comment

Sent by: $lname ($email1)
EOM

  my $msg = MIME::Lite->new(
    From    => $sender,
    To      => '[email protected]',
    Subject => "Feedback from $fname",
    Data    => $message_body,
  );
  $msg->send;

  show_confirmation($comment);
}

sub show_confirmation {
  my $comment = shift;

  print <<EOP;
Content-type: text/html

<html>
<head>
<title>Thank You</title>
</head>
        
<body bgcolor="#ffffff" text="#000000">
        
<h1>Thank You</h1>
        
<p>Your feedback has been received. Thanks for sending it.</p>
        
<hr>
        
        
<p>You wrote:</p>
<blockquote><em>$comment</em></blockquote>
        
</body>
</html>
EOP
}


Was This Post Helpful? 1
  • +
  • -

Page 1 of 1