Web FoundationsMONDAY, NOVEMBER 4, 2013

LECTURE 23: FORMS

Basic Elements of a Form

Basic Elements of a Form

Before we start talking about how to style a form, it’s important to understand the basic elements that are used to make it. They are:

• Text• Input boxes• Text fields• Checkboxes• Radio buttons• Drop-down menus• Primary actions• Secondary actions

Let’s talk about each one and what they’re used for.

Form: Text

You’re going to be titling your form, labeling input boxes, and giving brief instructions on other elements within your form; as a result, you should give careful consideration to the font and font sizes being used. Unless your form is highly stylized, you should probably stick to a standard web-safe font for two reasons: Your information will be clearly read by the viewer, and you can be assured that the proper font is displaying on their computer.

Form: Text

The size of the fonts you use also depends on your design. Sure, you may want to use a larger fontfor the title of the form, but you don’t have to. It really depends on what’s appropriate for your page. Here’s one suggestion, though: You may want to consider making instructions, errors, and minor labels for elements small so that the user doesn’t get distracted while filling out the form.

What about the weight — bold or regular — of your fonts? Well, typically most items on the form are normally weighted, but important or required items could be labelled with a bold font. This helps to ensure that the user understands that the text field or checkbox is labelled by the bold text next to it.

Forms: Input Boxes

The main purpose of your form is to collect information, and an input box is the primary method by which a user will enter a small amount of text. Generally, these are used for inquiries that require an answer that’s anywhere from one to several words in length. Because they collect one line of information, input boxes are not vertically adjustable; however, you will want to consider the width of the box so that it is appropriate to the information being collected.

Forms: Text Fields

Text fields are very similar to input boxes except that they’re intended to collect information that may be longer than a few words. A text field can be adjusted vertically to allow for several lines of text to be entered. They are generally used when trying to get feedback or comments that couldn’t be addressed anywhere else in the form.

Your text field should utilize what is known as “text wrapping” so that a lengthy response doesn’t appear on a single line in the form; when the text being entered reaches the right side of the text box, it will automatically return to the beginning of the next line. Limiting the number of characters that can be entered into this element of your form may be important as well, so that users merely enter information that is explicitly necessary.

Forms: Checkboxes

Checkboxes are small squares placed next to items on your form which can be selected. They are used when you want your visitors to be able to select more than one option in a given group, or no options at all.

Forms: Radio Buttons

Radio buttons are similar to checkboxes in that they display a list of options, except that in this case users can only select one option. They’re best used when a selection is required. For example, if youwant your users to select their gender, options for male and female, would be present, but only one could be selected.

Forms: Drop-Down Menus

Similar to checkboxes and radio buttons, this type of menu shows a list of options in which generally only one selection can be made. Their implementation is necessary when trying to conserve space, especially when an enormous list of options is available (such as a list of all of the states in the United States). A large number of options can be reduced to a single line by showing a single item with a down arrow next to it; when the arrow is clicked, the other options are temporarily displayed on the screen as a list.

Forms: Primary Actions

Your primary action is the conclusion of the form; it is the main reason that a user is filling out the form to begin with. Generally, this is the Submit button if the intention is to send information to you, but it could be other options such as Save or Print. The primary action button should be plainly visible at the bottom of the form.

Forms: Secondary Actions

A form will often utilize buttons or links alongside the primary action which will allow the user to perform a secondary action. Typical secondary actions include:

• Reset/clear buttons• More information• Go back• File upload• Link to a help page

Though these other actions can be useful, it is extremely important for the user to not confuse primary and secondary actions. Using a different text size or careful placement of the secondary action is recommended.

Laying Out and Designing a Form

Laying Out a Form

Below, you can check out some of the most common ways to lay out a form:

Laying Out a Form

Web Form Design Guideline Eye Tracking Study

Vertical Layout Left-Aligned Labels

Forms: Option Fields

Since the dawn of web forms, it seems, the asterisk (*) has been used to denote required fields. At the top of your form, you can include this: “* = required” or “Fields marked with * are required.” Then, at the end of the label for each required field, you simply add an asterisk. Instead of “Full Name,” for example, we would have “Full Name *”.

On the other side of the coin, let’s say you have mostly required fields, but only a few fields that are optional. In this case, you can omit any wording about “required fields.” By the fields that are optional, include the word “optional” in italic letters or in parenthesis, or both. When a user sees only a handful of fields marked “optional,” logic dictates that the rest are required, so this is a clear way to show the user which fields are required and which aren’t.

Designing a Form

Step 1: Formulate a Plan

When designing a form — or any other aspect of your website — the best thing you can do is have a solid plan in mind before you get started.

Let’s say you run a small business where you provide several printing services. When it comes to your form, you’ll generally think like this: “I want a form on my website where a user can request a quote for my services. What do I want to get from my customers? I want their first name, last name, and e-mail address. I also want to know what service they want me to provide and any additional information that might be required.”

Designing a Form

Step 2: Consider the User

Our hypothetical small printing business has a set of services. We know exactly what these services are, so we should provide them in our form for the user instead of making the user type what service they want. After all, they may not know all of our services, or they may not know exactly what the service they want is called.

In this case, instead of a text field, we need a drop-down menu. A drop-down menu is just one of several multiple-choice options in a form. The others are lists (also known as combo boxes), checkboxes, and radio buttons.

Designing a Form

Step 3: Design Neatly

In addition to building your form conservatively, you’ll want to make sure the design and layout of the form are neat and tidy. Looking at the layouts we discussed earlier, a vertically oriented form is the best bet here.

Ideally, your form will flow both logically and spatially. The user will most likely begin viewing the form in the upper-left-hand corner and progress from there as if reading a magazine or book. You can simplify this process for them by composing your form vertically and grouping together similar items.

For example, if you choose to have a single input box for a person’s name, it should be the only item on that line; if you choose to have separate inputs for a person’s first and last names, it makes sense to place them on the same line. Similarly, an input box for a visitor’s e-mail address should be on a line by itself.

Designing a Form

Use short, clean descriptions when necessary.

Sometimes, you’d like to explain why you’re collecting certain information. This not only helps reduce user confusion, it also ensures that the information is formatted the way you want it.

For instance, an e-mail address is something most people are a little uneasy to give out. Nobody likes receiving spam or having their e-mail address sold to mass marketers, so guarding our e-mail addresses has become as much of a security measure as locking the door to our houses when we leave. A clean description and a bit of assurance can go a long way toward easing your users’ minds.

The Keys to User Orientation

The Keys to User Orientation

Everything you’ve learned so far is a great start to any form. You can apply only the techniques above, and you’ll have a solid, usable form that incorporates the basics of user orientation. But there are four more very important keys that work in conjunction with everything in the previous section to make a form truly built around the user:

• Be the first to communicate!• Divide the form into bite-sized, manageable sections• Be clear• Release the user.

This set of rules revolves around communication. Communication is the cornerstone to any good relationship. Think about it: No relationship can begin without communication, and it certainly cannot continue without it. A lack of communication, though, can end a relationship — or worse, prevent one from even forming.

The Keys to User Orientation

Be the first to communicate!

You already know why communication is so important. If you have a web form, you are most likely trying to build some sort of relationship with your users, because a form allows for communication.

Usually, though, forms on the web want the user to be the one to initiate the communication. In fact, all of the examples you’ve seen above want the user to be the initiator.Let’s change that. Using our current example, let’s say our business has been around for a while and has grown a bit. Our company has the staff to provide calls to our customers who want to be called instead of e-mailed, and our form can now provide a quote for more than one service at a time.

To accommodate for this, we’ve added a Phone Number field. This is a normal text field, so there’s a bit of room for error.

The Keys to User Orientation

Be the first to communicate!

The Keys to User Orientation

Be the first to communicate!

Some customers may give a phone number, but still want to be contacted by e-mail, or vice versa. We want to find the best way to contact the user, since we want to do our best to secure a new customer.

So on our form, we’ve got a “Preferred Contact Method” set of radio buttons. Radio buttons allow the user to see all the options but only let them select one.

We’ve also changed the Services option again. Now a customer can select multiple services in a single quote, so a drop-down menu, which allows for only one choice to be selected, won’t work anymore. In the drop-down menu’s place, we have set up separate checkboxes for each service. The user can still specify the details in the Additional Info box. Take a look at the form in its new state.

The Keys to User Orientation

Be the first to communicate!

Let’s take it one step further and actually communicate with our users, rather than demanding information from them. This involves the wording we use in our form. Remember earlier, when we talked about using creative, conversational language to spice up an otherwise bland form?

Prompting the user with short, lifeless labels like “E-mail Address,” “Service,” and “Additional Info” is poor communication.

Let’s actually talk to the user. Imagine you’re face to face with your customer. If you ask for theirname, you aren’t going to stare them in the eyes with a rigid expression and demand, “Full name.”

That sounds unfriendly and more than a little creepy. If you were looking to garner a positive response from this person, you would instead open with a smile and say, “Hi, what’s your name?”

The Keys to User Orientation

Be the first to communicate!

The Keys to User Orientation

Divide the form into bite-sized, manageable sections.

A form may be asking for quite a bit of information, but that doesn’t mean you have to throw it all at the user in a huge block. As we mentioned earlier, you can use headers, horizontal rules, or colored bars that match the design of your site to separate the information into small, easily understood chunks.

Although our form has grown in actual vertical size, to the user, it’s actually decreased in complexity. Why? Before, our form was asking for six different things: name, phone number, e-mail address, method of contact, desired services, and job description. Now, to the user, it’s only asking for three things: contactinformation, availability, and how we can help them.

The Keys to User Orientation

Be clear.

Try to answer any potential questions your users may have about the form. Right now, our example form is pretty clear. But some questions that immediately come to mind when looking at it are:

“Well, my e-mail address is guaranteed to be kept confidential, but what about my phone number?”“Are any of these fields optional? Which ones are required?”“If I choose multiple services, do I get a quote for each one, or is this a quote for all the servicestogether?”

Also, some users may get confused and think this form is actually placing an order. This confusion is bad for two reasons. First, if someone actually does want to place an order and they think this is an order form, they’re going to be at least a little annoyed that the form didn’t take them to “another step” to input their payment information. Second, if someone just wants a quote, but is confused and thinks this is an order form, they’re not going to fill it out.

The Keys to User Orientation

Be clear.

You can clear all of this up in the form. There are a couple of different ways to handle all these common questions.

First, we will add an informative title explaining just what this form is all about. Below it, we’ll put a note stating that all fields are required in this form. We’ll change the comment about the customer’s e-mail address being confidential to include their phone number as well. We’ll also use a default selection for our radio button group, which ensures that the user will choose one of the three options.

We’ll further clarify our form by beefing up the label for the services section. Finally, we will add asmall note above the submit button letting the customer know that this is only for a quote and that no purchase is actually being made.

Check out the result on the next slide.

The Keys to User Orientation

Release the user.

When the user clicks the Submit button, they think they’re done, and they’re ready to move on. They’re basically saying, “Here’s the info you wanted. Talk to you later!”

In a real conversation, you’d give them a wave, say “bye,” and walk off, or give them some other wayof acknowledging that the communication is done.

Your form should be no different.

Have your form programmed so it sends the user to a custom page that tells them something like,“Thank you for your submission! You’ll be hearing from us shortly.”

The Form Code

The Form Code

On their own, forms aren’t usually especially helpful. They tend to be used in conjunction with a programming language to process the information inputted by the user.

These scripts take all manner of guises that are largely outside of the scope of this lecture because they require languages other than HTML and CSS (although I will show you how to easily do it with a form processing .php file)

The basic tags used in the actual HTML of forms are:

• form• input• textarea• select• option

How to Make a Form in Simple Steps http://www.freecontactform.com/html_form.php

Form

form defines the form and within this tag, if you are using a form for a user to submit information (which we are assuming at this level), an action attribute is needed to tell the form where its contents will be sent to.

The method attribute tells the form how the data in it is going to be sent and it can have the value get, which is default, and latches the form information onto a web address, or post, which (essentially) invisibly sends the form’s information.

get is used for shorter chunks of non-sensitive information - you might see the information you have submitted in a web site’s search to appear in the web address of its search results page, for example. post is used for lengthier, more secure submissions, such as in contact forms.

So a form element will look something like this:

<form action="form.php" method="post">

</form>

Input

The input tag is the granddaddy of the form world. It can take a multitude of guises, the most common of which are outlined below

• <input type="text"> or simply <input> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.

• <input type="password"> is similar to the textbox, but the characters typed in by the user will be hidden (only astericks will be shown).

• <input type="checkbox"> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute (<input type="checkbox" checked> - the attribute doesn’t require a value), and makes the initial state of the check box to be switched on, as it were.

• <input type="radio"> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute.

• <input type="submit"> is a button that when selected will submit the form. You can control the text that appears on the submit button with the value attribute, for example: <input type="submit" value="Send Form">.

Textarea

textarea is, basically, a large, multi-line textbox. The anticipated number of rows and columns can be defined with rows and cols attributes, although you can manipulate the size to your heart’s content using CSS.

<textarea rows="5" cols="20">Comment goes here…</textarea>

Any text you choose to place between the opening and closing tags (in this case “Comment goes here…”) will form the initial value of the text area.

Select

The select tag works with the option tag to make drop-down select boxes.

<select> <option>Student</option> <option>Faculty</option> <option value="Alumni">Graduate</option></select>

When the form is submitted, the value of the selected option will be sent. This value will be the text between the selected opening and closing option tag unless an explicit value is specified with the value attribute, in which case this will be sent instead. So, in the above example, if the first item is selected, “Student” will be sent, if the third item is selected, “Alumni” will be sent.

Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, to start off with one of the items already being selected, e.g.: <option selected>Student</option> would pre-select “Student” from the items.

Names

All of the tags mentioned above will look very nice presented on the page but if you hook up your form to a form-handling script, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example:

<input type="text" name="comment">

A form might look like the one on the next slide.

(Note: this form will not work unless there is a “contactus.php” file, which is stated in the action attribute of the form tag, to handle the submitted date)

<form action="contactus.php" method="post">

<p>Name:</p> <p><input type="text" name="name" value="Your name"></p>

<p>Comments: </p> <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

<p>Are you a:</p> <p><input type="radio" name="areyou" value="student">Student</p> <p><input type="radio" name="areyou" value="faculty">Faculty</p> <p><input type="radio" name="areyou" value="alumni">Alumni</p> <p><input type="radio" name="areyou" value="other">Other</p>

<p><input type="submit"></p>

</form>

A Larger Form Sample: http://faculty.cascadia.edu/cduckett/foundations/test/formsample.html

Programajama Sample Forms

Basic Form: No error-handling, no formattinghttp://programajama.com/test/basic_form/feedback_form.htmlDownload Basic Form files ZIP

Advanced Form: Error-handling, formattinghttp://programajama.com/test/advanced_form/contactform.htm Download Advanced Form files ZIP

Fancy Formhttp://programajama.com/test/fancy_form/fancy_form.html Not for download

Web Form Links

• W3Schools: HTML Forms & Input• EchoEcho: Forms Introduction• Form Tutor: Forms• Tizag: Form Tutorial• Wikipedia: HTML Forms• W3.org: HTML Forms• Quackit: HTML Forms Tutorial• Quackit: Form Examples• Mozilla: HTML Forms Guide• Smashing Magazine: Web Form Ideas & Modern Designs• 123 Contact Form: Free & Pay Forms• CSS Tricks: A Nice Simple Contact Form

• Google Docs• Wufoo• Freedback• Formsite• FormAssembly• JotForm• MachForm