Dreamweaver II | 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.

It's hardly surprising that nearly everyone wants a form. Forms provide site managers (you or your client) with useful data.

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.

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. 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

Ready to design a form of your own? Download the forms folder from the Course Downloads area and open the index.html file.

Toggle to Live View and select the "Fill out the form below to subscribe to Recipe Tree" heading.

The form will be inserted after this heading. Expand the Insert panel and choose the Form category. Click "Form".

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

Choose "After" from the insert options.

The form looks like this in Live View:

And like this in Code View:

In order for the form to function, all of the form elements must be inserted within the form tags.

Text Fields

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

Our text field will go within the form. Working in Live View, make sure the form is selected (you'll see it outlined in blue as shown below).

Click "Text" in the Insert panel to insert a text field. Choose "Nest" from the insert options.

Toggle to Code View and look for the text field you just inserted. The "input" is the text field and the "label" is the label before the text field.

Change "Text Field:" to "Name:"

Notice how the input field has a name and ID? These attributes are not visible in the browser, but they come in handy when you receive the form results. Each line of data will listed with its name and ID.

If you have more than one textfield, you'll want to change the name and ID to something more specific. We are using this textfield to collect the user's name, so change the name and ID of the input to "name":

The label includes a "for" attribute. This lets the browser know that the label is "for" a particular input field. Using the "for" attributes is very important if you want to design an accessible form. Otherwise, the screen reader will have no way of knowing which input field relates to which label.

Change the "for" attribute to "name".

Before we move on, select the "Content for form Goes Here" filler text and hit your Delete key.

Email Fields

Toggle back to Live View. Select the input field to mark the place for the next insertion.

Click "Email" in the Insert panel to insert an email field. Choose "After" from the insert options.

Email input fields come with a name, ID, and label of "email", so you don't have to make any changes. Cool!

You'll notice that we do a lot of switching back and forth between Live View and Code View as we build this form. When you insert form elements in Live View, you get an accompanying label tag along with the input. When you insert form elements in Code view, you just get the input. This is why I always insert form elements in Live View. However, I've found that it is quicker and more precise to edit the names, IDs, and "for" attributes in Code View. Hence the toggling, but it all pays off!

Select Menus

Select the email field to mark the place for the next insertion.

Click "Select" in the Insert panel to insert a select menu. Choose "After" from the insert options.

Toggle to Code View. Change the label to "State", and the name, ID, and "for" attribute to "state".

Toggle back to Live View and select the small dropdown menu.

Go to Window > Properties and click the List Values button.

Select menus allow users to select from a list of options. Each menu item requires an Item Label (the text the user will see for each choice) as well as a Value (the results you will receive). Go ahead and enter the following options:

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 Selected option in the Properties Inspector.

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

Entering all 50 states would be quite a chore, but luckily, a quick Google search results in a list of select values from freeformatter.com. Copy the options starting from "Arizona" on down (you don't need the <select> tags)

Toggle to Code View, insert your cursor after the "Alaska" option, and Edit > Paste.

Click the paint bucket icon in the left coding toolbar and choose "Apply Source Formatting" when you're done.

Text Areas

Toggle back to Live View and select the select menu to mark the next insertion point.

Click to insert a "Text Area". Choose "After" from the insert options.

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

Toggle to Code View. Change the label to "Comments", and the name, ID, and "for" attribute to "comments".

To finish up, add a "rows" attribute to control the height of the text area.

Checkboxes

Toggle back to Live View and select the text area field. Click to insert a "Checkbox Group", choosing "After" from the insert options.

Enter the following items into the Checkbox Group dialog. Choose the "Line breaks" option and click OK.

The Checkbox Group dialog offers layout choices of "line breaks" or "table". Choose "line breaks" if you are planning to control the form layout using CSS.

The series of checkboxes appears on the page, but it needs some sort of heading. Use the DOM panel to select the paragraph tag that is holding the checkbox items (you'll need to expand the form element and drill down to find the paragraph tag).

Toggle to the HTML category of the Insert panel and click "Heading: H4". Choose "Before" from the insert options.

Triple-click the "This is the content for Layout H4 Tag" filler text.

Type "Newsletters".

Radio Buttons

Use the DOM panel to select the paragraph tag again.

Choose the "Form" category in the Insert panel, and click to insert a Radio Button Group. Choose "After" from the insert options.

Clicking Radio Button Group will open a dialog in which you can program all of your radio buttons at once.

The "yes / no" radio button group needs a heading.

Keep the paragraph around your radio button group selected. Switch to the Insert panel's "HTML" category and click "Heading: H4". Choose "Before" from the insert options.

Triple-click "This is the content for Layout H4 Tag".

Type "Send weekly coupons".

Submit Button

In order to submit a form, you need a Submit button. Use the DOM panel to select the paragraph around the radio button group.

Choose the "Form" category and click to insert a "Submit Button". Choose "After" from the insert options.

We have inserted all the form elements, but the layout is quite a jumble. Not to worry, Bootstrap can get it in shape.

Designing Forms with Bootstrap

It isn't easy to style forms. Labels and input fields don't line up on their own. Luckily, Bootstrap provides a library of CSS styles for form elements. Head to http://getbootstrap.com/ to study the basic form example.

http://getbootstrap.com/docs/3.3/css/#forms-controls

Bootstrap Formatting: Input Fields

Bootstrap will line up your input fields for you, but you need to add some extra formatting. Each label and input tag should be wrapped in a div with a class of "form-group". Each input tag needs a class of "form-control".

Toggle to Code View to apply the Bootstrap formatting. Select the first label and input field:

Hit Command-T (Control-T in Windows) to wrap the tags.

Type <div class="form-group"> and hit your Return key.

The label and input fields are wrapped!

Click the paint bucket icon in the coding toolbar and choose "Apply Source Formatting" to make the code easier to read.

Now, you need to apply the class of "form-control" to the input.

Apply the same formatting to the other input fields. Select the email label and input, wrap them in a div with a class of "form-group" (the keyboard shortcut to wrap tags is Command-T on a Mac or Control-T in Windows), then apply the "form-control" class to the input field.

Select the "state" label, the select menu, and all the options in the select menu (including the </select> tag). Wrap in a div with a class of "form-group". Then, apply a class of "form-control" to the select menu.

Apply the same formatting to the text area.

Go to File > Real-time Preview to see the results. This looks a lot better!

Bootstrap Formatting: Checkboxes and Radios

The checkboxes and radio buttons look okay now, but it is good practice to use the same Bootstrap formatting as the other form elements.

Checkboxes need to be inserted in divs with a class of "checkbox" and radio buttons need to be inserted in divs with a class of "radio".

We will tackle the checkboxes first. Start by deleting the <p> and <br> tags.

Wrap each of the checkboxes in a div with a class of "checkbox".

Click the paint bucket icon to Apply Source Formatting, and your div will look like this:

Moving down to the radio buttons, delete the <p> and <br> tags.

Wrap each radio button in a div with a class of "radio".

When you're done, your code will look like this:

Bootstrap Formatting: Buttons

Bootstrap can transform basic buttons into something more special.

Select the Submit button in Live View.

Click the + sign to add another class to the button: .btn

You have a choice of several button styles:

http://getbootstrap.com/docs/3.3/css/#buttons

The blue button style will work with this design. Click the + sign to add another style to the button: .btn-primary

The final button looks a look better! Of course, if you want to customize the color of the button, you can do so by searching for the .btn-primary style in the bootstrap.css, copying it into your custom.css, and changing the background-color property to the color of your choice.

Bootstrap also gives you options for modifying the size of the buttons. If you want your button to be larger than average, apply a class of ".btn-lg". For a smaller button, apply a class of ".btn-sm".

http://getbootstrap.com/docs/3.3/css/#buttons

Go to File > Real-time Preview to see your form. You're done!

Bootstrap Horizontal Form

If you'd like to take a different approach to your form layout, you can try out Bootstrap's horizontal form styling. In horizontal forms, labels are placed to the left of input fields.

http://getbootstrap.com/docs/3.3/css/#forms-horizontal

Horizontal forms require some extra formatting. First of all, you need to apply a class of "form-horizontal" to the form tag.

The label of each input field needs a class of "col-sm-2 control-label". This sets the label to take up two columns in the twelve column grid.

Each input needs to be wrapped in a div with a class of "col-sm-10". The input will take up ten columns in the twelve column grid.

Radio buttons and checkboxes are nested inside two divs. The first div has a class of "col-sm-offset-2 col-sm-10". The offset property pushes the checkboxes over two columns. The second div has a class of "form-group".

Like radio buttons and checkboxes, submit buttons are wrapped in two divs: "col-sm-offset-2 col-sm-10" and "form-group".

Would you like to try this out? Go to File > Save As to save a copy of your form. Name the new page "horizontal.html".

Add a class of "form-horizontal" to the form tag.

Add a class of "col-sm-2 control-label" to the name label, the email label, the state label, and the comments label.

Wrap the "name" input field in a div with a class of "col-sm-10".

And repeat — wrap the email input field in a div with a class of "col-sm-10", the select menu (including all the select options) in a div with a class of "col-sm-10", and the "comments" textarea in a div with a class of "col-sm-10".

Toggle to Live View to check your progress so far. The input fields look great, but the checkboxes are hanging off to the side of the layout. Use Bootstrap's "offset" style to push them over to the right.

Back in Code View, select the "Newsletters" heading and all three checkboxes and wrap them in a div with a class of "col-sm-offset-2 col-sm-10".

Select the "col-sm-offset-2 col-sm-10" div that you just inserted, and wrap it in another div with a class of "form-group".

Select the "Send weekly coupons" heading and both radio buttons and wrap them in a div with a class of "col-sm-offset-2 col-sm-10".

Again, select the "col-sm-offset-2 col-sm-10" div that you just inserted, and wrap it in another div with a class of "form-group".

The submit button needs to be pushed over as well. Select the submit button and wrap it in a div with a class of "col-sm-offset-2 col-sm-10".

Finally, select the "col-sm-offset-2 col-sm-10" div and wrap it in another div with a class of "form-group".

Go to File >Real-time Preview to see how it looks. You'll notice that the horizontal styling kicks in at the small screen sizes and above (<750px). The labels stack in the extra-small size.

Fieldsets and Legends

In long forms, you might want to add fieldsets to organize your input fields into sections. Let's try it out. In Code View, select the name field, the email field, the select menu and the comments field.

Open your Insert panel. Scroll down to the bottom of the Form category, and click to insert a "Fieldset".

Enter "Create an Account" 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 form objects".

One more! In Code View, select the "Newsletters" heading, the checkbox group, the "Send weekly coupons" heading, and the radio button group.

Scroll down to the bottom of the Form category, and click to insert a "Fieldset".

Enter "Subscribe" into the Legend field.

The fieldsets help to structure the form.

Required Fields

Important fields should be "required". Select the email input field.

Check "Required" in the Properties Inspector.

"Required" is a new HTML5 form attribute. In modern browsers, the user will receive an error if he or she tries to submit a form without filling in a required field. Go to File > Real-time Preview, then click the Submit button to test it.

HTML5 form attributes rely on native browser support, so no scripting is necessary. A "required" attribute has been added to the input field, and that's it!

The Properties inspector offers several additional form attributes which can come in handy.

	Form element attributes Disabled: Disables the element. Required: Makes the element required. Auto complete: Auto fills as the user enters information. Auto focus: Sets the focus on a particular element when browser loads the page. Read only: Sets the value of the element to read-only. Form: Specifies the form to which the <input> element belongs. Name: Unique name used to reference the element in the code. Place holder: Hint that describes the expected value of an input field. Pattern: Regular expression against which the element's value is validated. Title: Extra information about an element. Displayed as a tool tip. Tab Index: Specifies the position of the current element in the tab order for the current document.

Additional Form Elements

You'll find an assortment of additional form elements in the Insert panel. Most of these fields will be familiar, but a few less-common fields might be new to you.

Reset Button

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)?

Button

On its own, this button will do absolutely nothing when clicked. That's right, nothing! However, code can be added to the form to give a button special attributes—for example, you can select the button and apply a behavior such as a jQuery dialog.

Image Button

If you decide to use a graphic button instead of a standard HTML button, click Image Button in the Insert panel and browse to select your custom-designed button graphic.

Hidden Field

Hidden fields provide important data to the server without the user seeing it. For example, each time a form is sent to the web master as an email (rather than to a database), the form needs to know the web master's email address. You'd enclose this data in a hidden field.

File Field

Clicking File Field adds a field with a Browse button. The user can upload a file to your server. 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.

HTML5 Form Elements

HTML5 form elements have semantic meaning to ensure that the data is formatted corrected.

Email

An Email field looks like a regular text-field in a web browser, but if the user enters anything other than a standard email address, he will be alerted to the error.

Smart phone users can access a specialized on-screen keyboard for entering email addresses, with dedicated keys for the @ and . characters.

Password

Password fields shield 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.

URL

If you want to make sure the user enters a URL in the complete internet syntax, use a URL field.

The browser will check to make sure the URL is formatted correctly.

On smart phones, the on-screen keyboard for entering URLs includes a period, a forward slash, and a “.com” button.

Tel

Telephone fields open up a numeric keyboard on smart phones.

Search

Search fields look like regular text fields in the browser, but they have a special "search" ID in the HTML code.

Number

Number fields are handled differently in different browsers.

In Firefox, you'll get a regular text field.

Opera, Safari and Chrome provide a spinbox control.

Smart phones will open a numeric keyboard, making the data quick and easy to punch in.

Select the number field and choose View > Properties to enter minimum and maximum values. The step value determines the increment that the numbers increase or decrease when the arrows in the spinbox are pressed.

Range

The Range field renders as a slider in modern browsers. This can be useful for gathering less exact data, based on feelings or opinions.

Color

If you'd like your user to select a color, use a Color field.

Opera and Google Chrome will open a color picker, making it easy for the user to choose a color. In other browsers, the user will need to type the hexadecimal color value into a text field.

Time and Date

Date pickers are new to HTML5, and browser support is hit or miss.

In Opera and Google Chrome, the form elements open into popup calendars.

In Firefox and Safari, date and time form elements display as simple text fields. It will still work, but your user will need to type in a date rather than selecting from an interactive calendar.

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.

First, select the form. This can be accomplished by clicking one of the form input fields, then choosing the form tag in the Tag selector.

Go to View > Properties to access the form properties. 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 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 Properties 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 website 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 website 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 Properties 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 website 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 action rather than a None button action. Select the button in Dreamweaver and review its properties. 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 website 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."

HTML Email

HTML email is a great way to drive traffic to your website by sending announcements, newsletters, daily features, press releases, and sale alerts.

Designing an HTML email layout requires a different strategy than a typical web page. You'll need to contend with varying levels of CSS support in different email clients. Layout tables and inline styles deliver the most consistent results. It is a step back from current web standards, but with a little testing you'll be on solid footing.

Design the Email Layout

Start by planning the page layout. Look through email design galleries for ideas.

	http://www.campaignmonitor.com/gallery/ http://htmlemailgallery.com/ http://inboxaward.com/

Create a new folder for your email project within your local site folder. Go to File > New and choose Starter Templates. Dreamweaver provides a responsive email template, so you don't need to build the layout from scratch.

Insert images into the layout. Use images sparingly: if the email takes too long to open, the user will delete it before the images even load.

Also, prepare yourself for the possibility that the email client might block images all together. The email should still be legible in plain text format. Add alternate text for each image.

Change Links to Absolute

The images won't be embedded in the final email. Instead, the images are uploaded to your web server and accessed via absolute URLs.

Upload the email folder to your web server. Then, open the email HTML file in a browser and determine the absolute URL for each image. An easy way to do this is to Control-click the image (Right-click in Windows) and choose "View Image" from the context menu. The image will open in a separate window. Copy and paste the URL from the browser's address bar. Remember that absolute URLs start with http://, for example:

http://www.yoursiteurl.com/email/officephoto.jpg

Edit your email HTML file in Dreamweaver. Change each image path to an absolute URL. Links to other HTML files should also be absolute. When you are done building your email layout, upload the html file, css file, and images to your web server.

Move CSS Inline

For the best HTML e-mail delivery results, CSS should be inline. Inline styles are written in each line of HTML code, like this,

The inline styles are written into each table cell and paragraph tag.

Writing inline styles is a tedious process. You have to repeat the same style info over and over in each paragraph and table cell. Rather than sodding through it yourself, use a free online tool to automate the process. Visit the premailer.dialect.ca website.

Click "Use a URL as the source" and enter the URL of the html file you posted to your web server. Click the Submit button.

Copy and Paste your source code into the Premailer window.

Premailer will process your HTML code, converting external styles to inline styles and relative links to absolute links (in case you missed any links in the previous step, but remember, you still need to post the images on your web server).

Click the "View the HTML results" field, Edit > Select All and Edit > Copy.

Read the HTML and CSS warnings to make sure the the potential errors won't affect the legibility of your content.

Back in Dreamweaver, create a new HTML file and save to your email folder. Switch to Code View, go to Edit > Select All to select the document head and body tags, and hit your Delete key. Then, Edit > Paste to paste the code from the Premailer site. Save your final, email-ready code. Connect to your web server and post the entire email folder online.

Test and Deliver

You're ready to send out the email! But first, do some testing by opening accounts in Hotmail, Gmail, and Yahoo mail and sending the email to yourself to see how it looks. For a more serious analysis, use an email testing service.

The process of sending the actual email will vary depending on your email service. In Apple Mail, it couldn't be easier: you just open the Web page in Safari, then choose File > Mail Contents of this Page. Consult your email program's help documentation for exact instructions.

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