![]() ![]() FormsBy Susan IvesIf you need to collect standardized information on your Web site, a form is the only way to go. Creating the form itself is easy: the hard part is getting the form data from the browser to your inbox in a usable format. The container tag for a form is <FORM> </FORM>. Everything listed below fits within that. The first <FORM> tag includes variables that tell the browser how to process the form. I'll save that for last, since that's the hard part. There are five kinds of input fields:
Male Female Here's how you would code a couple of radio buttons: <INPUT TYPE="radio" NAME="radio1" VALUE="male">Male <INPUT TYPE="radio" NAME="radio1" VALUE="female">Female
Checkboxes: are boxes that are checked. Duh. Every checkbox is independent of the others, so multiple boxes can be checked.
Drop down lists: can be configured to act either like radio buttons (only one choice) or like check boxes (the user can hold down the CTRL key and select multiple options.) Drop down lists work well for long lists, like selecting your state or country of residence, when a screen full of radio buttons would be overwhelming.
Text box - fixed length: are small text boxes of a fixed length, good for inputs like e-mail addresses or phone numbers.
Text box - variable length: is a good way to capture free-form comments.
The last thing you need is a submit button. Now, for the hard part. How do you construct the variables in the <FORM> tag to get the input into your inbox? The easiest way is to use the mailto: command. The format for this is: <FORM ACTION="mailto:yourname@domain.com" METHOD="POST"> Problem: it doesn't work with most browsers. When someone tries to submit the form, it just opens a blank e-mail form. Oops. Not good enough. Features that don't work half the time are not worth implementing. The most elegant way is to install CGI - Common Gateway Interface - files on your server. These files will use the sendmail program on your server to get the data to you. This is complicated. First, you have to have permission from your Web host to install CGI scripts; not all allow it. Then you have to figure out how to configure the scripts, including adding obscure paths for the data to flow to. Where the heck is Perl: #!/usr/local/bin/perl? Fortunately, many, if not most, commercial Web hosts not only accept CGI scripts but provide instructions on how to implement them. The host I use for susanives.com - 5dollarhosting.com - provides excellent instructions on how to configure CGI scripts. All that for $5 a month.
If you need a form processing script, the most popular one is FormMail. Get it at nms-cgi.sourceforge.net/scripts.shtml. It's free and comes with extensive installation instructions. The <FORM> tag will look something like this: Other Web hosts may pre-install a form CGI script and provide it to you. This is what Yahoo Web hosting does. If you use Microsoft Front Page and your Web host supports Front Page Extensions, there is a webbot that will automatically configure a form correctly. Refer to the manual or help file for instructions. There are several other option using ASP (active server pages) and PHP, a server-side scripting language, but they are beyond the scope of this column. If all of this seems too complicated, you can use an online service to help you create the form using a Web-based interface and process the form once it's completed. One I like is Response-O-Matic. It's easy to use and free, but if you want to get rid of the few small ads you can pay $19.95 for a year of ad-free service. Other services can be found if you search for "web form processing." There are more variables than I have explained here. A good forms tutorial is at www.speakeasy.org/~cgires/cgi-tour.html. You can add even more functions to forms using javascripts. Look at javascript.internet.com/forms/ or dynamicdrive.com/dynamicindex16/index.html for scripts that can validate input, provide a popup calendar for reference or specify required fields. Susan Ives is a former president of Alamo PC. She archives these columns on her Web site, www.susanives.com/lazy. If you visit, you can cut-and-paste the code instead of retyping it from the magazine - the ultimate in lazy Webmastering! ![]() |