Dreamweaver | Form Page Design

Form Page Design

No need for the panic button. Creating a user input form can be a tricky proposition with both design and technology concerns, but you'll tackle it in this lecture and exercise.

Forms provide site managers (you or your client) with useful data.

It's hardly surprising that nearly everyone wants a form. The good news is that Dreamweaver gets you on the right track by creating the front-end interface. Text fields, checkboxes, radio buttons, lists, menus, submit buttons—you can insert these elements with ease, creating an intuitive form design.

The bad news? Dreamweaver can't handle much of the "back-end" processing of the behind-the-scenes code that makes your forms actually do something, like submit data.

In this lecture, you'll learn how to use free Web resources to handle form data. In the exercise, you'll design and "hook up" a basic form that looks and works great.

CC Users: Spry validation widgets are not included in Dreamweaver CC, so you may skip that section of this lecture.

Forms contain two main components: the front-end and the back-end. The front-end presents the form elements that the user sees and interacts with. The back-end is invisible to the viewer and constitutes the code and server interaction that generates results or transmits data.

If you send someone money through PayPal (for your latest eBay win, perhaps?) you'll start the process by filling out a form in the front-end. When you submit the form, the back-end code will be processed to transmit the necessary information to PayPal's server.

Designing the Front End

Good design makes filling out forms less of a chore. Form labels must be large enough to read easily. Any instructions must be brief. The user should be able to differentiate between required and optional form elements, and choose the correct button with just a glance.

These goals can be easily achieved by sticking to standard design conventions. Keep it simple! This is not the time to go avant-garde.

	1. The overall page design should be consistent with the other pages in the site, including the site logo and navigation. Sounds like common sense, but if this is overlooked, users feel as if their form results will be going somewhere other than the intended site. Global colors and graphics incorporate the Hertz rental car form into a clear and consistent design. 2. Align all form elements to the left. Centered alignment slows down the process of clicking from one form element to the next. 3. Use a white or light colored background and black or dark-colored text. Make sure the value contrast is sufficient, so the labels are easy to read. 4. Avoid excessive rollover graphics or animations. Don't distract the user from the task at hand. 5. Mark required form fields by using a different text color, a bolder font weight, or an asterisk and include a "key" at the top. In this enrollment form, the user is informed that required fields are in bold and marked with an asterisk. 6. Group related form elements into fieldsets. For example, you might create separate fieldsets for "personal information" and "comments." Fieldsets divide long forms into manageable sections. The legend tag provides a descriptive title for each fieldset. By default, fieldsets are bordered by a thin gray line. You can override fieldset background colors and borders using CSS.

Implementing the Back End

To make a form work, you'll need a form handler on your Web server. A form handler is a specially-coded script that tells the form data what to do. One form handler might tell the data to go sit in certain fields of an existing database, while another might process the user's response and calculate the resulting statistics.

Form handlers are typically Perl or PHP-coded CGI scripts, though they can employ other scripts like ASP instead. If this is all alphabet soup to you, don't worry. In many cases you can find a free or inexpensive pre-written script online. Some scripts will need to be transferred to your server, while others are hosted on outside servers. Even better, many Web hosting companies provide scripts, so you may not have to look further than your own host.

When a user takes the Mensa Workout test, test answers are submitted to the Mensa Web server where scores are calculated. Results are instantly returned to the user (displayed in the browser) and may also be kept in a database on the server. All of this is achieved through the form handler.

In most cases, you'll use a CGI script to process your forms. To implement CGI form handlers, your server should have a special directory called a cgi-bin (you cannot create this directory yourself; it is supplied by your host).

Now would be a great time to see if your Web host has a cgi-bin for your CGI form handlers. Expand the Files panel and connect to your Web server. View the files on the Remote Server. If you see a folder called "cgi-bin" at the root of your site, you've got one and you're all set.

In my Remote Site files, I have a cgi-bin directory. In fact, my host even supplies a form handler for me to use. To learn how this free form handler works and what it does, I'll check the documentation for my host or contact their tech support.

If you don't have this directory, contact your host to see what other form handling options you have. Some hosts, particularly free or very low-cost hosting plans, do not offer form handling. However, you can still use handlers provided by outside servers, as you'll see in the exercise. The ability to process a script on your own server is not required for this class.

Forms and Form Elements
Starting a Form

Let's put the craziness of back-end scripting on the back burner for a while and focus on front-end form design.

Download the recipetree folder from the course downloads area and move it into your dw2projects folder. Open form.html.

Insert your cursor inside the content div, below "Please fill out the form below to subscribe to Recipe Tree. *Bold fields are required."

Open the Insert panel (Window > Insert) and choose the Forms category. Click the Form button to insert a form. Or, if you prefer, go to Insert > Form > Form.

The Forms category of the Insert panel offers quick access to common form elements.

In Code View, the form area is defined by <form> tags. In Design View, the form area is defined by a red border. If you don't see the red border, turn on your invisible elements (View > Visual Aids > Invisible Elements).

The red form border is only visible in Design View (not in the Web browser).

Fieldsets and Legends

Now that the form area is defined, add the first fieldset. Click inside the red form border. Press Return a few times to give yourself some space. Then choose the Fieldset button or go to Insert > Form > Fieldset. Enter "user name and password" into the Legend field.

If the Fieldset dialog doesn't pop up, go to Dreamweaver > Preferences (or Edit > Preferences in Windows). In the General category, select "Show dialog when inserting objects".

Create a new CSS rule for the fieldset tag.

Background colors, borders, and margins are useful properties to style fieldsets.

In the Background category, choose a white background color, #FFF.

In the Border category, choose a solid 2 pixel brown border, #8D5A39 (same for all).

In the Box category, add a 10 pixel margin (same for all). Click OK.

Create a new CSS rule to style the legend tag.

Font weight and color can be used to style legends.

In the Type category, set the font-weight to bold. Click OK.

Click your Right arrow key to move your cursor to the right of the legend, then choose Insert > Table.

In the Table dialog, give the table 3 rows and 2 columns. Leave the fields for table width, border, cell padding and cell spacing empty—these HTML table properties are not valid in HTML5. Click "None" under the Header options.

Insert a table to hold the rows and columns of form elements.

Create a new CSS rule. Choose the Compound selector type. Name the rule form table. This rule will apply to any table inside the form area.

Use a descendant selector to style tables within the form.

In the Box category, set the width to 500px. Click OK.

Create a new CSS rule to style the table cells in the left column. Choose the Class selector type. Name the rule .tdlabel.

In the Block category, set vertical-align to "top" and text-align to "right".

In the Box category, set the width to 150 pixels. Add 5 pixels of padding. Click OK.

Apply the class style to the table cells. Click inside the top-left table cell, then drag down, selecting all three table cells in the left column.

Choose "tdlabel" from the Class menu in the Property inspector.

Done! The left column is 150 pixels wide.

Select the <fieldset> tag using the Tag selector in the lower left corner of the Document window, then press your right-arrow key to move your cursor to the right of the fieldset. Press Return to move down to the next line. Make sure your cursor is within the red form border.

Choose the Fieldset button (or Insert > Form > Fieldset) to insert a new fieldset. Enter "about you" into the Legend field.

Again, select the <fieldset> tag using the Tag selector, press your Right-arrow key to move your cursor to the right of the fieldset, and press Return to move down to the next line.

Click the Fieldset button once again. Enter "newsletters" into the Legend field.

To finish up, copy the table from the "user name and password" fieldset and paste into the "about you" and "newsletters" fieldsets.

All fieldsets should be inserted inside the red form border.

The fieldset structure is in place. You're ready to insert the form elements: the items that the user types in, selects, or clicks to input information.

Text Fields

Text fields capture user data like names, addresses, and passwords.

Insert your cursor inside the upper-right table cell of your "user name and password" fieldset, then click the Text Field button in the Insert panel (or Insert > Form > Text Field).

The Input Tag Accessibility Attributes dialog should open up. If it doesn't, go to Dreamweaver > Preferences or Edit > Preferences. In the Accessibility category, check "Show Attributes when inserting form elements".

Type "user-name" in the ID field and "user name" in the the Label field. Choose "Attach label tag" to associate the label with the form element.

You can use space marks in form labels, but space marks shouldn't be used in the ID (or you'll get a validation error).

Click OK to exit the Input Tag Accessibility Attributes dialog. The next task is to move the label over to the left table cell. First, click your cursor somewhere inside the "user name" label. Then, use the Tag selector in the lower left corner of the Document window to select the <label> tag. Drag and drop into the left cell.

Use the tag selector to select the <label> .

Then drag the <label> into the left cell.

In Code View, you'll see that the label includes a "for" attribute. This element is "for" the "user-name" text field. Even though the label and field are in separate table cells, they are still associated.

Select the text field and take a look at the Property inspector. The Char width setting determines the width of the text field. Max Chars limits the number of characters that can be entered. For example, you might set a maximum of three characters for an area code.

Enter a value of "20" in the character width field, and "10" in the maximum characters field.

If you don't set a character width, a default will be chosen for you. If you don't set a maximum characters value, the number of characters allowed in a field will be unlimited.

On to the next form element. Insert your cursor in the second row of the right column. Click the Text Field button in the Insert panel. When the Input Tag Accessibility Attributes dialog opens up, give the text field an ID of "password" and a label of "password".

Grab the "password" <label> and drag it into the left table cell. Select the text field and set the character width to "20" in the Property inspector. Select the password radio button. This shields the user's entry from onlookers using symbols instead of the actual characters. You've seen such a field in action when logging into your courses here at Sessions.

One more to go. Insert your cursor in the third row of the right column. Give this text field an ID of "email-address" and a label of "email address". Select the <label> and drop it into the left cell. Using the Property inspector, set the character width to "20".

The table aligns the labels and text fields into a neat grid.

This is starting to look more like a form! Ready for the next fieldset?

Dropdown Menus

Dropdown menus allow users to select from a list of options.

Insert your cursor in the upper-right table cell of the "about you" fieldset. Click the Select (List/Menu) icon in Insert panel (or Insert > Form > Select (List/Menu).

Give the menu an ID of "birth-year" and a label of "birth year" in the Input Tag Accessibility Attributes dialog.

A small dropdown menu will appear along with the "birth year" label. Select the <label> and drag it into the left table cell.

Select the dropdown menu and click the List Values button in the Property inspector to add the list items.

Make sure the Menu radio button is selected, then click List Values to enter the menu items.

Add a few list items for the "birth year" dropdown menu. Give each entry an Item Label (the text the user will see for each choice) as well as a Value (the results you will receive).

Use the plus icon to add list items, and the minus icon to subtract items.

Did you notice in my above example that I included an Item Label called "Select One:"? I don't want my users to actually pick this, but it is a helpful reminder to choose an item from the menu.

To make sure "Select One:" is visible when the page first loads, use the Initially selected option in the Property inspector.

Select the list item that you would like to appear when the page first loads.

Try out this dropdown menu to see another way to format a menu visually. This formatting method won't change how you receive the form results, but it will help to organize the items for the user:

--Choose Nearest Store-- USA -New York, NY -Philadelphia, PA -Topeka, KS -Portland, OR

Now look at the List Values for this dropdown menu:

Simple punctuation breaks up the menu so the items are quicker to scan and select.

List Boxes

List boxes bear a distinct similarity to dropdown menus. They are so similar that they share the same insert button, Property inspector options, and List Values window. The difference? A list box can be several lines long, and it allows for multiple choices if the user holds down the Command key (Mac) or Ctrl key (Windows).

Insert your cursor in the right column of the second row and click the (List/Menu) icon in the Insert panel.

In the Input Tag Accessibility Attributes dialog, give the menu an ID of "interests" and a label of "what types of recipes interest you?"

Select the <label> and drag it over to the left cell.

Click the List radio button in the Property inspector to make it a list menu rather than a dropdown menu. Choose the number of visible lines with the Height option. Enter the various items into the List Values dialog.

Checking "Allow Multiple" will allow users to select multiple items. If you choose this option, it's helpful to provide instructions such as "To make multiple selections, hold down your Command key (Mac) or Ctrl key (Windows)."

Notice the scroll bar in the above example. It doesn't matter how many items are added to this list box—they will only take up five lines of space.

Text Areas

A text area is simply a multi-line text field. Text areas are useful for comments, message board posts, and other lengthy typed responses.

Insert your cursor in the right column of the third row. Click the Text area button in the Insert panel (or Insert > Form > Textarea). Give the text area an ID of "comments" and a label of "comments".

Select the "comments" <label> and drag it over to the left cell.

The width of the text area is dictated by the Char width field in the Property inspector. Change this value to "30".

Always allow a little extra space to the right of the text area—the character width may vary depending on the user's default font size.

The height of the text area is set by a property called Num Lines (number of lines). If the user types beyond the allotted space, scrollbars will appear.

Even though I have chosen a visual area of 30 characters wide by five lines tall, the amount of text the user can enter is unlimited and scrollbars will appear if needed.

This fieldset is finished—ready for the next set of elements?

Checkboxes

Checkboxes allow selection of multiple options. "Check all that apply:" is often used to introduce a series of checkboxes.

Click inside the upper-right cell of the "newsletters" table. You will need a nested fieldset to contain the checkboxes. Choose the Fieldset button (or Insert > Form > Fieldset) to insert a new fieldset. Enter "sign me up for the following newsletters:" into the Legend field.

Press your Right arrow key to move your cursor to the right of the legend. Then click the checkbox button in the Insert panel or choose Insert > Form > Checkbox. Give the checkbox an ID of "daily-dish" and a label of "daily dish".

Press Shift-Return to create a line break, then insert another checkbox with an ID of "cooking-news" and a label of "cooking news".

Press Shift-Return again to insert a third checkbox. Give it an ID of "recipe-notes" and a label of "recipe notes".

Radio Buttons

Radio buttons retrieve mutually exclusive data. Only one option can be selected; clicking one radio button in the group turns off the other. Try it here:

My favorite color is: Red Blue Green Other

Click your cursor inside the second row, right column of the "newsletters" table. Choose the Fieldset button (or Insert > Form > Fieldset) to insert a new fieldset. Enter "please send occasional email updates" as the fieldset legend.

Press your Right arrow key to move your cursor to the right of the legend, then click the Radio Button icon in the Insert panel or go to Insert > Form > Radio Button. Give the radio button an ID and checked value of "yes". Then hit Shift-Return and add another radio button with an ID and value of "no".

After creating both buttons, make sure that they are both assigned the name "updates" in the left field of the Property inspector. When several radio buttons have the same name, they are part of the same group. If you plan to have two or more sets of radio buttons, each set should have a different name so they don't exclude each other's choices.

Both the "yes" and "no" radio buttons have the same name. This tells the browser that they are part of the same group.

You can also create a group of radio buttons using the Radio Group option in the Insert panel. This opens a dialog in which you can program all of your radio buttons at once to avoid any naming mistakes.

Buttons

In order to submit a form, you'll need a Submit button that tells the data where to go (this is where the back-end processing comes in).

Insert your cursor in the last row, right column of the nested table and click the Button icon in the Insert panel, or Insert > Form > Button. Enter "submit" in the ID field. Leave the label blank. Select No label tag from the style menu.

Buttons don't require a separate label.

When you insert a button, it has a "Submit form" action by default and is labeled "Submit." Selecting "Reset form" or "None" will change its action as well as its label.

The most important feature of a button is its action. You can't re-label a Reset button with the name "Submit" and expect it to submit the form. You must choose the correct action using the radio buttons in the Property inspector:

	Submit form: This button submits the data to the form handler. Reset form: This button clears all of the data entered in the form by the user. Most users find this to be redundant or confusing (wouldn't you hate to accidentally click Reset after filling out a long form instead of clicking Submit)? None: On its own, this button will do absolutely nothing when clicked. That's right, nothing! However, special code can be added to the form to give a None button special attributes—for example, you can select the button and apply a behavior such as a form validation script.

Buttons look like gray boxes in Windows or blue-clear "jellybeans" on Mac OS X. If you want to customize the design of the button, use an image field. Click the Image Field icon in the Insert panel or go to Insert > Form > Image Field, browsing to select your custom-designed button graphic. That's it—the "Submit form" action and the form handler code will take care of the rest.

Final Design Adjustments

One more detail to finish up. Previewing the form in Live View, you'll notice that there is a lot of space around the nested fieldsets.

There is too much space surrounding the nested fieldsets. Also, too many borders.

This is easy to modify using CSS. Create a new CSS rule, choosing the Compound selector type. Type fieldset fieldset into the Selector Name field. This is a descendant selector that means "select any fieldset that is nested inside another fieldset".

This descendant selector only applies to nested fieldsets. The main fieldsets will not be affected.

In the Box category, set padding to "0" (same for all). Set the top, left, and right margin to "0", and the bottom-margin to "10px".

In the Border category, set the border style to "none" (same for all). Click OK. Preview in Live View to see how it looks.

The margins, padding, and borders have been removed from the nested fieldsets.

Other Form Elements

There are a few other form elements in the Insert panel. You won't use them often, but you should know what they do.

	Hidden Field: Hidden fields are used to provide important data to the server without the user seeing it. For example, each time a form is sent to the Webmaster as an email (rather than to a database), the form needs to know the Webmaster's email address. You'd enclose this data in a hidden field so it is transmitted without the user seeing it. File Field: This adds a field with a Browse button to that the user can upload a file to your server or send one to you as an attachment. Using such a field requires some complex scripting on your part (or your tech person's part!) and a server that can accept files from outside sources. Jump Menu: A Jump Menu is used for dropdown menu navigation bars rather than dropdown menu form inputs. Using a Jump Menu, you can add navigation options to a dropdown menu. After selecting an option, the user is sent to a specified hyperlink.

Spry Validation Widgets

The Spry Validation widgets look just like their text field, textarea, checkbox, and dropdown menu counterparts, but the orange starburst seems to indicate some kind of special power.

Open the form_spry.html file from the recipetree folder. A fieldset and table have been set up for you. Click inside the upper-right cell of the table, then choose the Spry Validation Text Field icon from the Insert panel, or Insert > Form > Spry Validation Text Field.

The Input Tag Accessibility Attributes dialog looks the same as always. Enter "name" as the label and ID. Choose the "Attach label tag using 'for' attribute" option, and click OK to exit the dialog.

Mouse over the text field in the Document window. A blue tab identifies it as a Spry text field.

Click your cursor inside the label, then use the Tag selector to select the <label> tag. Drag and drop into the left cell.

Preview in Live View. Don't enter anything into the name field—just click the "Submit" button. Sure enough, a message pops up stating that this is a required field.

Exit Live View and select the text field. Just like a normal text field, you'll see options for setting the character width, type, and initial value.

The Property inspector with the field selected.

Click the blue Spry TextField tab to see the Spry properties.

The Property inspector with the blue Spry tab selected.

Lots of goodies here:

	The Type menu allows you to validate against a certain type of data, for example, the data must be formatted as an email address, a credit card number, a phone number, or a URL. If you don't have a specific requirement regarding the format, leave the type set to "None". It is helpful to give users a Hint for how to enter the data. For example, a hint for "date of birth" might read "MM/DD/YYYY". The Validate on checkboxes determine when the validation process will occur: Blur (as soon as the user clicks outside the field), Change (as the user edits text inside the field), or Submit (when the user tries to submit the form). The Preview states menu allows you to preview how the field will look in its valid or required states.

Choose Required from the Preview states menu in the Property inspector. The default error message "A value is required" is not very helpful. Replace this default text with something more user friendly, like "Please enter your name."

The Spry Validation Textarea, Checkbox, and Select widgets work much the same way. Try them out—insert one of each and play around with the settings.

The Validation Password widget enforces rules for passwords. For example, you could require all passwords to contain a minimum of five characters. If your user enters four characters, he or she will get an error:

If your user is setting up a new account, you might want to use a Validation Confirm widget. After creating a new password, ask the user to retype the password. If the user fails to type the exact same password, the widget returns an error message stating that the values do not match. This will prevent any potential password errors—maybe your user thought he typed "tomato," but really, he typed "tomatoo."

The Validation Radio Group widget requires a selection from a group of radio buttons.

Each validation widget comes with an external style sheet, which can be used to modify the appearance of Spry elements. For example, if you don't like the red border around the validation message, edit the.textfieldRequiredStatestyle.

When you save a file containing Spry elements, Dreamweaver will copy the Spry CSS and JavaScript files to your local site. You need these files in order for the Spry validation to work. Be sure to upload the SpryAssets folder to your remote server when you're ready to launch your site.

CSS Form Design

Tables are a practical way to organize form elements, but if you're a CSS fanatic, you might prefer to use divs. Let's explore this now. Open form_tableless.html in the recipetree folder.

Click inside the "user name and password" fieldset. Go to Insert > Layout Objects > Div Tag. Give the div a class of "required" and click OK.

Press the Right arrow key on your keyboard to move your cursor to the right of "Content for class 'required' Goes Here".

Click the Text Field button in the Insert panel (or Insert > Form > Text Field) to insert a "user name" text field into the div.

To finish up, delete "Content for class 'required' Goes Here".

Create a new CSS Rule. Choose the Compound selector, and enter form div into the Selector Name field. This descendant selector will style any div within the form area.

In the Box category, set clear to "both" (this will force each div to appear in separate rows), padding to "5" (this will add some padding inside the div), and margin to "5" (this will add a margin between the divs). Click OK.

Create a new Compound selector and type form div.required into the Selector Name field. This rule will apply to any div with a class of "required" inside the form area.

In the Type category, set the font-weight to "bold" and click OK.

Create a new CSS rule and type form div.optional into the Selector Name field. This will select any div with a class of "optional" within the form area.

The optional form element labels should be set to "normal" font-weight.

One more element to style: labels. Create a new rule called form div label. This will style any label inside a div inside the form area.

In the Box category, set float to "left" (this turns the label into a block element and pushes it to the left) and set the width to 150 pixels (this will create a column effect). Uncheck "same for all" under padding and add 5 pixels of right padding.

In the Block category, set the text-align to "right". This will right-align the labels against the form elements. Click OK and see how it looks.

Click below the div, then go to Insert > Layout Objects > Div Tag to insert another div. Choose a class of "required" from the Class menu in the Insert Div Tag dialog.

Insert a text field labeled "password" into the new div.

To finish up this fieldset, insert a third div with a class of "required" and a text field labeled "email address".

As you can see, aligning text fields with CSS is quite easy. However, it gets tricky when you add checkboxes.

Click inside the "newsletters" fieldset and insert a new div, choosing "optional" from the Class menu in the Insert Div Tag dialog.

Insert a checkbox with a label of "sign me up".

Checkboxes and radio buttons require extra formatting.

The checkbox label is out of alignment. Create a new CSS rule called .radiolabel.

In the Block category, set the text-align to "left" and display to "inline". This will left-align the labels next to the checkbox.

In the Box category, set float to "none". This overrides the "left" float on the form div label selector. Click OK.

Select the "sign me up" label (click inside the label, then use the Tag selector to click the <label> tag). Apply the .radiolabel style. Problem solved.

Let's try a radio group. Insert a div with a class of "required".

Click inside the new div and insert a fieldset (radio button groups look nicer nested inside their own fieldsets). Give the fieldset a legend of "please send occasional email updates" and click OK.

The new fieldset will appear in the Document window. Click your Right arrow key to move your cursor to the right of the fieldset legend, then click the Radio Group button in the Insert panel.

Name the radio group "email-updates" (this will identify the group in your form results). Add "yes" and "no" labels and values.

The labels will be staggered at first:

Select the "yes" <label> and apply the .radiolabel style to push it into place. Repeat with the "no" <label>.

Form Properties

The moment you've been waiting for! You've got the tools to create a lovely-looking form. Now you just need to make it work.

Click the red form border to select the form (or click the <form> tag using the Tag selector). Two important settings must be determined: the Action (where the form needs to be sent) and the Method (how it will be sent).

As with all form elements, give your form itself a simple, logical name. This will define your form data when you see it in an email or database.

GET and POST Methods

The GET method is used for forms that are not meant to be secure and have no sensitive or personal data being transferred—primarily site search forms.

The POST method is typically used for forms that contain personal information or any other data that should be carefully masked from prying eyes. The POST method can contain much more data than the GET method (the GET method can only transfer up to 255 characters), making it useful for lengthy forms and message board posts.

Always choose one of the two methods, rather than going with the browser default (which is usually the less-secure GET method).

So, why is the GET method less secure than the POST method? Let's look at a GET method in action and you'll see the answer:

A search on Yahoo.com was conducted using the term "honda civic." When the search form was submitted, the URL highlighted above appeared.

In the Yahoo! example above, look closely at the URL. Because it used the GET method, the form data was popped right into the new URL. No problem for a search engine, but imagine if a GET method was used for an e-commerce form with your credit card data in it!

I know you're wondering why you'd even bother using the GET method at all, as it seems like POST is always the way to go. True: POST is nine times out of ten the method you'll want, but it has a little drawback of its own. The POST method is a little slower than the GET method—not by a lot, but enough to make GET a better choice for site searches.

Form Handlers: Dreamweaver's Side

In the Action field of the Property inspector, you can enter the URL of a form handler file—usually a CGI handler, such as a Perl script with a .pl extension installed in the server's cgi-bin. In many cases, the script will reside on your server and not on your hard drive, so you'll want to enter in an absolute path to the file, starting with http:// and including the full address, file name, and extension of the file. Sometimes, you might use a handler that resides on someone else's server through a form handler service. In that case, an absolute path would be required.

If you choose to use a relative path, make sure that the location of the script on your hard drive is the same as the location of the script on your server, the same way you'd handle image and other file locations so you don't end up with broken links or images.

That part's pretty painless, but what about the form handler script itself? Onward!

Form Handlers: Your Side

Check with your hosting provider to see what kinds of form handlers you're able to use, if any, as well as where you should place any form handlers on your server. Usually, if you're paying for server space, you'll have a cgi-bin directory to house CGI scripts based in Perl, PHP, and other languages, or an area for alternate types of scripts such as ASP.

Form handlers can be found all over the Web for free or a very low cost. Most can be downloaded, customized, and installed with step-by-step documentation. The script is usually installed by FTPing it to the proper area on your server.

In most cases, form handlers will submit form results to your email inbox. To submit to a database, you'll need a custom script. If necessary, you can hire a tech professional to develop one to your specifications.

If you do not have form handler support on your server, you can use a form handler service that hosts the script for you and sends you the data when a user submits your form.

Below is a list of popular form handlers. Included are remotely-hosted services (if you have no form capabilities on your server) as well as scripts that you can download and use on your own server. You can find many more by searching the Web or visiting your favorite Web development sites.

A word of caution before you go merrily script hunting. Read all documentation or "readme" files for any scripts or services before downloading them or signing up. They will explain how to customize the script to work with your form and where to place the file on your server (if necessary). Before customizing, you'll want to hang on to a backup of the original downloaded file in case you make a mistake.

	Remote Form Handler Services: Formmail: This popular service charges $1 a month to process your forms and email you the data. Customization is handled without the need to deal with any code. HForm: This is another service that ranges in price from free to a few dollars a month, depending on the features you prefer. Results of your form are emailed to you. Response-O-Matic: This form emailing service includes a large amount of documentation and troubleshooting information to make it easy to set up and use, though there is a fee. FormBuddy: This service is similar to Response-O-Matic. Form Handlers for Your Server: Your host: Visit your host's Web site or talk to tech support to see if they have any form handlers you can use. Form handlers already installed on your server take just a bit of configuration to set up. FreeScripts: This site features many types of scripts including a customizable, Perl-based "Form Processor" for your cgi-bin. CGI Resource Index: This Web site includes a large section of Perl-based form handlers of many types. The scripts are user-rated, but the amount of documentation varies from script to script.

Encoding

Enctype (which stands for encoding type) defines how the data is encoded for security when sent to the server via the POST method.

The documentation of your form handler script will tell you which type of encoding to use, though this is almost always the Enctype application/x-www-form-urlencoded, which is an option in the Enctype field of the Property inspector. The other Enctype option, multipart/form-data, is used for file uploads.

When using the POST method, you'll typically choose the first of the two Enctype options, unless the documentation of your form handler tells you otherwise.

When using a GET method, particularly in an email form (where the data goes to your email rather than your server), Enctype is usually set to "text/plain" so that the text is sent in a completely unencoded, readable state. Again, the documentation of the form handler you've chosen will dictate this setting.

Handling Errors

Accidents happen, and when you're dealing with forms this can mean that your data isn't going where it should or going anywhere at all. Let's wrap up this admittedly challenging topic with a handy list of common problems and their solutions.

	My email form seems to work, but I don't receive any data! If you are using a service, visit its Web site FAQ/support area. Make sure you have supplied the service with your correct email address. If the form handler is on your server, check that you have customized the script with the correct email address according to the documentation. These scripts occasionally contain a "dummy" email address that you must change to a valid address. When a user clicks Submit, nothing happens or an error appears. Make sure you have used a Submit button. Switch to Code View to make sure all form elements (including the Submit button) are within the <form> and </form> tags. Check that you have applied all of the required properties for the form, including the correct location of the handler (in the Action field). Make sure the script is located in the correct directory of your live Web server. Check that you have customized the script properly and have not changed any code that makes the form operational. You may need to open your backup of the original script and start fresh (make a new backup first!). If you are using a service, check its Web site to see if it is temporarily down or having problems with the servers where your script is located. I received all the data, but I can't tell what info goes with what field of the form. Check that each of your form elements has a logical ID. For example, the field used to retrieve someone's city would be called "city". If the user enters Atlanta in the city field, you'll see "city: Atlanta" in your results rather than "textfield3: Atlanta" (or other Dreamweaver default field name). I received all the data, but it's garbled so I can't read it. Check that you are using the proper Enctype for your form (refer to the documentation for the script). If you are using the GET method, you may either need to leave the Enctype field blank or enter "text/plain" (without the quotes). If you are using the POST method, you will usually use "application/x-www-form-urlencoded," though some forms require "multipart/form-data."

Discussion Share your thoughts and opinions with your fellow students in the Discussion area. Exercise Design and publish a working form.