Php contact form
Posted: Sun Aug 28, 2011 9:07 am
I'm learning PHP to enable my contact form to work. It seems like I am almost there - when the user clicks submit it generates an email to my account, but it doesn't give the user the "Thank you your email was sent" or refresh the form. Both pages below are located in root folder of server site. If anyone can take a look I would appreciate any comments.
Here's the code on my contact.html page:
<script src="js/jquery-1.4.2.min.js"></script> <!-- jquery library -->
<script src="js/jquery.prettyPhoto.js"></script> <!-- lightbox plugin -->
<script src="js/jquery.nivo.slider.pack.js"></script> <!-- nivo slider plugin -->
<script src="js/cufon-yui.js"></script><!-- cufon library -->
<script src="js/tweets.js"></script><!-- twitter plugin -->
<script src="js/Vegur_300-Vegur_700.font.js"></script><!-- vegur font -->
<script src="js/jquery.form.js"></script> <!-- jQuery form plugin-->
<script src="js/custom.js"></script><!-- custom jquery stuff-->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /><!-- general stylesheet -->
<link rel="stylesheet" href="custom.css" type="text/css" media="screen" /><!-- custom stylesheet -->
<!-- version number: 1.0.0 -->
</head>
<body>
<div id="header">
<div class="wrapper">
<h1 id="logo"></h1>
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Work</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html/">Blog</a></li>
</ul><!-- end of #navigation -->
</div><!-- end of .wrapper -->
</div> <!-- end of #header -->
<div id="slice1" class="slice fabric-slice slice-light"> <!-- a normal slice used to create a contact form -->
<div class="wrapper clearfloat">
<div class="slice-caption clearfloat">
<h1 class="slicetitle "><span>Contact</span></h1>
</div>
<br class="clear">
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#contactForm').ajaxForm(function(data) {
if (data==1){
$('#bademail').fadeOut("fast");
$('#success').fadeIn("slow");
$('#myForm').resetForm();
}
else if (data==2){
$('#bademail').fadeOut("fast");
$('#badserver').fadeIn("slow");
}
else if (data==3)
{
$('#bademail').fadeIn("slow");
}
});
});
</script>
<div class="twocol-one">
<p id='success' style="display:none;">Your email is sent! Thanks!</p>
<p id='bademail' style="display:none;">Your email could not be sent. Please fill in the data correctly.</p>
<p id='badserver' style="display:none;">Your email failed due to server error. Try again later.</p>
<form action="contact_send.php" id="contactForm" method="post">
<ol class="forms">
<li><label for="contactName">Name:</label>
<input type="text" name="contactName" id="contactName" value="" class="requiredField" />
</li>
<li><label for="email">Email:</label>
<input type="text" name="email" id="email" value="" class="requiredField email" />
</li>
<li class="textarea"><label for="commentsText">Message:</label>
<textarea name="comments" id="commentsText" rows="20" cols="18" class="requiredField"></textarea>
</li>
<li class="screenReader"><label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" id="checking" class="screenReader" value="" /></li>
<li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><input class="submit" type="submit" value="Submit" /></li>
</ol>
</form>
Here's the code on my contact_send.php page:
<?php
error_reporting(E_NOTICE);
function valid_email($str)
{
return ( ! preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? FALSE : TRUE;
}
if($_POST['contactName']!='' && $_POST['email']!='' && valid_email($_POST['email'])==TRUE && strlen($_POST['comments'])>1)
{
$to = "bees@bees.com"; // Your e-mail here!!!
$headers = 'From: '.$_POST['email'].''. "\r\n" .
'Reply-To: '.$_POST['bees@bees.com'].'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$subject = "Contact Form";
$message = htmlspecialchars($_POST['comments']);
if(mail($to, $subject, $message, $headers))
{
echo 1; //SUCCESS
}
else {
echo 2; //FAILURE - server failure
}
}
else {
echo 3; //FAILURE - not valid email
}
?>
Here's the code on my contact.html page:
<script src="js/jquery-1.4.2.min.js"></script> <!-- jquery library -->
<script src="js/jquery.prettyPhoto.js"></script> <!-- lightbox plugin -->
<script src="js/jquery.nivo.slider.pack.js"></script> <!-- nivo slider plugin -->
<script src="js/cufon-yui.js"></script><!-- cufon library -->
<script src="js/tweets.js"></script><!-- twitter plugin -->
<script src="js/Vegur_300-Vegur_700.font.js"></script><!-- vegur font -->
<script src="js/jquery.form.js"></script> <!-- jQuery form plugin-->
<script src="js/custom.js"></script><!-- custom jquery stuff-->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /><!-- general stylesheet -->
<link rel="stylesheet" href="custom.css" type="text/css" media="screen" /><!-- custom stylesheet -->
<!-- version number: 1.0.0 -->
</head>
<body>
<div id="header">
<div class="wrapper">
<h1 id="logo"></h1>
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Work</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html/">Blog</a></li>
</ul><!-- end of #navigation -->
</div><!-- end of .wrapper -->
</div> <!-- end of #header -->
<div id="slice1" class="slice fabric-slice slice-light"> <!-- a normal slice used to create a contact form -->
<div class="wrapper clearfloat">
<div class="slice-caption clearfloat">
<h1 class="slicetitle "><span>Contact</span></h1>
</div>
<br class="clear">
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#contactForm').ajaxForm(function(data) {
if (data==1){
$('#bademail').fadeOut("fast");
$('#success').fadeIn("slow");
$('#myForm').resetForm();
}
else if (data==2){
$('#bademail').fadeOut("fast");
$('#badserver').fadeIn("slow");
}
else if (data==3)
{
$('#bademail').fadeIn("slow");
}
});
});
</script>
<div class="twocol-one">
<p id='success' style="display:none;">Your email is sent! Thanks!</p>
<p id='bademail' style="display:none;">Your email could not be sent. Please fill in the data correctly.</p>
<p id='badserver' style="display:none;">Your email failed due to server error. Try again later.</p>
<form action="contact_send.php" id="contactForm" method="post">
<ol class="forms">
<li><label for="contactName">Name:</label>
<input type="text" name="contactName" id="contactName" value="" class="requiredField" />
</li>
<li><label for="email">Email:</label>
<input type="text" name="email" id="email" value="" class="requiredField email" />
</li>
<li class="textarea"><label for="commentsText">Message:</label>
<textarea name="comments" id="commentsText" rows="20" cols="18" class="requiredField"></textarea>
</li>
<li class="screenReader"><label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" id="checking" class="screenReader" value="" /></li>
<li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><input class="submit" type="submit" value="Submit" /></li>
</ol>
</form>
Here's the code on my contact_send.php page:
<?php
error_reporting(E_NOTICE);
function valid_email($str)
{
return ( ! preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? FALSE : TRUE;
}
if($_POST['contactName']!='' && $_POST['email']!='' && valid_email($_POST['email'])==TRUE && strlen($_POST['comments'])>1)
{
$to = "bees@bees.com"; // Your e-mail here!!!
$headers = 'From: '.$_POST['email'].''. "\r\n" .
'Reply-To: '.$_POST['bees@bees.com'].'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$subject = "Contact Form";
$message = htmlspecialchars($_POST['comments']);
if(mail($to, $subject, $message, $headers))
{
echo 1; //SUCCESS
}
else {
echo 2; //FAILURE - server failure
}
}
else {
echo 3; //FAILURE - not valid email
}
?>