Creating forms and adding fields and controls
Styling forms in CSS
Configuring a mailform CGI script
Sending forms using PHP
Creating a layout for a user feedback page
Creating an online business card using microformats

Introducing user feedback

One of the main reasons the Web has revolutionized working life and communications is its immediacy. Unlike printed media, websites can be continually updated at relatively minimal cost and also be available worldwide on a 24/7 basis. However, communication isn’t one-way, and the Web makes it very easy to enable site users to offer feedback.

Using mailto: URLs

One of the most common methods of providing immediate user feedback is by using mailto: URLs within anchor tags. Instead of the anchor tag’s value being a file name or URL, it begins with mailto: and is immediately followed by the recipient e-mail address.

<a href="mailto:someone@your.domain">Click to email!</a>

It’s possible to take this technique further. You can define multiple recipients by using a comma-separated list, and by placing a question mark immediately after the final recipient address, you can add further parameters, such as a subject and recipients to carbon copy (cc) and blind carbon copy (bcc). If using more than one parameter, you must separate them with encoded ampersands (&). Note that spaces within the subject should also be encoded (as %20).

<a href="mailto:someone@your.domain,someoneelse@your.domain?subject=
åContact%20from%20website&amp;cc=bigboss@your.domain">Click
å to email!</a>

Although this may sound great, there are several problems with such a system. First, e-mail addresses online are often harvested by spambots. Second, a mailto: link relies on the user having a preconfigured e-mail client ready to go—something that people working on college and library machines most likely won’t have. Third, not all browsers support the range of options explained earlier.

A way to combat the spambots is presented in the next section. For the second issue (the mailto: link’s reliance on a preconfigured mail client), I recommend using forms for any complex website feedback, which we will come to later on in this chapter. For the third issue (browser support for the more advanced mailto: options), I recommend just keeping things simple. Place your e-mail address online as a mailto: and enable the user to fill in any other details, such common as the subject line.

Scrambling addresses

In my experience, having an e-mail address online for just a few days is enough to start receiving regular spam. A workaround is to encrypt e-mail addresses using a bulletproof concoction of JavaScript. The Enkoder form from Hivelogic is a neat way of going about this, and produces decent results.

This online form at www.hivelogic.com/enkoder/form enables you to create a mailto: link that’s composed of complex JavaScript. Although in time, spambots will likely break this code, as they have with simpler encoders, it’s the best example I’ve seen, and the results I’ve had with it have been good. Beware, though, that any users with JavaScript disabled won’t see the address, so ensure that you cater to them by including some other means of contacting the site owner.

Working with forms

In this section, we’ll work through how to create a form and add controls. We’ll also look at how to improve form accessibility by using the tabindex attribute, and the label, fieldset, and legend elements. As suggested earlier in the chapter, the best way of getting user feedback is through an online form that the user fills in and submits. Fields are configured by the designer, enabling the site owner to receive specific information. However, don’t go overboard: provide users with a massive, sprawling online form and they will most likely not bother filling it in, and will go elsewhere.

Similarly, although you can use JavaScript to make certain form fields required, I’m not a fan of this technique, because it annoys users. Some sites go overboard on this, “forcing” users to input a whole bunch of details, some of which may simply not be applicable to the user. In such cases, users will likely either go elsewhere or insert fake data, which helps no one.

So, keep things simple and use the fewest fields possible. In the vast majority of cases, you should be able to simply create name, e-mail address, and phone number fields, and include a text area that enables users to input their query.

Creating a form

Form controls are housed within a form element, whose attributes also determine the location of the script used to parse it (see the “Sending feedback” section later in the chapter). Other attributes define the encoding type used and the method by which the browser sends the form’s data to the server. A typical start tag for a form therefore looks like this:

<form action="http://www.yourdomain.com/cgi-bin/FormMail.cgi"
å method="post">

Adding controls

Some form controls are added using the input element. The type attribute declares what kind of control the element is going to be. The most common values are text, which produces a single-line text input field; checkbox and radio, which are used for multiplechoice options; and submit, which is used for the all-important Submit button.

Other useful elements include select, option, and optgroup, used for creating pop-up lists, and textarea, which provides a means for the user to offer a multiple-line response (this is commonly used in online forms for a question area). The basic HTML for a form may therefore look like the following, producing the page depicted in the following screen grab.

<form action="http://www.yourdomain.com/cgi-bin/FormMail.cgi"
å method="post">
<p><strong>Name</strong><br />
<input type="text" name="realname" size="30" /></p>
<p><strong>Email address</strong><br />
<input type="text" name="email" size="30" /></p>
<p><strong>Telephone</strong><br />
<input type="text" name="phone" size="30" /></p>
<p><strong>Are you a Web designer?</strong><br />
<input type="radio" name="designer" value="yes" />Yes |
å <input type="radio" name="designer" value="no" />No</p>
<p>What platform do you favor?<br />
<select name="platform">
<option selected="selected">Windows</option>
<option>Mac</option>
<option>Linux</option>
<option>Other</option>
</select></p>
<p><strong>Message</strong><br />
<textarea name="message" rows="5" cols="30"></textarea></p>
<p><input type="submit" name="SUBMIT" value="SUBMIT" /></p>
</form>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The bulk of the HTML is pretty straightforward. In each case, the name attribute value labels the control, meaning that you end up with the likes of Telephone: 555 555 555 in your form results, rather than just a bunch of answers. For multiple-option controls (check boxes and radio buttons), this attribute is identical, and an individual value attribute is set in each start tag. By default, controls of this type—along with the select list—are set to off (i.e., no values selected), but you can define a default option. I’ve done this for the select list by setting selected="selected" on the Windows option. You’d do the same on a radio button to select it by default, and with a check box you’d set checked="checked".

Some of the attributes define the appearance of controls: the input element’s size attribute sets a character width for the fields, while the textarea’s rows and cols attributes set the number of rows and columns, again in terms of characters. It’s also worth noting that any content within the textarea element is displayed, so if you want it to start totally blank, you must ensure that there’s nothing—not even whitespace—between the start and end tags. (Some applications that reformat your code, and some website editors, place whitespace here, which some browsers subsequently use as the default value/content of the textarea. This results in the textarea’s content being partially filled with spaces, and anyone trying to use it may then find their cursor’s initial entry point partway down the text area, which can be off-putting.)

Long-time web users may have noticed the omission of a Reset button in this example. This button used to be common online, enabling the user to reset a form to its default state, removing any content they’ve added. However, I’ve never really seen the point in having it there, especially seeing as it’s easy to click by mistake, resulting in the user having to fill in the form again, hence its absence from the examples in this chapter. However, if you want to add such a button, you can do so by using the following code:

<input type="reset" name="RESET" value="RESET" />