Resource Index

    A brief tutorial on making forms, specifically for use with Matt Wright's formmail.cgi

    What is a Form?

    A form a method used to allow the viewer of the web page to send information or to interact with your web pages. Forms have many different uses, but the two main purposes are to send email and to call on varying Cgi scripts. Lets discuss a simple form that sends email. 

    Here is the actual code of a 3 field form.

    <CENTER><P><FORM method = POST action = "http://www.1-web-bazaar-plaza.com/cgibin/formmail.cgi">
    <INPUT type=hidden name="recipient" value="bill123@shell1.shore.net">
    <INPUT type=hidden name="required" value="email,realname">
    <INPUT type=hidden name="sort" value="order:realname,email,message">
    <INPUT type=hidden name="print_config" value="email,realname,message">
    <INPUT type=hidden name="title" value="Feedback Form Results">
    <INPUT type=hidden name="redirect" value="http://www.1-web-bazaar-plaza.com/post.htm">

    <FONT COLOR="#004000"><FONT SIZE=+1>Your
    email</FONT></FONT><BR>
    <INPUT type=text name="email" size = 50></P></CENTER>

    <CENTER><P><FONT COLOR="#004000"><FONT SIZE=+1>Your name</FONT></FONT><BR>
    <INPUT type=text name="realname" size = 50></P></CENTER>

    <CENTER><P><FONT COLOR="#004000"><FONT SIZE=+1>Message<BR>
    <TEXTAREA cols=40 rows=15 name ="message" WRAP=PHYSICAL>Subject: </TEXTAREA></P></FONT></FONT></CENTER>

    <CENTER><P><INPUT type=submit value = "Submit Form"><INPUT type=reset></FORM></P></CENTER>

    Now lets break it up...

    <CENTER><P><FORM method = POST action = "http://www.1-web-bazaar-plaza.com/cgibin/formmail.cgi">

    ...this calls the script...if the path to the location of the form script is wrong it won't work.

    <INPUT type=hidden name="recipient" value="somebody@somewhere.net">

    ...the "value" here is the place where you put the email address of where you want the mail sent. you can have as many email addresses in this field as you want separated by commas.

    ...The "hidden" tag takes information and sends it along to the script when the form is processed. The Viewer will never see the information, but the script needs it to process the form.

    <INPUT type=hidden name="required" value="email,realname">

    ...This field means that the fields named email  and realname are required input for the user or the script won't send the mail. The user is prompted with a message to complete the required fields.

    <INPUT type=hidden name="sort" value="order:realname,email,message">
    <INPUT type=hidden name="print_config" value="email,realname,message">

    ...These two fields determine how the fields are sorted and printed in the email the form is going to send. 

    <INPUT type=hidden name="title" value="Feedback Form Results">

    Determines the title of the message in the body of the email. This is not the same as Subject...which is determined in the script itself.

    <INPUT type=hidden name="redirect" value="http://www.1-web-bazaar-plaza.com/post.htm">

    This is the location of the page the user will be sent to after a successful email has been sent.

    <FONT COLOR="#004000"><FONT SIZE=+1>Your
    email</FONT></FONT><BR>
    <INPUT type=text name="email" size = 50></P>

    ...An Input tag. The three main parameters of this type of tag are "Type"...text is the basic field...or it could be a checkbox or a Radio button..

    "Name"...defines a name for the piece of information so the script knows what to do with the information.

    "Size"...Defines the size of the input box in width.

    <CENTER><P><FONT COLOR="#004000"><FONT SIZE=+1>Your name</FONT></FONT><BR>
    <INPUT type=text name="realname" size = 50></P></CENTER>

    ...Another Input Field...Notice you can use all the HTML around the Words that you want. The important thing is the Input Tag.

    <CENTER><P><FONT COLOR="#004000"><FONT SIZE=+1>Message<BR>
    <TEXTAREA cols=40 rows=15 name ="message" WRAP=PHYSICAL>Subject: </TEXTAREA></P></CENTER></FONT></FONT>

    This is a textarea...a large box for inputting line messages. The size is determined by the "cols" and the "rows", and this case we chose the text to wrap in the box. Notice there is a "Name" defined. Every tag in a form will always have a "Name".

    <CENTER><P><INPUT type=submit value = "Submit Form"><INPUT type=reset></FORM></P></CENTER>

    ...These are the buttons that send the forms to the script. Notice the new tag here..."Value". In this manner, "Value determines the words that show on the buttons for submitting the Form.

    Now this is only a very short form. Take a peek at the source for larger forms to see how they are handled. The Important thing to remember is that when you add a new field to your form, you must define the "Name" in the proper places in the top of the form in the "Hidden" Tags. The best way I have found to write a long form is to copy the source from another form and change the names and values to work with our script.

    Here is an example of a couple of large Forms with  varying formats. But in the end the information is handled the same way every time.

    Russian Splendor Order Form NCSA's Forms Tutorial