Webmaster Forum

Go Back   Webmaster Forum > Web Development > Web Design Lobby

Web Design Lobby Forum for general web design issues not specific to scripting or graphics.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 01-22-2010, 12:18 AM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,836
iTrader: 5 / 100%
Tips for Coding and Designing Usable Web Forms

Quote:
The web form has been one of the most discussed elements in web design for more than ten years now. We canít help it. Call-to-action functionality often leads users to a form; purchases are made using forms; users register or subscribe using forms ó the uses for forms are endless.

While it is fairly easy to slap together a form in HTML, itís not as easy to code, style, and design your form in a manner that makes it usable and accessible to the majority of users. Since forms play such a large role in website conversions and success rates, the tips below, as well as the resources provided at the end of this article, should prove valuable for developers creating and coding web forms....
Continued: Tips for Coding and Designing Usable Web Forms

This article covers:
  • Two-Column vs. One
  • Use Inline Form Validation
  • Group Related Fields
  • Clearly Indicate Required Fields
  • Fancier Checkboxes, Radio Buttons, and Select Elements
  • Display a Hint When a Field Gets Focus
  • Be Generous with Whitespace
  • Make Your Forms Accessible

Some good ideas that make sense in this article.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #2 (permalink)  
Old 01-22-2010, 12:36 AM
Junior Member
 
Join Date: 01-21-10
Posts: 3
iTrader: 0 / 0%
Thanks! It's really a good read. I hope most would read and really implement these tips so that the Internet can be filled with more nice and good looking websites.
 
Reply With Quote
  #3 (permalink)  
Old 01-23-2010, 08:31 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,836
iTrader: 5 / 100%
Here's another forms article: Fancy Form Design Using CSS
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #4 (permalink)  
Old 01-25-2010, 11:36 AM
Banned
Latest Blog:
None

 
Join Date: 11-11-09
Posts: 101
iTrader: 0 / 0%
thx for the shearing inf o for the web site design
 
Reply With Quote
  #5 (permalink)  
Old 02-07-2010, 03:26 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,836
iTrader: 5 / 100%
Adding focus to form fields

Quote:
You can highlight the form field a user is in. Itís a small visual cue as to where the cursor is in the form.
Adding focus to form fields
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #6 (permalink)  
Old 02-07-2010, 04:46 PM
AmySueN's Avatar
v7n Mentor
 
Join Date: 10-29-07
Location: Wisconsin
Posts: 1,466
iTrader: 0 / 0%
Thanks for the info! Some day I want to be brave enough to code my own forms instead of using James's or free templates. One step at a time...
__________________
www.MyHappyCrazyLife.com- Life in all its happy, crazy, spontaneous glory!

Cloth diapers can be fun?? You betcha - come and see! www.Zany-Zebra.com
 
Reply With Quote
  #7 (permalink)  
Old 02-09-2010, 06:25 AM
Junior Member
 
Join Date: 02-08-10
Posts: 1
iTrader: 0 / 0%
Well, this is good information you shared here. This is really big help for me because I am gathering some information about web design. Maybe someday I can apply this information, I get it here.
 
Reply With Quote
  #8 (permalink)  
Old 02-09-2010, 02:29 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,836
iTrader: 5 / 100%
Not exactly a discussion about usability but still about forms: What Your Form Design Reveals About You
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #9 (permalink)  
Old 02-17-2010, 10:04 PM
snakeair's Avatar
Super Moderator
 
Join Date: 12-31-07
Location: Southampton, NJ
Posts: 49,548
iTrader: 3 / 100%
4 Terrific Tools for Creating Business Web Forms

Here is a very good article that might be useful to everyone.

Although i have not had the need to use these tools, i am sure lot's of other members would find this article interesting with the tools provided.

Quote:
Web forms can be a great asset on your business site. They let you collect pertinent data and contact information from your visitors without exposing your direct e-mail address to the world. They also set specific boundaries on the type of data you receive from customers so that the information fits nicely into a spreadsheet or database as needed.

Building a web form used to require a bit of coding and “wiring” on the back end of your site. These days, there are some great free and low-cost resources on the web that make building and....
Full article and source: Business Web Forms

Does anyone have any comments about these 4 tools? What worked for you and what didn't work? Suggestions are more then welcomed.
__________________
WP Outcast - WordPress News, Tips & Theme Release's

Like Us on Facebook
facebook.com/wpoutcast

Last edited by snakeair; 02-17-2010 at 10:50 PM.
 
Reply With Quote
  #10 (permalink)  
Old 02-26-2010, 08:32 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,836
iTrader: 5 / 100%
Quote:
...Through hints and validation, we can create forms that are a lot more user-friendly than their offline counterparts. And in some cases, we can make forms that people might even enjoy filling out...
Best Practices for Hints and Validation in Web Forms
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #11 (permalink)  
Old 03-05-2010, 03:45 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,836
iTrader: 5 / 100%
Quote:
The default display for a fieldset is a square cornered border. In certain browsers (Firefox and Safari and perhaps others) you can use CSS to make rounded corners on the border around the fieldset and around the legend.
Style a fieldset with rounded corners using CSS
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #12 (permalink)  
Old 03-15-2010, 12:12 AM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,836
iTrader: 5 / 100%
Quote:
When creating a web form, one of the many choices you must make is how you are going to align your labels with your inputs. This is not a trivial decision, as this placement affects the readability/usability of your form, completion rates, speed of completion, and ultimately the satisfaction level of the users trying to get through your form. But is there one ultimate answer for how you should be aligning labels? Not really, it depends on the specific needs of your form and the design constraints of the page.
Label Placement on Forms
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #13 (permalink)  
Old 04-22-2010, 04:46 AM
Junior Member
 
Join Date: 04-22-10
Posts: 27
iTrader: 0 / 0%
hi

The best thing is that Webform do not require you to setup a content type for each different form, instead each form is tied to a particular node.

Last edited by charlesying; 04-22-2010 at 04:46 AM. Reason: spellings
 
Reply With Quote
  #14 (permalink)  
Old 04-22-2010, 08:32 AM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,836
iTrader: 5 / 100%
Quote:
Originally Posted by charlesying View Post
The best thing is that Webform do not require you to setup a content type for each different form, instead each form is tied to a particular node.
What does this have to do with the topic of this thread? "Coding and Designing Usable Web Forms"
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #15 (permalink)  
Old 04-24-2010, 03:38 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,836
iTrader: 5 / 100%
24 Steps-Left Pages That Enhance The User Registration Process

Quote:
The registration process should entail simplicity, great usability and a high-level of accessibility. With numerous sites wanting to focus on how attractive and eye-catching their sign-up forms are, they seem to ďforgetĒ one principle; how the user interacts with the registration form....
24 Steps-Left Pages That Enhance The User Registration Process
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Web Design Lobby

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Web 2.0 Designing Tips manika SEO Forum 1 08-04-2008 02:36 AM
Can anyone give me tips for Website designing webmasterhelper Web Design Lobby 10 03-19-2008 02:06 AM
php coding, java coding, webdesign, windows coding... SVB SEO Forum 5 02-24-2004 10:25 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 04:34 AM.
Powered by vBulletin
Copyright © 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.