Free HTML Tutorial - Learn HTML

 

Creating Forms

Probably one of the easiest forms to setup is the FormMail form.  However, in order to make this work your site must be hosted with a host that allows you to upload files to your cgi bin.

If you are not sure about this, contact your web hoster.

Next, download the formmail script and follow the instructions provided. Once you've edited the script as necessary, upload/save it to your site's cgi bin folder on your web server.  If you do not have a folder named "cgi bin", then you can create a new folder/directory.

HTML Code for Forms

Once the FormMail file is in place on your server, all you have to do is create a page with the form code to make it work.

Below you'll find the code for creating a form in which your visitors can fill out and the results will be emailed to your email address.

The form has the following fields:

• Text box
• Password Field (hidden text)
• Check Box
• Radio Buttons 

Here is what the form will look like and below you will find the HTML code.  You will need to change some variables (in red) to customize it to your own needs.

Your Name:

Password:

Please Place me on your mailing list:

What's Your Gender? Male Female

How Old Are You? 0-25 26-50 51 and Over

Comments:
You can insert default text here if you wish

Here's the code for the form you can copy and paste.  Feel free to remove the HTML code for fields you don't need or adjust the various values to fit your liking.

Notice the red text.  This is what you need to edit to customize the form.

1) The 1st line should be changed to the address of the FormMail script on your server.
2) The 2nd line should be the address of the page the user views after they submit the form.  You may need to create this page.
3) The 3rd line is the email address the form results will be sent to.
4) The 4th line is the subject of the email when the form is sent to your address.

<form METHOD=POST ACTION="http://www.yoursite.com/cgi-bin/formmail.cgi">
<input type=hidden name="redirect" value="http://www.yoursite.com/thankyou.html">
<input type="hidden" name="recipient" value="email@youremail.com">
<input type="hidden" name="subject" value="Form Subject">

<p>Your Name: <input TYPE="text" NAME="Name" SIZE="40" MAXLENGTH="40">
</p>

<p>Password:
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</p>

<p>Please Place me on your mailing list:
<input TYPE="checkbox" NAME="mailing-list" VALUE="Yes" checked>
</p>

<p>What's Your Gender?
<select NAME="Gender">
<option VALUE="Male">Male
<option VALUE="Female">Female
</select>
</p>

<p>How Old Are You?
<input TYPE="radio" NAME="Age" VALUE="0-25" checked>0-25
<input TYPE="radio" NAME="Age" VALUE="26-50">26-50
<input TYPE="radio" NAME="Age" VALUE="50 and over">51 and Over
</p>

<p>Comments: <br>
<textarea NAME="comments" ROWS="10" COLS="50" wrap="virtual">
You can insert default text here if you wish
</textarea>
</p>

<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form">
</p>

</form>