Web Forms

Adding a form to a web page introduces user interaction, which is good for you and your site visitor. Good for your visitor because it's more engaging than just reading, and potentially provides a service; good for you because you can receive information from your visitor and potentially render a service.

At MIT, you can use a web form together with a program called cgiemail to generate email messages each time someone clicks the submit button on your form. This is a great way for visitors to communicate with you, e.g., fill out an application or survey. You can then import the email responses from your users into a database and analyze it.

There are 6 steps to implementing a web form:

1. Create the form

If you would like to create a form by typing the html code yourself, W3Schools provides instructions. If you prefer the ease of using Dreamweaver to create your form, you will find step-by-step instructions by selecting "Using Dreamweaver" from the Help menu at the top of your Dreamweaver window.

2. Create an email template

The easiest way to customize an email template to your web form is by using translateform.pl. Once you have generated your template, be sure to open it in Notepad or SimpleText and put your own email address in the "To:" field near the top, so that you will be the recipient of any emails that come from your form. Keep in mind that if you change your web form after you generate the email template, you must edit the template accordingly, keeping the two in sync at all times. The fields in the form must match the fields in the upper and lower section of the template exactly in order for you to receive all the data that a user submits.

3. Invoke cgiemail

Cgiemail lays out form responses according to your template and emails them to you. To invoke cgiemail, enter the correct path in your form's action statement. Your form tag looks something like this:

<form name="survey" method="post" action="http://web.mit.edu/bin/cgiemail/lockername/survey.txt" >

The URL defined by the action calls cgiemail and directs the program to use the email template you created in Step 2. How do you define the right URL? First set your action equal to your template's absolute URL. Then insert "bin/cgiemail/" in between web.mit.edu/ and the locker name or directory.

4. Create a custom success page

When a user clicks the submit form, cgiemail generates a confirmation page for the user. It is a plain text page that simply restates the information that was sent via email from the form. The user must then click the Back button or enter a new URL in order to leave the confirmation page. If you would rather use a custom page that can include a thank you or other message, reflecting your site's look and feel and navigation, simply design the page. Then, add this tag somewhere within your form:

<input type="hidden" name="success" value="http://web.mit.edu/lockername/thanks.htm">

Be sure to set "value" equal to the URL of your new custom page.

5. Test your form

Now that you have created your form, prepared your email template, and designed a custom success page, upload these files to the directories in your site indicated in the various URLs you have coded in your form. Now, test your form by filling it out and clicking submit. If you do not receive an email fairly quickly, then you must troubleshoot. You may have a typo in your form action, or you may have forgotten to edit your email template properly. Double-check each step of the process. Detailed information on working with cgiemail can be found at http://web.mit.edu/wwwdev/cgiemail/user.html.

6. Process the form submissions

Now that you've started receiving email responses to your form, you may want to convert those responses to a format that can easily be imported into a database like Filemaker Pro. Process-comments.pl will convert your messages to a tab-delimited text file, easily imported into most database systems.