4. Contact Form - CSS Styled

Main Points

• CSS Styled Contact Form The contact form as styled in the page footer.
• XHTML Explanation The Footer mark up explained.
• Feedback Check out the new contact form!
• ^{Skip to Main Points} links return to the Main Points menu.

CSS Styled Contact Form

In implementing a master page based template across the site, this testing page or its dependencies may have been moved. Therefore, some of the references have been changed possibly including master page friendly techniques like application root relative references. They are not original.

[chroniclemaster1, 2008/11/07]

Well, this looks like how we're going to implement it. The XHTML and ASP.NET code look good, follow logical semantic markup, and are designed with accessibility expressly in mind. It's also wired up in VB.NET to send email, but more on that next time. It is styled to provide a slightly different look, including the graphic roll over; similar enough to clearly belong in the design, but different enough to attract attention. It allows some room for white space so that the form doesn't look cramped, but is relatively compact compared to other designs we attempted. Here's the client side code that generates it, which is identical to the previous page. This version is identical except that is has also been implemented and styled appropriately below.

The contact form was far and away the most difficult item to render similarly in IE and Firefox. The CSS for the navbar is probably a more impressive looking achievement on the page, but it rapidly becomes apparent that the CSS for the contact form is significantly more complex. There are a number of effects that require setting several properties rather than just one. There are a number of effects that require setting properties for multiple elements to work in combination. It is definitely the most impressive styling achievement and demonstrates the most fine tuned control of CSS on the website to date. This precipitated all the difficulties with browser rendering, because we were using more complex and varied CSS techniques and running into compatibility of display problems. I'm very proud of the results, and look forward to seeing the response to it's debut across the site. Of course that probably doesn't mean we're done with it. ;)

XHTML Explanation

The first important section of mark up is the form tags. Everything that happens in the contact form must happen inside the form tags. Everything that happens requiring server side attention must happen inside the form tags, ASP.NET requires it. The form tag declares it's method "post" which sends information to the server in the most secure form possible. It specifies the action to take on completion of the script, ie to reload this page. It also declares a name used to process the form and an id and class to manipulate the form with CSS.

Inside the form tags are two divs inserted by ASP.NET 2.0. At the top of the form is a div that includes the hidden form field, __VIEWSTATE. View state stores information about the form's settings, which allows the webpage to retain information even after the post to the server which causes the page to reload. Otherwise that information would be lost. At the bottom of the form is another div for __EVENTVALIDATION. This hidden field provides security information for validating the view state.

There is are fieldset tags bracketing the form proper. The field set draws the border around the form elements. The legend tags add the text which appears in the upper left of the fieldset border. Complex forms may have multiple fieldsets to group similar form elements, but our is simple enough that it only needs one. We then use an ordered list to describe semantically the form elements. Each form element is a list item. Finally, each form element has its own label tag. The label tag is indispensable for semantically associating text with the control it describes. It's a vital tool both for semantic markup generally, and accessibility specifically.

Inside the list are three list items. The first is the email text field. The second is comments text field. The third list item has two elements which are intimately associated. The first is the button which sends the contact form. The second is the label which notifies the user that the email has processed correctly and has been sent. The button triggers the post back event which causes the information to be sent to Earth Chronicle, and when we return to the page, the label is programmed to show if everything went all right.