logo.gif

Adding Email Forms

Forms let your visitor fill out information, hit submit (or GO) and the information can be directed to the server for several different actions. An example may be to have the form filled out, and when submitted, will be emailed to you. In order for the form submission to be legible via email, they have to be processed. This can be done with CGI scripting (very advanced) or simply by having someone do it for you, like Bravenet Web Services.


E-Mail Form Question Options

There are 5 choices of form question layouts.

  1. Text fields
  2. Radio Buttons
  3. Check Boxes
  4. Selector Bars
  5. Text areas

Text Field: What's your name?
Radio Buttons:

Are you happy?
Yes No

Check Boxes:

Check one or more:
One Two Three

Selector Bar:

Select your favorite color:

Text Area:

Your Comments Please?

Submit/Reset Buttons:   


1) The Text Field

Text fields are one line of input. Normally you set a limit as to how many characters can be typed for the given field (maxlength). You can also set the size of the field (size).

<INPUT TYPE=TEXT NAME=name SIZE=40 maxlength=30 value="This only allows 30 characters">


<INPUT TYPE=TEXT NAME=name SIZE=30 maxlength=15 value="This only 15.">


2) The Radio Button

Radio Buttons allow for multiple choices yet the user can only select one. Multiple selections are not allowed with radio buttons. Notice that the NAME is the same for all buttons in a set, but the VALUE is different. Also notice that in the first one, the word "checked" is in the code which defaults "Yes" as being chosen when the page loads.

<INPUT type=radio name="happy" checked value="yes"> Yes
<INPUT type=radio name="happy" value="no">No
<INPUT type=radio name="happy" value="maybe">Maybe
Yes No Maybe


3) The Check Box

Check Boxes allow for multiple choices AND multiple selections. The user can select one or more. Notice that the NAME is now different for all checkboxes, but the VALUE is the same. Also notice that in the second two, the word "checked" is in the code which puts a check in the box for "Two" and "Three" when the page loads.

<INPUT type=checkbox name="One" value="yes">One
<INPUT type=checkbox checked name="Two" value="yes">Two
<INPUT type=checkbox checked name="Three" value="yes">Three
One Two Three


4) The Selector Bar

Selector Bars are perfect for questions that have many responses and you don't want to take up a lot of room on a page. They can be set for single or multiple selections allowed (either put in the word multiple or don't). If you choose multiple, you have to hold down the ctrl-key when making multiple choices. Notice the size can be however many cells you want.
The NAME designates the topic for all the individual VALUES.

<SELECT name="favorite_color" multiple size=3>
<OPTION selected value="Red"> Red </OPTION>
<OPTION value="blue"> Blue </OPTION>
<OPTION value="green"> Green </OPTION>
<OPTION value="purple"> Purple </OPTION>
<OPTION value="black"> Black </OPTION>
<OPTION value="yellow"> Yellow </OPTION>
<OPTION value="pink"> Pink </OPTION>
</SELECT>
Size set to 1 (not multiple) Size set to 3 (multiple)


5) The Text Area

Text fields are multiple lines of input. Normally this is where people respond with a lengthy answer of a paragraph or more. Be sure to put in the wrap=virtual so that when the typing hits the end of the line it auto wraps to the next line. You can set the columns and rows to whatever you like. And you can put in a default response that is preloaded in the box when the page loads.

<TEXTAREA WRAP=VIRTUAL NAME="comments" COLS=20 ROWS=5> Nice Site! </TEXTAREA>


6) The Submit and Reset Button

The Submit Button is what sends in the form once the user finishes filling it out. The Reset button erases andthing the user has typed so he can start again. Only change the VALUE of each.

<INPUT type=submit name=submit value="Send This Via E-mail To Freddy">
<INPUT type=reset name=reset value="Start Again">


7) Hidden Values

If you had several forms on different pages and you wanted to have a field in the e-mail you received that told you which page it came from, you can put in a hidden field. Only you will ever see this, the user will not.

<INPUT type=hidden name=webpage value=from_index_page>


A Sample Form

Want to see what a nice form can look like? ... click here.


Using JavaScript to Require Form Entries

Do you want to force people to fill in their name or email address in your form? By using Javascript, the person will be prompted to fill in the appropriate areas.
Here's how it's done... click here (advanced coders only please).


If you have a lot of content and need a way for your visitors to access it all, perhaps you need to change the way your site is laid out:

~~~~~ On to "Build A Site With Frames" ~~~~~