Ok James, here's your table free form.
HTML Code:
<div class="contactform">
<form action="http://www.fastnet.co.uk/cgi-bin/coolmail.cgi" method="post">
<div>
<input type="hidden" name="recipient" value="david@hickmet.com"/>
<input type="hidden" name="subject" value="Web submission"/>
<input type="hidden" name="goto" value="http://www.evolvewebsitedesign.com/projects/hmt/site/thankyou.asp"/>
</div>
<fieldset>
<legend>Contact Us</legend>
<label for="name">Name</label><input id="name" name="name" type="text" size="20" maxlength="160"/><br />
<label for="address">Address</label><textarea id="address" name="Address" rows="5" cols="30"></textarea><br />
<label for="phone">Phone Number</label><input id="phone" name="phone" type="text" size="20" maxlength="160"/><br />
<label for="fax">Fax</label><input id="fax" name="fax" type="text" size="20" maxlength="160"/><br />
<label for="e-mail">Email</label><input id="e-mail" name="e-mail" type="text" size="20" maxlength="160"/><br />
<label for="message">Message</label><textarea id="message" name="message" rows="10" cols="30"></textarea><br />
<label for="reply">How would you like us to reply?</label><br />
<select id="reply" name="reply">
<option value="email">email</option>
<option value="phone">phone</option>
<option value="fax">fax</option>
<option value="post">post</option>
</select>
</fieldset>
<div>
<input type="submit" id="Submit" name="Submit" value="Send Message" onclick="MM_validateForm('NAME','','R','E-MAIL','','RisEmail','MESSAGE','','R');return document.MM_returnValue" />
</div>
</form>
</div>
The code below contains the Web page with the table-free form in it (for comparison purposes). ~98% of the code is the same (there were some changes, aside from getting rid of the layout table, like putting the <title> above the meta data, and formatting the HTML source).
If you like, I can also give you a truely semantic version of this page, with the proper elements being used for the proper jobs (which will reduce the page weight, but will involve restyling the entire page in your stylesheet).
HTML Code:
<!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" xml:lang="en" lang="en">
<head>
<title>Contact Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content=""/>
<link href="nav.css" rel="stylesheet" type="text/css"/>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
td.150 {width:150px;}
</style>
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_validateForm() { //v4.0
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=MM_findObj(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') {
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 (val<min || max<val) 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>
<script type="text/javascript">
<!--
var newwindow;
function poptastic(url)
{
newwindow=window.open(url,'name','height=600,width=400');
if (window.focus) {newwindow.focus()}
}
//-->
</script>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>
<div class="container">
<img class="nopadding" height="115" width="800" src="images/header.jpg" alt="header logo" />
<div id="nav-menu">
<ul class="top-nav">
<li class="home"><a href="index.asp"></a></li>
<li class="aboutus"><a href="aboutus.asp"></a></li>
<li class="sculptures"><a href="sculptures.asp"></a></li>
<li class="events"><a href="events.asp"></a></li>
<li class="contactus"><a href="contactus.asp"></a></li>
</ul>
</div>
<div class="main">
<div class="col-right">
<div class="col-right_outside">
<div class="col-right_inside"><img class="featuredsculpturestitle" src="images/contactus-page.jpg" alt="contact us" />
<br/>
<p>Our main gallery is situated at:
<br/>
<br/>
107 Portobello Road<br/>
London W11 2QB<br/>
Tel: 0 (+44) 797 185 0405<br/>
<b>Open Saturdays 7 am to 4 pm
and by appointment</b><br/><br/>
You can contact our office by Telephone or Fax at these numbers:
<br/>
<br/>
United Kingdom<br/><br/>
Tel : 01 342 841 508<br/>
Fax: 01 342 841 879<br/><br/>
USA & Canada<br/><br/>
Tel : 011 44 1 342 841 508<br/>
Fax: 011 44 1 342 841 879<br/><br/>
Other Countries<br/><br/>
Tel : (CODE) 44 1 342 841 508<br/>
Fax: (CODE) 44 1 342 841 879
</p>
<p>
<b>You can get in contact with us through the following form</b>
</p>
<div class="contactform">
<form action="http://www.fastnet.co.uk/cgi-bin/coolmail.cgi" method="post">
<div>
<input type="hidden" name="recipient" value="david@hickmet.com"/>
<input type="hidden" name="subject" value="Web submission"/>
<input type="hidden" name="goto" value="http://www.evolvewebsitedesign.com/projects/hmt/site/thankyou.asp"/>
</div>
<fieldset>
<legend>Contact Us</legend>
<label for="name">Name</label><input id="name" name="name" type="text" size="20" maxlength="160"/><br />
<label for="address">Address</label><textarea id="address" name="Address" rows="5" cols="30"></textarea><br />
<label for="phone">Phone Number</label><input id="phone" name="phone" type="text" size="20" maxlength="160"/><br />
<label for="fax">Fax</label><input id="fax" name="fax" type="text" size="20" maxlength="160"/><br />
<label for="e-mail">Email</label><input id="e-mail" name="e-mail" type="text" size="20" maxlength="160"/><br />
<label for="message">Message</label><textarea id="message" name="message" rows="10" cols="30"></textarea><br />
<label for="reply">How would you like us to reply?</label><br />
<select id="reply" name="reply">
<option value="email">email</option>
<option value="phone">phone</option>
<option value="fax">fax</option>
<option value="post">post</option>
</select>
</fieldset>
<div>
<input type="submit" id="Submit" name="Submit" value="Send Message" onclick="MM_validateForm('NAME','','R','E-MAIL','','RisEmail','MESSAGE','','R');return document.MM_returnValue" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-left">
<img class="coinlogo" src="images/hickmet-logo.jpg" alt="hickmet"/>
<div class="col-left_outside">
<div class="col-left_inside">
<img src="images/nextevent.jpg" alt="next event"/>
<p>
<b>7th-12th November</b>
</p>
<p>
The Winter Olympia Fine Art & Antiques Fair
</p>
<p>
http://olympia-antiques.co.uk/
</p>
</div>
</div>
<div class="col-left_outside">
<div class="col-left_inside">
<img src="images/contactus.jpg" alt="contact us" />
<p>
You can either get in contact with us by phone or email:-
<br/>
<br/>
<b>01342 841 508<br/>
david@hickmet.com</b>
</p>
</div>
</div>
<img class="lapada" src="images/lapada.jpg" height="80" width="80" alt="lapada "/>
</div>
<div class="footer">
<ul class="textnavs">
<li class="textnavs"><a href="index.asp">home</a></li>
<li class="textnavs"><a href="aboutus.asp">about us</a></li>
<li class="textnavs"><a href="sculptures.asp">sculptures</a></li>
<li class="textnavs"><a href="events.asp">events</a></li>
<li class="textnavs"><a href="contactus.asp">contact us</a></li>
</ul>
<div class="evolve">
Designed and created by <b><a href="http://www.evolvewebsitedesign.com">Evolve Website Design</a></b>
</div>
</div>
</div>
</div>
</body>
</html>
Note that I had the hidden form fields (along with the submit input field) contained inside DIV containers. THis is because you need a block-level element to separate the input fields from the form element, or else the page will fail validation (to answer your question from earlier).
If you need help styling the form, don't hesitate to ask on the thread 
.
Originally Posted by Dan Schulz
Bookmarks