Design Forums - UK Graphic Design & Web Design Forum

Jazajay · 04:44 PM

Below is a fully functioning XHTML contact form that will validate to strict and is accessible to people with disabilities.
Please read user notes at the bottom to get it to work on your site, easy steps and you don't need to be a geek to get it to work.

Post 5 contains an upgraded version with styling, and some minor improvements using some CSS3 that degrades nicely.

Version1.01.

Quote:

<!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" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Contact us</title>
</head>
<body>
<?php
if(isset($_POST['name']))
{
$count=0;
$err="Please fix the errors below to be able to contact me: <br />";
if(!empty($_POST["name"])){
$from = $_POST["name"];
}else{
$count++;
$err.="Please enter your name<br />";
} if(!empty($_POST["email"])){
$email_check = preg_match("/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/", $_POST["email"]);
if($email_check!==0){
$email=$_POST["email"];
}else{
$count++;
$err.="Your email address appears to be wrong,<br />";
}
}else{
$count++;
$err.="You need to enter an email address so I can contact you<br />";
} if(!empty($_POST['mess'])){
$content = "This message is from $from whose email address is $email.\r\n-----------\r\n ";
$content = $content . $_POST["mess"];
$content = strip_tags(wordwrap($content, 70));
}else{
$count++;
$err.="Your message was blank";
}
if($count==0){
mail('me@me.com', 'Website inquiry', $content)?>

<h2>Success</h2>
<p>
Your message has been sent and I always aim to reply to all emails within 48hours.
</p>
<p>
Thank you for taking the time to contact me.
</p>
<p>
<i>Add your name or company name in here.</i>

</p>
<p>
<a href="">Back to our home page</a>

</p>
<?php }else{?>
<h2><?php if($count>1){echo $count;?> errors <?php }else{?>1 error <?php }?>occured</h2>
<p>
<?php echo $err;?>
</p>
<form method="post" action="">
<p><label for="name">Name: </label></p>
<p>
<input type="text" name="name" id="name"<?php if(!empty($_POST["name"])){?> value="<?php echo $_POST['name'];?>"<?php }?> />
</p>
<p><label for="email">Email: </label></p>
<p>
<input type="text" name="email" id="email"<?php if(!empty($_POST["email"])){?> value="<?php echo $_POST['email'];?>"<?php }?> />
</p>
<p><label for="message">Message: </label></p>
<p>
<textarea name="mess" cols="50" rows="20" id="message"><?php if(!empty($_POST["mess"])){?><?php echo $_POST['mess'];}?></textarea>
</p>
<p><button type="submit">Contact me</button></p>
</form>
<?php }
}else{
?>
<form method="post" action="">
<p><label for="name">Name: </label></p>
<p>
<input type="text" name="name" id="name" />
</p>
<p><label for="email">Email: </label></p>
<p>
<input type="text" name="email" id="email" />
</p>
<p><label for="message">Message: </label></p>
<p>
<textarea name="mess" cols="50" rows="20" id="message"></textarea>
</p>
<p><button type="submit">Contact me</button></p>
</form>
<?php }?>

</body>
</html>

User notes
1. Please keep the last comment in out of curtsy, but you don't have to if you want to seem amazing to your boss.

2. All you need to do is edit the bolded lines, html comments explain what needs changing and that's it just copy and paste it and you have a fully working contact page for your site.
3. The file needs to be saved as a php file so something like contact-me.php, not .html or .asp as we are using PHP code.

Aren't I nice it even validates.
If anyone would like any improvements just let me know, or if you run into problems, and I'm sure me or someone on here will help you out with them.

Jaz

chrismitchell · Post 2 Posted 11-12-09

Thought I would make this one a sticky thread, Jaz

Jazajay · Post 3 Posted 11-12-09

Aww cheers buddy, that will save me having to dig through DF's achieves to find it when I need to link to it as it seems to be a frequent question.

chrismitchell · Post 4 Posted 11-12-09

exactly

also means if / when you have an update to it you can put it in here

Jazajay · 04:45 PM

Version1.02.

Quote:

<!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" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Contact us</title>
<style type="text/css">
#success h1{color:green}
#error h2{color:red}
#feedback{
position:absolute;
margin:-560px 0 0 450px;
width:400px;
height:200px;
padding:0 10px 10px;
-moz-box-shadow:1px 2px 5px #666;
-webkit-box-shadow:1px 2px 5px #666;
border:1px solid #CCC;
background:#FFF
}
#feedback,x:-webkit-any-link{margin-top:-600px}
#feedback,x:-moz-any-link{margin-top:-600px}
</style>


</head>
<body>
<?php if(!isset($_POST['name'])){?>
<h1>Contact us</h1>
<?php }
if(isset($_POST['name']))
{
$count=0;
$err="<h2>Please fix the errors below to be able to contact me: </h2>";
if(!empty($_POST["name"])){
$from = $_POST["name"];
}else{
$count++;
$err.="~ Please enter your name<br />";
} if(!empty($_POST["email"])){
$email_check = preg_match("/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/", $_POST["email"]);
if($email_check!==0){
$email=$_POST["email"];
}else{
$count++;
$err.="~ Your email address appears to be wrong,<br />";
}
}else{
$count++;
$err.="~ You need to enter an email address so I can contact you<br />";
} if(!empty($_POST['mess'])){
$content = "This message is from $from whose email address is $email.\r\n-----------\r\n ";
$content = $content . $_POST["mess"];
$content = strip_tags(wordwrap($content, 70));
}else{
$count++;
$err.="~ Your message was blank";
}
if($count==0){
$to="youremail@yoursite.com";
$subject="Message from ".strip_tags($_POST['name']);
$headers='MIME-Version: 1.0' . "\r\n";
$headers.='Content-type: text/html; charset=iso-8859-1'."\r\n";
if(!empty($_POST['email'])){$email="<p>Email: ".strip_tags($_POST['email'])."</p>";}
$body="<p>From: ".strip_tags($_POST['name'])."</p><p>Email:".strip_tags($_POST["email"])."</p><p>".strip_tags($_POST['mess'])."</p>";
mail($to,$subject,$body,$headers);
//Change the email address you want it to be sent to, this goes in the $to variable inside the quotes in the in the bolded statement above.
?>
<div id="success">
<h1>Success</h1>
<p>
Your message has been sent and I always aim to reply to all emails within 48hours.
</p>
<p>
Thank you for taking the time to contact me.
</p>
<p>
<i>Add your name or company name in here.</i>

</p>
<p>
<a href="">Back to our home page</a>

</p>
</div>
<?php }else{?>
<div id="error">
<h1><?php if($count>1){echo $count;?> errors <?php }else{?>1 error <?php }?>occured when trying to contact me</h1>
<form method="post" action="">
<p><label for="name">Name: </label></p>
<p>
<input type="text" name="name" id="name"<?php if(!empty($_POST["name"])){?> value="<?php echo $_POST['name'];?>"<?php }?> />
</p>
<p><label for="email">Email: </label></p>
<p>
<input type="text" name="email" id="email"<?php if(!empty($_POST["email"])){?> value="<?php echo $_POST['email'];?>"<?php }?> />
</p>
<p><label for="message">Message: </label></p>
<p>
<textarea name="mess" cols="50" rows="20" id="message"><?php if(!empty($_POST["mess"])){?><?php echo $_POST['mess'];}?></textarea>
</p>
<p><button type="submit">Contact me</button></p>
</form>
<div id="feedback">
<?php echo $err;?>
</div>
</div>
<?php }
}else{
?>
<form method="post" action="">
<p><label for="name">Name: </label></p>
<p>
<input type="text" name="name" id="name" />
</p>
<p><label for="email">Email: </label></p>
<p>
<input type="text" name="email" id="email" />
</p>
<p><label for="message">Message: </label></p>
<p>
<textarea name="mess" cols="50" rows="20" id="message"></textarea>
</p>
<p><button type="submit">Contact me</button></p>
</form>
<?php }?>

</body>
</html>

User notes
# Minor styling added,
# A few minor changes to the email script,
# A few minor changes to wording and error messages, this one is more user friendly and more designer/non programmer friendly,
# Uses some CSS3 but degrades nicely,
# CSS won't validate but it passes XHTML W3C validation at strict.
# The 2 hacks are to fix the Opera margin-top, which covers the heading in Opera if not applied.
# IE conditional for IE 7 to move the margin up more.
# IE 6 conditional to move the feedback box up and apply space to the top of it.
# Tested and works in Safari 4, Opera 10, IE6, IE7, IE8 and FireFox 3 on PC.
# The file needs to be saved as a php file so something like contact-me.php, not .html or .asp as we are using PHP code.

Harry · Post 6 Posted 11-12-09

Do you think it's wise to enforce your less than ideal naming conventions on others? You use them for reasons you understand and can justify, but for someone who's probably not as advanced as you, I'd seriously suggest sticking to the norm…

MCB Web Design · Post 7 Posted 11-12-09

So are we all creating code to share, now...?

tim · Post 8 Posted 11-12-09

@MCB Web Design

.........?

Jazajay · 09:31 PM

@Harry
I thought id's such as feedback and error where for other ppl, I would call them e1 and f`1 TBH. The reason I haven't put main or content in is because the said code will go into someone elses site so thats for them to do, let me know what your on about any way and I'll edit it for everyone.

@MCB
I've just seen post after post after post about this, and then another member linked to my contact form when another member asked about the sameish problem, so I thought I would make a post that I can then link to as a solution for the community as a whole, as that solution wouldn't work for everyone as it had his specialist captcha in, didn't you contribute slightly to this any way in optimizing code? Chris has however kindly made it a sticky as it is a topic a lot of ppl on here ask about a lot.

It was more to save me time in just writting the same code over and over again TBH.
By the way I do appologise I thought for some mad second that this was the web coding and development help forum?
My mistake.

Jazajay · 09:28 PM

@Harry
Did you mean the labels?
Yeah my fault didn't change them over, done now cheers fella well spotted.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

chrismitchell Giggidy / Team DF 4,479 Posts Milton Keynes	Thought I would make this one a sticky thread, Jaz The Widdler's Wee Online Farm Follow us on Twitter Just remember.. no matter how happy you think you are, you're never as happy as a Pineapple Chunk... They're well happy! Don't forget to donate blood!
	Post 2 Posted 11-12-09

chrismitchell Giggidy / Team DF 4,479 Posts Milton Keynes	exactly also means if / when you have an update to it you can put it in here The Widdler's Wee Online Farm Follow us on Twitter Just remember.. no matter how happy you think you are, you're never as happy as a Pineapple Chunk... They're well happy! Don't forget to donate blood!
	Post 4 Posted 11-12-09

Harry Web Developer 1,296 Posts Leeds, UK	Do you think it's wise to enforce your less than ideal naming conventions on others? You use them for reasons you understand and can justify, but for someone who's probably not as advanced as you, I'd seriously suggest sticking to the norm… I am—Harry Roberts \| Web Design+ (Licenses now available) \| CSS Wizardry \| And now Twitter
	Post 6 Posted 11-12-09

MCB Web Design Web developer 61 Posts Newcastle upon Ty	So are we all creating code to share, now...? LinkedIn • Twitter • Facebook • Affordable web design, Newcastle • Wrestling web design & MMA web design
	Post 7 Posted 11-12-09

tim Onartis-basher 4,306 Posts	@MCB Web Design .........? Dr. Frappucino
	Post 8 Posted 11-12-09

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Design Forums - UK Graphic Design & Web Design Forum

How to create a html contact form. Copy and paste and jobs a goodun.