In order to gather information from your webpage viewers, you need to create a form that will capture that information and process it. This tuitorial will focus on creating a form that your web viewer can use to input their data, and configuring the form so that the data will be packaged in an email and delivered to the email address(es) of your choice.
We are going to use a Perl script called FormMail. FormMail is a generic WWW form to e-mail gateway, which will parse the results of any form and send them to the specified user. This script has many formatting and operational options, most of which can be specified through the form, meaning you don't need any programming knowledge or multiple scripts for multiple forms.
For detailed information about how the script works, visit the readme file on the References page.
Once you work your way through the following sections, you'll have working knowledge on what it takes to send email from a web form.
These "form" tags create the shell of every web form you'll create. They don't do anything by themselves, but they are the holders for all the meat of the form. Let's look at three important attributes in the opening form tag.
METHOD - you'll always want a method attribute, because this determines the way that the data is transmitted to the script. Use "post" on these forms.
ACTION - if you want the data to go somewhere or do something, you'll need a value to the action attribute. This is usually a script. We'll give you the value to use here later.
NAME - although a name is not required for the script to work, it's a good idea to include it now, as it will be required if you use JavaScript at a latter date.
Okay, let's make this form do something.
Copy this code and paste it into a plain text word processor, like Windows Notepad.
<form method=post action="https://scripts.georgefox.edu/cgi-bin/FormMail.pl" name="example2">
<input type=hidden name=recipient value=bweldon@georgefox.edu>
<input type=text size=40 name=VacationSpot value="where do you like to vacation?">
<br><input type=submit name=submit value=submit><input type=reset name=reset value=reset>
</form>
Notice we've added a value to the form action attribute. Use:
- https://scripts.georgefox.edu/cgi-bin/FormMail.pl (this is case sensitive).
We've added a special input type whose type value is "hidden". This input type is special because, like the value states, from the web page, it's invisible or hidden. Let's talk about it's attributes.
TYPE - when set to "hidden", the hard-coded name/value pair will be passed to the script, but there will be no indication on the webpage.
NAME - when set to "recipient", the script will gather all the form elements and package them into an email, to be sent to the email address attached to the "value".
VALUE - use the foxmail email address you want the form data sent to. If you want the form data to be sent to a variety of people, list their email addresses within the quotes, each seperated by a comma.
We've added a place for text input. Let's talk about it's attributes.
TYPE - when set to "text", you'll get a one line text box that brief text can be typed into.
SIZE - this denotes the approximate width of the text box on the web page.
NAME - although a name is not required for the script to work, it's a good idea to include it now, as it will be required if you use JavaScript at a latter date.
And what about the submit and reset buttons?
TYPE - when set to "submit", you'll get the submit button. Pretty much required. (Reset is optional - probably useful if your user is going to reuse the form multiple times, ie entering product data)
NAME - although a name is not required for the script to work, it's a good idea to include it now, as it will be required if you use JavaScript at a latter date.
VALUE - this sets the visible text on the button.
The form should look like this on a web page now.
Adding a multi-line text box
Okay, a brief line of text is great for inputting a name or address, but what if you want to capture a paragraph? Enter the textarea tag. Here's your next snippet of code:
The TEXTAREA tag provides a place for a paragraph (or more) of text. To use this tag, you'll need to include both opening and closing tags. Let's talk about it's attributes.
ROWS - a number like 4 will give the user a box that will accept 4 lines of text before scrolling begins.
COLS - this denotes the approximate width of the textarea on the web page.
NAME - although a name is not required for the script to work, it's a good idea to include it now, as it will be required if you use JavaScript at a latter date.
The form should look like this on a web page now.
Adding single selections with Radio Buttons
If you have a limited selection, only want the user to select one choice, and you want to control the choices, try using a radio button tag.
<form method=post action="https://scripts.georgefox.edu/cgi-bin/FormMail.pl" name="example3">
<input type=hidden name=recipient value=bweldon@georgefox.edu>
My favorite vacation temperature is ...<br>
<input type=radio name=temperature value="in the 60's">in the 60's<br>
<input type=radio name=temperature value="in the 70's" checked>in the 70's<br>
<input type=radio name=temperature value="in the 80's">in the 80's<br>
<br><input type=submit name=submit value=submit><input type=reset name=reset value=reset>
</form>
The RADIO BUTTON tag allows you to create a list of items that you want the user to select from, but only select one item. You can even pre-select an item for them. You can have as many radio buttons as you want. Let's talk about it's attributes.
TYPE - when set to "radio", you'll get the radio button. Required for each radio button you want.
NAME - required to group the radio buttons together.
VALUE - this is the data value that will be sent to the email receipent.
CHECKED - when included, this will pre-select the radio button. Optional, can only be used on a single radio button.
The form should look like this on a web page now.
Using Checkboxes to allow multiple selections
If you have a limited selection, want to give the user the ability to select multiple choices, and you want to control the choices, use a checkbox tag.
<form method=post action="https://scripts.georgefox.edu/cgi-bin/FormMail.pl" name="example3">
<input type=hidden name=recipient value=bweldon@georgefox.edu>
I'd accept a free ticket to ...[check all that apply]<br>
<input type=checkbox name=destination-hawaii value=yes>Hawaii<br>
<input type=checkbox name=destination-london value=yes>London<br>
<input type=checkbox name=destination-portland value=yes>Portland<br>
<br><input type=submit name=submit value=submit><input type=reset name=reset value=reset>
</form>
The CHECKBOX tag allows you to create a list of items that you want the user to select from, and they can even make multiple selections. You can even pre-select items for them. You can have as many checkboxes as you want. Let's talk about it's attributes.
TYPE - when set to "checkbox", you'll get the checkbox. Required for each checkbox you want.
NAME - this is the name part of the name/value pair that will be sent to the email receipent.
VALUE - if the checkbox is checked, this is the data value that will be sent to the email receipent.
CHECKED - when included, this will pre-select the checkbox. Optional, and can be used on multiple checkboxes.
Select lists
By using the "select" tags, you can provide a predetermined list of items from which the user can choose. The select tag uses a nested "option" tag to define each choice. Take a close look at this code to see what I mean.
NAME - this is the name part of the name/value pair that will be sent to the email receipent. Use a common name to group the choices together.
VALUE - this is the data value that will be sent to the email receipent.
Thanking the User
By including another "hidden" tag in the form, you can send the user to a specially constructed webpage that can thank them for filling out your form, or give them additional information, ie "Your vacation tickets will be mailed to you within 24 hours..."
TYPE - when set to "hidden", the hard-coded name/value pair will be passed to the script and acted upon, but there will be no indication on the webpage.
NAME - use a value of "redirect" to cause the web server to "serve up" a custom designed webpage of your choice.
VALUE - this is the full path of the returning webpage.
Putting it all together
By using the form related tags discussed so far, you can now create HTML forms thatcan be used for a wide range of data gathering activities.
Review and/or discuss the benefits of each form tag. When would each one be best used?
Best Practices (Thinking about Usability)
Request as little information as needed.
Make the form self explanitory.
Use them wisely.
References
This tutorial was based upon information gleaned and adapted from a WebMonkey and their Forms Tutorial and the FormMail author's readme file.
