Creating Forms in Dreamweaver
Sample Print Form
The below represents what a print form might look like:
Proposal for Video, Multi-Media or Satellite Project
Project Leader: ____________________________________
Email Address: ____________________________________
Phone: ___________________________________________
Purpose
Give a brief summary of your program's content:
Type
Please check one:
__Videotape __Satellite Conference
__Computer-Mediated Educational Unit (Multimedia)
Getting to Know You
What
snacks would you prefer during production (choose as many as you like)?
__Pizza
__Chicken Nuggets __Ice Cream __Sautéed Tofu
What
is your favorite color (choose only one)?
__Black
__White __Green __Blue __Tutti-Frutti
Subject(s)
(select all subjects the production will touch on):
__Agriculture __Animals
__Family & Home __Forestry __Plants __Community __4-H __WSU Employees
and Volunteers __Ecosystems/Environmental __Pesticides
Form Overview
There are two main parts of forms: The HTML form, which you see on your Web page, and the CGI script, a computer program that runs on your server. Any one can create an HTML page with a form, but if there is no accompanying script to make it work, the form will not be able to send you information or perform any other function besides looking pretty on the page.
These instructions will only work for forms hosted on the servers of the Extension Communications & Educational Support’s Computing & Web Resources unit in Pullman.
Tectite FormMail
The CAHNRS/Extension Web servers in Pullman have a program called Tectite FormMail, which we will use in this lesson. This script will allow you to create an HTML form that emails the results to you. Possible uses include registration forms, feedback forms, proposals, applications, etc. YOU MAY NOT USE FORMMAIL TO COLLECT CREDIT CARD INFORMATION. If you want to accept payments online, you need to cooperate with your systems administrator to collect credit card information via a secure server. For meetings and events, Extension Communications and Educational Support has an Online Conference Registration System (OCRS) that accepts credit card payment. Request an OCRS account here.
Your HTML Form
The HTML form consists of three basic parts:
- Form tags, which include the URL of the script that will process the form, and the method in which the data will be sent to a server.
- Form fields, which can include text fields, menus, checkboxes, and radio buttons.
- A Submit button, which sends the data to the script on the server.
Add a form to your document
Create a document. Make sure your Objects panel (a.k.a. Insert panel) is open (Window > Objects). Switch to the Object panel’s Forms category.
The top-left icon in the Forms category is the Insert Form icon. Click that, and you will see a dotted red outline in your document window. This outline delineates the limits of your form. Any form elements need to be placed within this outline.
In the Property Inspector’s Form Name field, type a unique name for the form, such as “Proposal.” In the Action field, put the URL for the script, http://cru.cahe.wsu.edu/cgi-bin/cru_tectite.php . Use the “Post” Method.
Note: If you use the WSU IT Web server, check with IT for instructions.
In the source code of your form, paste the following text after the <form> tag:
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER">
<input type="hidden" name="this_form" value="[address of your form]" />
Note that on the last line of the above code, you need to replace [address of your form] with the address or URL of the form.
Save the page.
Adding Form Fields
Text fields
Insert “Proposal for Video, Multi-Media or Satellite Project” in front of your form. Also make this the HTML title of your document. Click into the form and insert “Project Leader.” Start a new line (press “Enter”).
Insert “Name:” and then click the Insert Text Field icon on the Objects panel. A single-line text field is inserted at your cursor point. On the Properties Inspector, you can use “Char Width” to widen (or narrow) the field (try 35), and you can designate a maximum number of characters that a person can enter.
At the far left of the Properties Inspector, you will see a text field, with which you can name your form object. Name this field “realname.” FormMail expects to see the name “realname” for the person’s name when it processes the form, so be sure to use this field name.
Then add a field for “Email Address.“ Note that FormMail also expects to see this field named “email.” Note: This is case sensitive!
Add text and a field for “Phone,” naming it “phone.”
Until now, you have added one-line text fields because the desired information was relatively short. But our next field, for the purpose of the project, needs to be longer. So add the text “Give a brief summary of your program's content,” add a line break (Shift+Enter), and insert a text field.
Make this field 80 characters wide, and click the “Multi line” radio button. Note the appearance of a “Num Lines” field. Enter “4.” Note that this field will generate a scroll bar if more than 4 lines of text are entered, so the user of the form is not limited to 4 lines.
Save page and preview with F12.
Radio Buttons
Entering text is fine and dandy, but HTML forms can do more than that. Radio buttons allow a user to select one – and only one – item from a list. In our example, we will allow a person to say what type of project they want produced.
Copy and paste everything from “Type” to “(Multimedia)” into your form. Insert a radio button in front of Videotape, Satellite Conference, and Computer-Mediated Educational Unit (Multimedia). Hint: On the Objects panel, the radio button icon is the third down, left-hand side. Make sure that all of your radio buttons have the same name (such as “type”). Each must also have a unique checked value that is representative of that selection (e.g., video, satellite, and multimedia).
Note: If you were to have another range of unrelated radio buttons, you would select a different name for that range.
Check Boxes
Check boxes are kind of like radio buttons, except instead of being round, they’re square. What’s more, while you can only select one radio button at a time, you are able to select more than one check box from a set of options.
Paste everything from “Getting to know you” to “Sautéed Tofu” into the form. Insert a check box (on the right, second down) in front of each food choice, starting with “pizza.” Make sure that all of your check boxes have the same name (such as “food”). Each must also have a unique checked value that is representative of that selection. Now you are allowing someone to choose all four snacks, breaking the Video Unit’s budget, and perhaps a few diets.
Menus
Another way of presenting choices for selection is the drop-down menu. Consider it a space-efficient alternative to the radio button.
Insert “What is your favorite color (choose only one)?” into your form. Create a line break (Shift+Enter) and click the Object panel’s List/Menu icon, third down on the right. Select the “Menu” type from the Properties Inspector. Under “List Values,” add Black, White, Green, Blue, Tutti-Frutti (in matching pairs) under “Item Label” and “Values.” Select “OK” when finished. Save (Ctrl-S) and preview (F12) the file.
Lists
Lists are like menus with scroll bars, sometimes allowing multiple selections. Check boxes are probably more efficient for this type of function, so we won’t be covering them further.
Some Hidden Fields
Your form looks complete, but the FormMail script will not function without the hidden “recipients” field. “Recipients” is a reserved name for the FormMail program; you should not use it for any field except this hidden field. So click the bottom-left icon on the Objects panel (the “hidden field” icon). Type “recipients” into the Name field (on the left) of the Properties Inspector. Then type your email address (or the email address of the person to receive the form) into the Value field. For multiple addresses, separate with a comma. The script will send you an email with the information that was submitted.
It would also be convenient if all of the email requests from the form had an easily recognizable subject. You could then create a filter (or “rule”) to sort the responses into a separate email folder. FormMail provides the ability to include a custom subject with another hidden field, subject. So add a second hidden field, name it “subject,” and insert a value such as “Test of FormMail Web Form.”
You have completed your FormMail Web form. Upload it to your CAHNRS server in Pullman, and you can start receiving requests over the Internet.
Required Fields
If you are able to test your form in the lab, you may notice that the FormMail script will process your form even if you don’t fill in many fields. Your form won’t do you any good if you don’t know who submitted it, so let’s add another hidden field, and name it “required.” In the “Value” field of the Properties Inspector, simply add all the names of the required fields, separated by commas. For example if you enter “realname, email, phone,” the script will require that the Name, Email, and Phone fields are entered on the form. You may also go back through your form and mark each required field with “(required).” Note that if you do not include “realname” and “email” in the “required” fields, submissions may be flagged as spam and never reach you!
The following fields must always be required:
realname, email, imageverify
Image Verification
Note: If you are using the WSU IT FormMail or a version of FormMail on a non-CWR server, skip this part.
This works best in table columns.
In the left
column, insert an image, using the following image source:
http://cru.cahe.wsu.edu/captcha/captchac_code.php
Give the image a name/id of “captcha” and set the ALT text to “Image Verification.”
In your
source code, it may look like this:
<img src="http://cru.cahe.wsu.edu/captcha/captchac_code.php"
id="captcha" alt="Image Verification" />
Please enter the text from the image on the left: <br><input type="text" name="imgverify" value="" maxlength="100" size="10">
[ <a href="#" onclick=" document.getElementById('captcha').src = document.getElementById('captcha').src + '?' + (new Date()).getMilliseconds()">Refresh Image</a> ] [ <a href="http://cru.cahe.wsu.edu/captcha/whatisturing.html" onClick="window.open('http://cru.cahe.wsu.edu/captcha/whatisturing.html','_blank','width=400, height=300, left=' + (screen.width-450) + ', top=100');return false;">What's This?</a> ]
The Image Verification part of your form should look something like this:
Important! When using Image Verification, be sure to have an alternative way for visually impaired users to submit the information. This can be as simple as having a phone number to call, and allowing people to send the same information in an email message.
The Submit Button
Your form won’t do your user much good if you don’t have a Submit button. So select the Button tool or choose Insert > Form > Button.
Finally….
Save your form; preview and test it. After submission, the input should be emailed to the address(es) in the “recipients” field.
For complete FormMail documentation, see http://www.tectite.com/fmdoc/index.php
Heading using the h3tag
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.