WEBSITE RESOURCES

How To Make An Online Form

> > How To Make An Online Form

Online forms are the most common website add-on out there. You won't visit many sites that don't contain a form of some kind. You'll forms on contact us pages, you'll find them as a way for a website to generate leads such as a mortgage company, just about any reason you would need someone to send you information is handled through a form.

A Web page form allows users to input and submit data, such as order information or user information. Forms include form elements, where users input their data.

There are several types of form elements to consider when creating a form:

Text box - Allows users to enter a line of text.
Text area - Allows users to enter multiple lines of text.
Radio button - Allows users to select an option from a group of options. Radio buttons are shown as circles with space in the center for a dot that indicates the radio button has been selected.
Checkbox - Allows users to select options from a group of options. Checkboxes are shown as squares with space within the borders for an X that indicates the checkbox has been selected.
List - Allows users to select options from a group of options. Lists are shown as a drop-down list or a list box.
Button - Allows users to click a button to call JavaScript code. For example, by clicking the Submit button, the user calls the JavaScript code that submits the form.

Form Text Fields

Text fields allows for letters & numbers.

<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

Radio Buttons

Radio buttons allow a user to select a specific item from a list.

<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

Checkboxes

Checkboxes allow a user to select multiple items from a list.

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

Drop Down Menus

Drop down menus allow a user to select a specific item from a list.

<form action="">
<select name="cars">
<option value="none" selected="selected">Select A Car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
</form>

Submit Button

The submit button allows a user to submit the information that they have entered into your form. A couple of ways that this can be handled is by sending you an email directly or writing the information to a database for future use.

Sample Online Form

I've put together a generic form so that you can see it in it's entirety. When you're creating your own form there will be many things that need to be changed but I at least wanted to give you an idea of a completed form.

<form METHOD=POST ACTION="http://www.yourdomain.com/cgi-bin/formmail.cgi">
<input type=hidden name="redirect" value="http://www.yourdomain.com/thankyou.html">
<input type="hidden" name="recipient" value="you@yourdomain.com">
<input type="hidden" name="subject" value="Online Form Submission">

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

<p>Do You Own A Car?:
<input TYPE="checkbox" NAME="car-owner" VALUE="Yes" checked>
</p>

<p>Do You Own Or Lease Your Car?
<select NAME="ownership">
<option VALUE="Own">Own
<option VALUE="Lease">Lease
</select>
</p>

<p>How Old Are You?
<input TYPE="radio" NAME="car-type" VALUE="Lexus" checked>Lexus
<input TYPE="radio" NAME="car-type" VALUE="BMW">BMW
<input TYPE="radio" NAME="car-type" VALUE="Acura">Acura
</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>

Form Scripts

Now you've built your form but what next? You will need a script to process the form and send the information to you whether it be by email or by submitting it to a database. I cover the scripts that are commonly used for emailing the information in the second part of my tutorial on online form scripts.

MakeAWebsiteSpot

How To Make A Website!

DIRECTORY