Design Forums - Graphic Design & Web Design Forums

Jazajay · 05:27 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 · 05:28 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 · 08: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 · 08:28 PM

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

chrismitchell · Post 11 Posted 11-12-09

I thought it would help everyone to have this set as a sticky

mainly because it might be a common problem.

If there are loads of objections to this I will unsticky it

bentzak · Post 12 Posted 11-12-09

whatever the opposite to object is, im that, support? in favour? this is some good shizzle right here! its what DF's all about i thought! i believe jazajay was refering to me with the previous post, i tell ya one thing if this was up then it would of saved me and him heaps of time. i thank thee for the generosity! that rhymes, unintentional.

im sure i will be borrowing this code on current and future projects, and as soon as i have figured out what half of it means and have maybe written some of my own, i too will share, could be a bit of a wait tho.

i say again, as far as im concerned, this is truly appreciated. jaza, you da man.

Z

Jazajay · 06:20 PM

Quote:

I thought it would help everyone

In the last 4 pages in this forum alone there is ~
# contact form which has 7 replies, 90 ppl viewed it.

# A quick Contact Form question which has 20 replies and 307 views

# how to get my contact form to do what i want it to! which has 33 responses, 181 page views.

# Contact form which has 6 replies and 51 views.

Now take into account this thread has only been up for 22 hours and Sat being a slow day in forum views on the whole and this thread already has 79 views which is more than 1 of the help threads thats been up for a 3 days.

Taking them to a total of 66 replies and 700 ppl viewing them.

And most of the other threads are about individual problems/general questions and I know I've replied to threads on this before as well and I've been a member for well over a year now. But if ppl have an issue with it I don't mind Chris removing it then I, or other members if they like, will just link to it when anyone asks about how to create a contact form, same solution to the same problem as in ppl who need it will still see the code. At the end of the day I like to think DF has a good community not a community like some, where the top members dominate. Here everyone can contribute with out the fear of being belittled and as I have learnt stuff from members on here, don't have a problem saying that either, I wanted to give something back and as this seems to be asked a lot I saw the perfect opportunity.

Doesn't Harry do the same anyway, but links to his own site?
I don't have a problem with that as some of the CSS I've used in this form I've "borrowed" from his helpful post that link to his site showing a great example to a members problem, I also changed my how to code accessible XHTML data tables in my accessibility web coding thread to also link to his site as a great example of a well coded one for blind users so members can see the actual visualization of a good coded one.

Aww cheers Bentzak and yeah it was you I was referring to, but that's what I was trying to do you know be helpful to members who have helped me out in the past, just because I don't reply to a thread doesn't mean I don't learn from a thread.

Quote:

im sure i will be borrowing this code on current and future projects

I would advice you to bookmark that now though, but your more than welcome.

But I am glad it has helped.

Jaz

Jazajay · Post 14 Posted 24-01-10

To get it to work.

Hay guys to get it to work the file needs to end in .php not .html, .asp or whatever it must be called something like contact-me.php for it to be parsed properly.

If anyone runs into any issues please let me know and I'll help you through it.

Jazajay · Post 15 Posted 24-01-10

O if anyone would like to test it in any of the Mac or mobile phone browsers that would be great even if it looks fine it would still be nice to know. If you do please say which browser version and if it's a Mac or mobile device. Any code fixes for those browsers would also be appreciated if it is out slightly.

Thanks to anyone who takes the time to improve this for every one, it will be appreciated and credit will be given wheres credits due.

Jaz

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

chrismitchell Doom! / Team DF 5,379 Posts Milton Keynes	Thought I would make this one a sticky thread, Jaz The Widdler's Wee Online Farm \| Widdler's Wee Creative \| Follow us on Twitter \| Newswipe Now Live! Come join the Rant! 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 Doom! / Team DF 5,379 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 \| Widdler's Wee Creative \| Follow us on Twitter \| Newswipe Now Live! Come join the Rant! 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,553 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… Harry Roberts \| CSS Wizardry \| 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 Senior Member 4,378 Posts	@MCB Web Design .........? nobody?
	Post 8 Posted 11-12-09

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

Design Forums - Graphic Design & Web Design Forums

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