• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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


Jazajay

Active Member
#1
Please see the solution if you get a 500 error due to a bad server configuration.

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.
<!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)?>
<!--Change the email address you want it to be sent to in the first bolded statement, and the subject of the email address goes in the second bolded section.-->
<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>
<!-- Add your name here-->
</p>
<p>
<a href="">Back to our home page</a>
<!-- Add your domain name in between the quote marks ie http://www.yoursite.com/-->
</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 }?>
<!--Contact form courtesy of Jazajay at designforums.co.uk-->
</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 :)
 

Jazajay

Active Member
#3
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. :)
 

Jazajay

Active Member
#5
Version1.02.
<!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>
<!--[if IE]>
<style type="text/css">
#feedback{
margin-top:-580px;
height:180px
}
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
#feedback{
margin-top:-600px;
padding-top:10px;
height:190px
}
</style>
<![endif]-->
</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>
<!-- Add your name here-->
</p>
<p>
<a href="">Back to our home page</a>
<!-- Add your domain name in between the quote marks ie http://www.yoursite.com/-->
</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 }?>
<!--Contact form courtesy of Jazajay at designforums.co.uk-->
</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

Senior Member
#6
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…
 

Jazajay

Active Member
#9
@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. ;)
 
C

chrismitchell

Guest
#11
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

Senior Member
#12
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

Active Member
#13
I thought it would help everyone
In the last 4 pages in this forum alone there is ~
# http://www.designforums.co.uk/web-coding-development/3224-contact-form.html which has 7 replies, 90 ppl viewed it.

# http://www.designforums.co.uk/web-coding-development/3301-quick-contact-form-question.html which has 20 replies and 307 views

# http://www.designforums.co.uk/web-c...9-how-get-my-contact-form-do-what-i-want.html which has 33 responses, 181 page views.

# http://www.designforums.co.uk/web-coding-development/3859-contact-form.html 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.

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. :D

But I am glad it has helped. :)

Jaz
 

Jazajay

Active Member
#14
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

Active Member
#15
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
 

Jazajay

Active Member
#18
There shouldn't be a problem with the form sending on any device as along as the server you test it on has an active email client TBH because as soon as the form is submitted the server, not the device sends the email. :)

I meant more doe's it look correct in the iphone and other devices though or is it out in some areas. :)

Cheers for testing though.
Jaz
 

tbwcf

Active Member
#19
Hey Jazz how would you go about adding extra fields ie: telephone number...? I added in the html part:
<p><label for="tel">Telephone: </label></p>
<p>
<input type="text" name="tel" id="tel"<?php if(!empty($_POST["tel"])){?> value="<?php echo $_POST['tel'];?>"<?php }?> />
</p>
but it doesn't show when uploaded so I figured I needed to do something in the php if / else statements above but my attempts haven't worked.... :/

P.S - Got it working great in its original state!