Sample XHTML Contact Forms

Below are three examples of "Contact" or "Feedback Forms" for placement on a webpage. These forms contain the most common input elements, and validate strict XHTML.

The objective of this tutorial is to help the new user implement an attractive and well-coded form with as little effort as possible. However, a form processing script must be used in conjunction with the form in order for the email to be generated.

These forms were designed to be used with the popular NMS FormMail script - which uses the Perl program. Please begin by reading our tutorial Easy Instructions for Implementing NMS FormMail. This tutorial tells you everything you need to know, with clear step-by-step directions, to customize one of our sample forms for your environment and get your form implemented on your website lickity-split!

For accessibility reasons the Label tag is included on elements other than checkboxes and buttons. Make sure the value in the Label tag matches an id in the input control that follows. Also, we have placed the input element on the line below the label on all three forms. If you want the input element on the same line as the label, remove the break <br /> after the label.

We have included CSS code that will enhance how the form displays on the webpage. If you don't have a stylesheet, place the code below just before the closing Head tag </head> in your webpage. Font-size and font-color for the heading (<h2>) and paragraph text will default to your page settings. Explanations of the two CSS classes follows the code.

<style type="text/css">
<!--
.myform1 {text-align:center;font-size:100%;color:#003399;margin:10px 0;padding:10px 0;border:solid #999999 1px;}
.myform2 {text-align:left;margin:0 auto;width:440px;font-size:100%;color:#003399;}
-->
</style>

.myform1 is required for all three forms. It adds a thin border around the form and centers everything inside the form. It also adds padding (inside the border), and margins (outside the border). PS: If you want the form to have a background color, add background-color:#999999; to the class, substituting your color's hex code for 999999.
.myform2 is only required for Form # 2 and Form #3, and is placed on an opening div tag just below the Form tag. As we do NOT want labels and input elements centered on these forms, this class left-aligns them, but centers the elements as a whole inside the bordered area of the form - even on liquid or fluid page layouts!

Back to Top

Sample Form #1 (Checkboxes) and the Form HTML

By default, a user can select multiple checkboxes. Use menus or radio buttons if only one choice is allowed (see Forms #2 and #3).

In the code, the word listed after "name=" identifies or names the particular element, and the word or words after "value=" is the data for that element that is sent in the outgoing email.

<div class="myform1">

<h2>Feedback Form #1</h2>
<p>For more information, please complete the information below and click Submit.</p>

<form action="/cgi-bin/umbrella.pl" method="post">
<p>
<input type="hidden" name="required" value="name,phone,email" />
<input type="hidden" name="title" value="Thank you for contacting Keynote Support" />
<input type="hidden" name="return_link_url" value="http://www.keynotesupport.com/index.shtml" />
<input type="hidden" name="return_link_title" value="Go to the Homepage" />
<label for="subject1">SUBJECT:</label><br />
<span><input type="text" name="subject" id="subject1" size="40" /></span><br /><br/>

<label for="name1">NAME:</label><br />
<span><input type="text" name="name" id="name1" size="60" /></span><br /><br />

<label for="phone1">PHONE:</label><br />
<span><input type="text" name="phone" id="phone1" size="60" /></span><br /><br />

<label for="email1">E-MAIL ADDRESS:</label><br />
<span><input type="text" name="email" id="email1" size="60" /></span><br /><br />

INTERESTED IN TYPE OF COMPUTER:<br /><br />
<input type="checkbox" name="type" value="desktop" />Desktop
<input type="checkbox" name="type" value="notebook" />Notebook
<input type="checkbox" name="type" value="netbook" />Netbook
<input type="checkbox" name="type" value="server" />Server
<input type="checkbox" name="type" value="other" />Other<br /><br />

<label for="comments1">COMMENTS:</label><br />
<span><textarea name="comments" id="comments1" rows="4" cols="45"></textarea></span><br /><br />
<span><input type="reset" value="RESET" />
<input type="submit" value="SUBMIT" /></span><br />
</p>
</form>

</div><!--end div myform1-->

Back to Top

Sample Form #2 (Menu Lists) and the Form HTML

Four menus are shown on this form. Depending on your needs, choose the one you want and delete the others. By default, a user can only select one item from a menu.

Menu 1 displays all 3 choices. You specify this by placing size="3" in the select statement.
Menu 2 is like Menu 1, except the user can select multiple items by holding the Ctrl key while clicking. You authorize multiple selections by adding multiple="multiple" to the select element. Always provide instructions if multiple selections are allowed.
Menu 3 is a dropdown menu with three choices. By default, a dropdown menu displays the first item in the code. But we want "Windows 7" to display, so we've pre-selected it by adding selected="selected" to its option element.
Menu 4 is also a dropdown menu, but we don't want "$100 to $499" to display by default, nor do we want to pre-select a price range. So we created a first item in the list that says "Please choose one" and gave it a null value. If the user doesn't select a price, no data for price is included in the email.

<div class="myform1">
<h2>Feedback Form #2</h2>
<p>For more information, please complete the information below and click Submit.</p>

<form action="/cgi-bin/umbrella.pl" method="post">
<div class="myform2">
<input type="hidden" name="required" value="name,phone,email" />
<input type="hidden" name="title" value="Thank you for contacting Keynote Support" />
<input type="hidden" name="return_link_url" value="http://www.keynotesupport.com/index.shtml" />
<input type="hidden" name="return_link_title" value="Go to the Homepage" />

<label for="subject2">SUBJECT:</label><br />
<span><input type="text" name="subject" id="subject2" size="40" /></span><br /><br/>

<label for="name2">NAME:</label><br />
<span><input type="text" name="name" id="name2" size="60" /></span><br /><br />

<label for="phone2">PHONE:</label><br />
<span><input type="text" name="phone" id="phone2" size="60" /></span><br /><br />

<label for="email2">E-MAIL ADDRESS:</label><br />
<span><input type="text" name="email" id="email2" size="60" /></span><br /><br />

PRODUCT OF INTEREST (May only choose one):<br />
<select name="type1" size="3">
<option value="desktop">Desktop Computers</option>
<option value="notebook">Notebook Laptops</option>
<option value="netbook">Netbook Laptops</option>
</select><br /><br />

PRODUCT OF INTEREST (Hold the Ctrl key to select more than one):<br />
<select multiple="multiple" name="type2" size="3">
<option value="desktop">Desktop Computers</option>
<option value="notebook">Notebook Laptops</option>
<option value="netbook">Netbook Laptops</option>
</select><br /><br />

OPERATING SYSTEM:<br />
<select name="os">
<option value="XP">Windows XP</option>
<option value="Vista">Windows Vista</option>
<option selected="selected" value="Win 7">Windows 7</option>
</select><br /><br />

PREFERRED PRICE RANGE:<br />
<select name="price">
<option value=" ">Please choose one</option>
<option>$100 to $499</option>
<option>$500 to $999</option>
<option>$1000 to $1499</option>
<option>$1500 to $1999</option>
<option>$2000 or more</option>
</select><br /><br />

<label for="comments2">COMMENTS:</label><br />
<span><textarea name="comments" id="comments2" rows="4" cols="45"></textarea></span><br /><br />

<span><input type="reset" value="RESET" />
<input type="submit" value="SUBMIT" /></span><br />
</div><!--end div myform2-->
</form>

</div><!--end div myform1-->

Back to Top

Sample Form #3 (Radio Buttons) and the Form HTML

When Radio Buttons are used on a form, the user can only make one choice.

<div class="myform1">
<h2>Feedback Form #3</h2>
<p>For more information, please complete the information below and click Submit.</p>

<form action="/cgi-bin/umbrella.pl" method="post">
<div class="myform2">
<input type="hidden" name="required" value="name,phone,email" />
<input type="hidden" name="title" value="Thank you for contacting Keynote Support" />
<input type="hidden" name="return_link_url" value="http://www.keynotesupport.com/index.shtml" />
<input type="hidden" name="return_link_title" value="Go to the Homepage" />

<label for="subject3">SUBJECT:</label><br />
<span><input type="text" name="subject3" id="subject3" size="40" /></span><br /><br/>

<label for="name3">NAME:</label><br />
<span><input type="text" name="name" id="name3" size="60" /></span><br /><br />

<label for="phone3">PHONE:</label><br />
<span><input type="text" name="phone" id="phone3" size="60" /></span><br /><br />

<label for="email3">E-MAIL ADDRESS:</label><br />
<span><input type="text" name="email" id="email3" size="60" /></span><br /><br />

SELECT A SOFTWARE PRODUCT:<br />
<input type="radio" name="software" value="Excel" />Microsoft Excel<br />
<input type="radio" name="software" value="QBP" />QuickBooks Pro<br />
<input type="radio" name="software" value="Peachtree" />Peachtree Accounting<br />
<input type="radio" name="software" value="Photoshop" />Adobe Photoshop<br /><br />

WHAT IS YOUR CURRENT LEVEL?<br />
<input type="radio" name="level" value="Beginner" />Beginner
<input type="radio" name="level" value="Intermediate" /> Intermediate
<input type="radio" name="level" value="Advanced" />Advanced<br /><br />

<label for="comments3">COMMENTS:</label><br />
<span><textarea name="comments" id="comments3" rows="4" cols="45"></textarea></span><br /><br />

<span><input type="reset" value="RESET" />
<input type="submit" value="SUBMIT" /></span><br />
</div><!--end myform2-->
</form>

</div><!--end myform1-->

Helpful Links

HTML <form> Tag
HTML XHTML Form Code Tutorial

►  Take a look at some of our other interesting tutorials, such as our popular Excel Math Formulas for clear explanations and LOTS of examples, or our informative article All About Your Credit Report!. (Don't be tricked by other sites. We explain how to get your FREE copy sponsored by the U.S. government).

Back to Top