Creating an Email Form at NetRunner

At NetRunner, we allow all of our users to create mail forms and Imagemaps. This is not hard. For some reason though it's given nothing but headaches to a few of our users, these are passed on to everyone's favorite Webmaster (me). With nearly over 3000 users I cannot hold each individuals hand and guide them through this personally.
So....
We are going to review step by step how to create each element of a successful mail form. If after studying this you STILL cannot get it right, assistance is available, but at the cost of $100 per form.

The Three Steps

  • Create The Form
  • Create the Text File
  • Create the "AfterBirth" Document
  • Create The Form

    The Form:

    From:

    I have done the following today:

    • ate a spider
    • kicked a cat
    • gave to the poor
    • spammed Usenet
    • recommended NetRunner to my friends

    I think:

  • NetRunner is the best ISP in the World
  • I have to go to the Bathroom
  • My main goal in life is:

    Other comments:

    The source (my instruction appears in the "commented areas" which is rendered bright yellow in Netscape 2.0x and greater and Internet Explorer)

    <form METHOD="POST"
    ACTION="http://www.netrunner.net/cgi-bin/cgiemail/~beta/test.txt">

    <!--This Tag begins the form and calls the cgi program 'cgiemail'. You must replace ~beta with your user directory and test.txt with the name of the text file which you will create in step two. If the text file is not in the root of your public_html, you must put the full path to the subdirectory it is in->

    From: <input name="required-from"><p>

    <!--This is our first field. It is special in that it demonstrates one of the features of cgiemail. The "name" has a required element. This makes the completion of this field mandatory before the form can be submitted. The syntax must exactly match the above, only the 'from' part may be replaced i.e. "required-agreement", "required-blood_type","required-phone" etc.->

    I have done the following today:
    <ul>
    <li> <input type="checkbox" name="donewhat" value="eaten_a_spider">
    ate a spider

    <li> <input type="checkbox" name="donewhat" value="kicked_a_cat">
    kicked a cat

    <li> <input type="checkbox" name="donewhat" value="gave_to_the_poor">
    gave to the poor

    <li> <input type="checkbox" name="donewhat" value="spammed_usenet">
    spammed Usenet

    <li> <input type="checkbox" name="donewhat" value="recommended_netrunner">
    recommended NetRunner to my friends

    </ul>

    <!--This next group represents a checkbox type of response. The user may select as many options as they want (this is important to remember when you make your text file). Note: each value is more than one word but appears as only one word to the parser because they are separated by an underscore. This is a good practice as it make life easier for both the server and for you if you decide to import this information into a database. ->

    I think:<br>
    <menu>
    <li><INPUT NAME="thoughts" TYPE="radio" VALUE="NetRunner is the best ISP in the World" checked>NetRunner is the best ISP in the World
    <li><INPUT NAME="thoughts" TYPE="radio" VALUE="I have to go to the Bathroom">I have to go to the Bathroom
    </menu>
    <p>

    <!--Like checkbox fields radio buttons each have the same name. The difference is, only one may be selected. To have a choice "preselected" use the word 'checked' in the tag. ->

    <B>My main goal in life is:</B><br>
    <SELECT NAME="goal">
    <OPTION>Hack root's password
    <OPTION>Spam everyone on AOL
    <OPTION>Meet the Pope
    <OPTION>Send Sabercat $1000
    <OPTION>Live my Life as a Hermit
    <OPTION>Have an erotica newsgroup named after me
    </SELECT>
    <p>

    <!--A drop down list box. Remember that each choice will have a different size when formatting the text file.->

    Other comments:<p>
    <TEXTAREA NAME="comments" ROWS=2 COLS=60 wrap>
    </TEXTAREA>

    <!--Text areas can be any size you desire. It's wisest to place these near or at the bottom of the form. ->

    <input type="submit" value="Send email">

    <!--This is the button that sends the e-mail. Anything placed in the value will appear as text in the button. You may also put in a reset button by making another tag similar to submit but with the type of "reset" ->

    <input type="hidden" name="addendum" value="Thank you for your input. Your message is hurdling through Cyberspace even as you read this. Press the Back Button to return to the forms page. From there you can enjoy the rest of our site.">

    <!--Hidden tags are form elements which are not seen in the rendered form but contain information passed on to the cgi program. In our case there "addendum" passes along information pertaining to the "Afterbirth" document. That b eing the case, we will review the available options in Part 3- "Creating the Afterbirth Document". ->

    </form>

    <!--Don't forget to close the Form! ->

    The Text File

    Theory: The text file tells the cgi program where to send this and the format of the body. It consists of two parts:

    1. The header
    2. The body


    The header has a very rigid set of rules. Here is a sample header:

    To: beta@netrunner.net
    From: [required-from]
    Subject: WWW response


    The syntax for each of the lines must be as follows: Must be To, From and Subject, First letter capital, all the rest lowercase, no space then a colon, space then the desired contents of each field.

    Let's take each one individually:
    From: [required-from]
    This is line is dynamic. It is taken from the "From" field in the form. That field is named "required-from" so it is placed in square brackets and placed here.
    To: beta@netrunner.net
    This must be YOUR email address (or the address where you want the results to be mailed to)
    Subject: WWW response
    Self Explanatory. You may put whatever you want here including a form field in brackets.

    The body is pretty much up to you. How you format it depends on what you are going to do with it. Just remember: each field name must match exactly in case and spelling with the field name in the form. Here is an example of a layout which is good if you s imply desire to read the results.

    I have [donewhat]
    I think [thoughts] My
    goal is [goal] Comments: [comments]

    If you intend to import this information into a database or spreadsheet, you can format it like this:

    [donewhat],[thoughts],[goal], [comments]

    As far as formatting the body is concerned, you are limited only by your imagination.
    Let's put the whole text file together:


    #======================Begin Cut Here======================
    To: beta@netrunner.net
    From:[required-from]
    Subject: WWW response
    I have [donewhat]
    I think [thoughts]
    My goal is [goal]
    Comments:
    [comments] #

    ======================End Cut Here=======================

    Once you've completed the text file name it the same as the name of the form and give it an extension of text. IT MUST BE PLACED IN THE SAME SUBDIRECTORY AS THE FORM!!!!!!!!!!!!!!!!! Be sure to upload it as ASCII. If you up it as a BINARY, it will gain control^M chara^Mcters which may well ruin the formatting.

    The AfterBirth Document

    After the form is submitted the user is presented with a page which shows what they have submitted in the formatting you have specified in your text file. This is rather boring and very impersonal. You can change this in two ways. Remember the "hidden field" in the form?

    <input type="hidden" name="addendum" value="Thank you for your input. Your message is hurdling through Cyberspace even as you read this. Press the Back Button to return to the forms page. From there you can enjoy the rest of our site.">

    This places what is entered as a value under the information submitted.

    If that isn't enough for you, you can list a URL for the returned page:

    <input type="hidden" name="success" value="http://www.netrunner.net/response.html">

    This displays the page "response.html" after the form is successfully sent. Of course the page can contain graphics or any other element you desire.

    Webmasters Note:

    This works now! Just make sure success is the value! Sorry for the mix-up!

    It doesn't work!!!!!!!!!!

    If your form doesn't work, here are a few places to look for the reason:

  • Have you called the text file path properly in the form statement?
  • Are the form and the text file in the same directory?
  • Did you upload both as "ASCII"?
  • Did you follow the "header" part of the text file exactly as instructed?
  • Are any other forms on NetRunner working? Maybe the server is overloaded.
  • Is your HTML correct?
  • Copyright 1997-2018 NetRunner Inc. All Rights Reserved.