Forms

[gayremix]

Hi people

How can i create a HTML Contact form?

:)

At the moment I have got

<form action="mailto:info@out-designs.co.uk" method="post" enctype="text/plain" name="E-Mail1" id="E-Mail">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table10">
<tr>
<td align="left">
<b>Name</b></td>
<td>
<div align="left" style="margin-left: 5px">
<input name="Name" class="frmText" size="59"></td>
</tr>
<tr>
<td align="left">
&nbsp;</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td align="left">
<b>E-Mail</b></td>
<td>
<div align="left" style="margin-left: 5px">
<input name="E-Mail" class="frmText" size="59"></td>
</tr>
<tr>
<td align="left">
&nbsp;</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td align="left">
<b>I am looking for</b></td>
<td align="left" tyle="margin-left: 5px">
<div style="margin-left: 5px">
<select class="frmText" name="after" size="1" style="font-family: Verdana; font-size: 8pt">
<option value="Banners (Web Sites - Birthdays etc...)" selected>Banners (Web Sites - Birthdays etc...)</option>
<option value="Brochures">Brochures</option>
<option value="Business Cards">Business Cards</option>
<option value="Business Forms">Business Forms</option>
<option value="Cataloes">Cataloes</option>
<option value="Envelopes">Envelopes</option>
<option value="Forums (Message Boards)">Forums (Message Boards)</option>
<option value="Greeting Cards">Greeting Cards</option>
<option value="Labels">Labels</option>
<option value="Letterheads (A1 - A5)">Letterheads (A1 - A5)</option>
<option value="Menus">Menus</option>
<option value="Newsletters">Newsletters</option>
<option value="Signs">Signs</option>
<option value="PDF Creations">PDF Creations</option>
<option>============================</option>
<option value="Hosting Option: Basic">Hosting Option: Basic</option>
<option value="Hosting Option: Basic Plus">Hosting Option: Basic Plus</option>
<option value="Hosting Option: Basic Pro">Hosting Option: Basic Pro</option>
<option value="Hosting Option: Windows Hosting Packages">Hosting Option: Windows Hosting Packages</option>
<option value="Hosting Option: Linux Hosting Packages">Hosting Option: Linux Hosting Packages</option>
</select>
</td>
</tr>
<tr>
<td align="left">
&nbsp;</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td valign="top" align="left">
<b>Comment</b></td>
<td>
<div style="margin-left: 5px" align="left">
<textarea name="Comment" rows="13" cols="60" class="textarea" style="font-family: Verdana; font-size: 8pt"></textarea></td>
</tr>
</table>
</div>
<div align="center">
<input type="submit" style="font-family: Verdana; font-size: 8pt" value="Send">
<br>
&nbsp;</form>

But it still doesnt work :( can anyone help please.

[mwinter]

How can i create a HTML Contact form?By using a server-side form processor. Don't even think about trying to use the mailto: scheme. It's unreliable.

There are many form processors available. Your host might provide one, but if not, there are plenty of free and cheap commercial services (http://cgi.resourceindex.com/Remotely_Hosted/Form_Processing/) available.


I suggest that you learn to write valid markup. Some elements (div elements, for example) must have a closing tag. Omitting it can have strange effects on a document as the browser tries to error-correct the document tree.

A validator, such as the W3C markup validator (http://validator.w3.org/) can help you catch errors like these, though the error messages can be cryptic if you don't understand what problems can occur and why.

Your markup needn't be so complex. Below is a rewritten version that uses CSS to style the form.

In the head element:



<style type="text/css">
#contact-form label {
font-weight: bold;
}
#contact-form optgroup {
font-style: normal;
font-weight: bold;
}
#contact-form td {
vertical-align: top;
}
#contact-form #labels {
width: 8em;
}
#contact-form #name, #e-mail {
width: 12em;
}
#contact-form #controls {
text-align: right;
}
</style>


<form id="contact-form" action="..." method="post">
<table>
<col id="labels">

<tr>
<td><label for="name">Name:</label></td>
<td><input id="name" name="Name" value=""></td>
</tr>
<tr>
<td><label for="e-mail">E-mail:</label></td>
<td><input id="e-mail" name="E-Mail" value=""></td>
</tr>
<tr>
<td><label for="subject">I am looking for:</label></td>
<td>
<select id="subject" name="after" size="1">
<option value="Banners">Banners (Websites, Birthdays,
etc.)</option>
<option value="Brochures">Brochures</option>
<option value="Business cards">Business cards</option>
<option value="Business forms">Business forms</option>
<option value="Catalogues">Catalogues</option>
<option value="Envelopes">Envelopes</option>
<option value="Forums">Forums (Message boards)</option>
<option value="Greeting cards">Greeting cards</option>
<option value="Labels">Labels</option>
<option value="Letterheads">Letterheads (A1–A5)</option>
<option value="Menus">Menus</option>
<option value="Newsletters">Newsletters</option>
<option value="Signs">Signs</option>
<option value="PDF creations">PDF creations</option>

<optgroup label="Hosting Options">
<option value="Hosting: Basic">Basic</option>
<option value="Hosting: Basic Plus">Basic Plus</option>
<option value="Hosting: Basic Pro">Basic Pro</option>
<option value="Hosting: Windows Package">Windows Hosting
Packages</option>
<option value="Hosting: Linux Package">Linux Hosting
Packages</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td><label for="comment">Comment:</label></td>
<td>
<textarea id="comment" name="Comment" cols="50"
rows="10"></textarea>
</td>
</tr>
<tr>
<td id="controls" colspan="2"><input type="submit" value="Send"></td>
</tr>
</table>
</form>
Note that the action attribute of the form is undefined. When you find a form processor that suits your needs, you'll need to replace the value.



<select class="frmText" name="after" size="1" style="font-family: Verdana; font-size: 8pt">Don't use Verdana (http://www.xs4all.nl/~sbpoley/webmatters/verdana.html) if you're going to attempt to shrink it. Also, the point (pt) unit is inappropriate for screen media: it's meant for printing. Use percentages to specify font size, preferably with everything except legalese and perhaps navigation at 100% or greater.

Mike