Professional Form Design

[acoder]

Does anyone know of any resources on designing professional HTML forms?

I can code in HTML and CSS, but I'm not the best designer. I just need pointers on good, clean professional design.

I am aware that the CSS style fascists (maybe too strong a word) disapprove the use of CSS on forms arguing that it hampers rather than aids the user because users have grown used to the way the form is displayed on their browser and function is more important that making it look pretty.

However, I am of the opinion, and there are many that hold the same view, that small style changes that match the professional look of a website poses no harm and can enhance the user experience.

The form in question is an advanced search form with many fields. Should this form be split into related parts or is one large form OK? We are talking about 16 or so fields with some containing select boxes, check boxes and radio buttons.

Also, does anyone have opinions on styling buttons? What about the reset button? Get rid of it altogether or move it to the side?

Thanks in advance.

[AricC]

I would use a table or some div's to lay it out. I also, would use CSS to help the form match the rest of the site. I wouldn't try to make them too fancy, when I create forms I don't want the user to have to guess about anything. As far as the reset button you may as well include it, you don't really have to do any coding with it so why not have it? You may also want to let the user preview the data if it's going to be a large form.

HTH,
Aric

[acoder]

I would use a table or some div's to lay it out. I also, would use CSS to help the form match the rest of the site. I wouldn't try to make them too fancy, when I create forms I don't want the user to have to guess about anything. As far as the reset button you may as well include it, you don't really have to do any coding with it so why not have it? You may also want to let the user preview the data if it's going to be a large form.

HTH,
Aric

Thanks for your comments. I use a table to lay out the form because it's not worth the effort trying to get divs to lay out the form, especially considering the system users use IE and version 6 at that. Most have probably not even heard of Firefox or think only programmers use Firefox, Opera and other browsers!

Yes, I agree about not making forms too fancy. I'm talking about simple changes such as slight shading, border colour changes, button shading and colour changes (but not too much). This is the main purpose of this thread: any tips on giving a professional touch to forms.

Actually, this is not limited to forms but to a website in general. Sure I can code using HTML/CSS, etc. but designing a good-looking site which includes a nice professional form is something else. The main problem I have is finding the right mix and blend of colours.

I'm inclined towards either one of three options: a blue theme with shades of blue, mainly white with orange and green, or brownish theme with a mixture of light and dark shades. If anyone can suggest a good colour theme with examples, templates or similar to give me ideas, I would be grateful.

The reset is probably hardly used and what if someone clicks on the reset button instead of the Search button? That's why I asked regarding the reset button. Some suggest moving it away from the primary button (search) because it is a secondary function that's only used rarely when needed.

A preview would not be appropriate in this case because it's a search form which has general default settings most of which are never changed (but included just in case they are needed). Whenever a search is made, it is made on probably two to three items, no more, but all the options are required hence the size of the form. The date is at the top because that is used most often.

One other thing I have is the Search and Reset buttons appear both at the top and the bottom of the form for convenience since it is a large form which will probably exceed the browser window size unless the user has a large screen with a maximised window size. i have restricted the form to 760-70px to allow for users with 800px screens.

So any ideas (especially on colour as mentioned in 4th paragraph)?

[AricC]

Doubt you want my help when it comes to graphic design all of my sites are done in a shade of grey. The blue color sheme sounds the best of the three.

[CSS Steve]

Hi All,
My biggest problem with making great looking HTML forms is that the Google toolbar automatically changes the background color of text input fields to yellow, as a side effect of it's auto-fill functionality. For graphic design perfectionists like me this is a huge problem (especially since so many people use the Google toolbar, and the yellow background may clash with the color scheme of the page). I searched long and far before I found the solution:
Adding this special identifier to the CSS class of the form input field will ensure that the background will stay the specified color.
After the end of the Hex code of the color being defined, but before the semi-colin delimiter, place a exclamation point and the word important, just like this:
background-color:#FFF !important;
And that will fix the yellow background bug commonly seen effecting text input fields within HTML forms.

There is a nice form at the bottom of my home page:
HTML Form At Bottom Of Page
I have an example on my contact page:
Professional Style HTML Contact Form

Hope This Helps,
Steve Tchorzewski
SEO Engineer

[AricC]

Hi All,
My biggest problem with making great looking HTML forms is that the Google toolbar automatically changes the background color of text input fields to yellow, as a side effect of it's auto-fill functionality. For graphic design perfectionists like me this is a huge problem (especially since so many people use the Google toolbar, and the yellow background may clash with the color scheme of the page). I searched long and far before I found the solution:
Adding this special identifier to the CSS class of the form input field will ensure that the background will stay the specified color.
After the end of the Hex code of the color being defined, but before the semi-colin delimiter, place a exclamation point and the word important, just like this:
background-color:#FFF !important;
And that will fix the yellow background bug commonly seen effecting text input fields within HTML forms.

There is a nice form at the bottom of my home page:
HTML Form At Bottom Of Page
I have an example on my contact page:
Professional Style HTML Contact Form

Hope This Helps,
Steve Tchorzewski
SEO Engineer

That's interesting I like to leave my users settings alone. I don't want there to be any confusion on their part.

[acoder]

Hi All,
My biggest problem with making great looking HTML forms is that the Google toolbar automatically changes the background color of text input fields to yellow, as a side effect of it's auto-fill functionality. For graphic design perfectionists like me this is a huge problem (especially since so many people use the Google toolbar, and the yellow background may clash with the color scheme of the page). I searched long and far before I found the solution:
Adding this special identifier to the CSS class of the form input field will ensure that the background will stay the specified color.
After the end of the Hex code of the color being defined, but before the semi-colin delimiter, place a exclamation point and the word important, just like this:
background-color:#FFF !important;
And that will fix the yellow background bug commonly seen effecting text input fields within HTML forms.

There is a nice form at the bottom of my home page:
HTML Form At Bottom Of Page
I have an example on my contact page:
Professional Style HTML Contact Form

Hope This Helps,
Steve Tchorzewski
SEO Engineer

This is one example where I would not try to force the change in the appearance of the form in the browser. The users probably expect the text input fields to appear yellow for auto-fill purposes. If it spoils my beautiful design, so what? It's what the users expect AND it has a meaning so we can leave it. In this case, the users would most probably get confused,

[acoder]

There is a nice form at the bottom of my home page:
HTML Form At Bottom Of Page
I have an example on my contact page:
Professional Style HTML Contact Form

By the way, welcome to The Scripts and thanks for sharing. Just an observation, but on your forms, you have no labels. You have, instead, opted to use the text input fields to tell the user what to type in a field. When the user clicks on a field, they have to manually delete the info. Once it is deleted, it doesn't come back so the user might not know what to type in a particular field unless they reload the page. I know this is unlikely in a small form, but the possibility still exists and you have to program for all eventualities. That's why I prefer to use labels.

[Frinavale]

Does anyone know of any resources on designing professional HTML forms?
...
The form in question is an advanced search form with many fields. Should this form be split into related parts or is one large form OK? We are talking about 16 or so fields with some containing select boxes, check boxes and radio buttons.
...

If you think your form is too long and clunky you might want to split it up into different pages. Smaller chunks of information are less overwhelming than one big form and you can position things on the screen with more freedom and room.

As for colour schemes, you might want to take a look at the company's colours to choose colours for the website...unless you're designing this for yourself...in which case I'd suggest you go with the colours that you like best :) Just keep in mind that there are some colour blind people out there so using highly contrasting colours might be a good idea (Eg. black on white...).

I depend on This site to help me pick web-safe colours for my website.

-Frinny

[acoder]

If you think your form is too long and clunky you might want to split it up into different pages. Smaller chunks of information are less overwhelming than one big form and you can position things on the screen with more freedom and room.

As for colour schemes, you might want to take a look at the company's colours to choose colours for the website...unless you're designing this for yourself...in which case I'd suggest you go with the colours that you like best :) Just keep in mind that there are some colour blind people out there so using highly contrasting colours might be a good idea (Eg. black on white...).

I depend on This site to help me pick web-safe colours for my website.

-Frinny

Thanks for your comments. Since it is a search form with many default options most of which are only offered for completeness, it would not be appropriate to split over several pages.

Yes, I have come across that link and others in my search for a good colour scheme. Thanks.

[AricC]

This is one example where I would not try to force the change in the appearance of the form in the browser. The users probably expect the text input fields to appear yellow for auto-fill purposes. If it spoils my beautiful design, so what? It's what the users expect AND it has a meaning so we can leave it. In this case, the users would most probably get confused,

I think he was trying to sell his services. I thought about deleting his post, but it was somewhat relative. Although, if you look he sends you to his sales pitch and a send me money form.

[acoder]

I think he was trying to sell his services. I thought about deleting his post, but it was somewhat relative. Although, if you look he sends you to his sales pitch and a send me money form.

Oh my, I didn't spot that! Thanks for pointing it out, though I completely missed his sales pitch and began critically studying his 'form'!

[AricC]

Oh my, I didn't spot that! Thanks for pointing it out, though I completely missed his sales pitch and began critically studying his 'form'!

I didn't at first either. IMO, he needs to clear the controls default value when they gain focus. I wouldn't be surprised if he gets a lot of submissions like this:
Type Your Name Bob Smith
Type Your Email Address [e-mail]
Confirm Email Address [e-mail]
Type In Message Subject Hi from Bob Smith
Type Your Comments Some comments from Bob