AWM Creative

Collecting User Data and Practicing CSS-Based Web Form Development

Published in CSS, jQuery by Aaron

I’m on my last week of finishing up a large milestone of a project. One of the things I wish I could have spent more time on would have been the web forms. A lot of time is spent planning the layout, design, and content of a web site, but forms are commonly overlooked as an important feature.

We all know that forms are common for a user to interact with, which is why spending more time and thought with the layout and usability is important. As a web designer, I want to create forms that have minimal fields and are easy to use. However, convincing the stake holders can remain difficult.

With my experience, there seems to always be a person that feels strongly about collecting as much information from a user as possible for advertising purposes. Fine, but why does this have to be on the registration page? Can’t there be a better way to collect this type of data?

Different Ways to Collect User Data

There are two ways to collect data from a web user. The first is to provide an interface in which they interact with and the second is to retrieve this information. Here are some ideas on how to collect user data other than using one solution:

• Design a fun user interface that will benefit the user in sharing personal information (examples: Facebook and MySpace).
• Create a premium membership form
• Develop an online survey
• Use annalytics to track your users and how they use your site

CSS-Based Forms

In the past and with my most recent project, I built forms using tables for the structure and CSS for styling the form elements. I would have liked to explore other options, as mention earlier, but this would have taken more time I didn’t have. In the future, one of the options I plan on exploring will be developing forms with CSS. CSS provides more flexibility and will make the forms more structured, accessible and usable.

CSS-based forms are great, but there is a lot more involved with creating a successful web form. How will you validate? What about showing and hiding certain form elements depending on which radio button or check box you choose? What about populating select drop down menus with different information depending on your selection of a radio button? Below is a list of some resources that answer some of these questions and will help you design and develop a great web form.

• Form Elements: 40+ CSS/JS Styling and Functionality Techniques – Explore the different approaches for styling form elements with CSS and jQuery.
• 45+ New jQuery Techniques For Good User Experience – Check out different ways on how to develop dynamic form content, tabular data, and more.
• CSS-Based Forms: Modern Solutions – Great examples on CSS-based form development.
• Javascript in Modern Web Design – Form styling and validation.
• Fancy Form – MooTools checkbox styling.
• Web Application Form Design – Form design and layout.
• Streamline your Forms with Widgets – Learn a minimalist approach on how to build forms.
• Tips For Creating Great Web Forms – Form details you don’t want to miss.

Moving Forward

As you build your web forms and research for different techniques remember to keep things:

• Simple
• Accessible
• Usable
• Standards compliant
• Short

If you have any ideas or resources you may want to share, please leave a comment. I would love to know your thoughts and maybe learn a little bit from you!