Contact forms are the best way to attract visitors and to interact with them. A creatively designed and inspirational contact form is the most appropriate way to say welcome to your visitors and invite them to use your services. A comprehensive and stylish form persuades the visitors and helps build their confidence in the company behind the site.

We have gathered some interesting examples of contact forms for your inspiration. Please notice that some of them are nice, but hardly usable. The idea of this article was to present you some ideas, not necessarily the execution of the ideas.

Creative Contact Forms

Gpacheco’s contact form is both visually captivating and creatively styled to fit with the natural look and hand carved elements that accompany the rest of the site. Though it may not necessarily be clear to some users where the text box for the form is, given its lack of highlighted edges, it gives the user the width of the site to compose their thoughts freely into the sand. The padding around the borders of the name and email address boxes could stand to be a bit wider as it feels tight and some letters can extend over the border image creating a slightly, visually uncomfortable presentation.

Lion Ways uses a postcard design for their contact form which stylistically works really well on a site where each page is based around cards/books/etc. It is a very nice and subtle form that really blends well with the site overall. Clean and basic.

Beakable form is very creative and looks really nice, though there are some usability issues that could stand to be addressed. Adding boxes around the space for the name and email address would make those areas better stand out as editable. The submit button could use more attention drawn to it so that it is more easily recognizable that it is the submit button.

fCtm-Argentina has a wonderfully unique and creative design for their contact form, styling it as a boarding pass to fit with the tone of this travel based business site. The form works both in style and function, however, the comment box feels a bit tight with the settings as they are, and it could use a bit more padding around the edges.

Matt Dempsey’s site has a stylish contact form setup with brushstroke styled text boxes which all work well enough. However the right edges begin scrolling a little late for those with long names or email addresses, and readability becomes a slight issue. Again, this will more than likely not come into play that often, but it could.

Ctrl+N contact form perfectly matches the retro, side scrolling design of the site. The titles and boxes could use a bit more padding and the message box should change color like the others to denote that it is active.

Nineteeneightyfour is the web design portfolio of Martyn Palmer which has a stylish contact form that drops down into place on the page when you click on the contact button. Here the button is made up like a post it note to match the overall feel of the site. With various other contact information scattered about the area and scribbled on scraps of paper, the contact form itself could have been styled more to fit among the other hand drawn elements a little more.

Tony-Johnson has an interesting contact form set on his site as well. Styled as a portfolio case, the contact form is compactly placed in the borders of the case just fine. However, if the user has a comment or query to submit through the contact form that is of any substantial length, the text box does not scroll to allow them to see what they are typing below the cut. This almost discourages any lengthy or in-depth sort of contact in this case.

Try Triangle’s contact form is both creative and wonderfully implemented. The spacing and scrolling all fit well within the small spaces provided. Not feeling cramped at all, even in such close quarters, which is not always an easy task to pull of design wise. However they have done well integrating it into the site with imagination and style. Though one area where the size does feel a bit limiting is in the main text box on the contact form. It scrolls so that you can follow what you are saying, but only after a couple of lines so that you are not seeing much of your train of thought behind you as you type.

Bio-Bak has an extremely creative, if not somewhat cumbersome contact form. The mouse styling makes some of the site difficult to click on, and the interactive elements added to the contact form are only compounded by this design choice. And while the extra steps for entering your e-mail information are creative, they can ultimately serve as a detractor for some users who are not interested in playing along.

Artcore-Illustrations is another site where they opted for a simple form that does not go over the top with bells or whistles. It simply, and in subtle fashion with the rest of the site, accomplishes its purpose. The padding and spacing all fit comfortably into their boxes, while the transitions to indicate your selected box smoothly highlight the location of your cursor for the user.

Indofolio has done a wonderful job incorporating their style and site tone into the contact form that they use. While there is plenty of space in the boxes for entering your information, if the e-mail address or name are too long then the right side of the box will cut off the last letter you are typing so that you cannot see what is there. The padding on the left side of the main text box could also be slightly adjusted, if only for the first line of text which goes over farther than the preceding lines of text.

Lunalunerafestival is another site that creatively styled the contact form to be set up like a letter being written. The text boxes for the name and email address, though at an odd angle, remained completely readable and within the borders of the box. The large area that is available for the message box provides an inviting landscape for the users to share and discuss whatever they have to say. Comfortably padded and all around well done.

Yodaa has a stylish looking contact form which has uneven information boxes to help fit with the fun animated feel of the site. However, these edges of the boxes do not line up correctly with the text inside, so not only does some of the text distractingly break outside of the box interfering with readability, it feels like a major oversight on a site dedicated to usability in design.

Umquarto has a beautiful and simple contact form, from complete form presentation to the transitions highlighting cursor location easily and stylishly for the benefit of the user. Everything feels concrete and firmly in its place with even and visually pleasing padding and spacing throughout the form.

Xruiz has a nice hand drawn feel to the contact form elements that really help tie it into the rest of the design. However the padding at the top of each of the text boxes could stand to be adjusted. It is only somewhat noticeably off in the entry boxes for your name and email, as the info hovers closer to the top of the box than it does the bottom. But in the message box, it is majorly off, and the top line nearly rests on the top edge of the box.

Qwert City is another site that uses the look of a postcard for the design of their contact form, in a colorful, if not overly so way. For instance the light blue color of the text could stand to be bit softer to blend better with the other elements of the form. And while there is a fairly decent sized text box for whatever message you have to leave, should the message be too long, the box does not scroll to allow the user to see what they have written after a certain point.

Created 201 Studios has a creative and very unique contact form on their site, that completely flows with the style of the site and does not break from the angular presentation of the other pages. And once again, even with this angled effect, the data entered does not feel out of place or uncomfortably squeezed into the design. Overall, it is brilliantly crafted.

Brian Handley Design has a whimsically illustrated contact form set up to match the rest of the site perfectly. The implementation of the form is nearly flawless as well, however, it is a relatively small message box compared to most, and once again we find that the box does not scroll to keep up with the user at all, and can prevent some users from leaving their comments or contacting the Brian via the form.

Swiths contact form is another example where they opted for a simpler, understated approach. The padding is offset so that the text in the information boxes is not centered, but more rests towards the bottom of the boxes and this does not feel visually uncomfortable in any way. However the kerning on the font used can make the words feel a bit spread out and unevenly spaced. Though that is the only part of the form that feels off at all.

Marcol is another site that has stylistically pulled off their contact form, however, usability wise it could use a slight tweak or two on the padding for the left and right borders of the information boxes. Some of the text entered in these boxes has a tendency to bleed over the borders which is somewhat unpleasing to the eye. The main message box is fine with its padding, but the others, not so much.

Bert Timmermans contact form is sleek and professional, which compliments the tone and feel that the rest of the site imparts nicely. The padding and scrolling all appear to be in order as well, which is what you would expect given the rest of the site. Cleanly designed and implemented.

Christian Sparrow’s contact form is hardly the most creative element on the site, but it stylishly fits so well with the rest of this creative little gem that we had to showcase it here. All aspects of the contact form work brilliantly, and the floating clouds that pass by in no way interfere with the readability of the form. The only area that could even be suggested for improvement in our eyes would be that the text that acts as an indicator for what should go in the box gets automatically highlighted and erased when you navigate there and begin typing.

EletricPulp has a stylish contact form with a subtle textured background that accompanies it, nicely tying it into the rest of the site’s design. The text indicators seem a bit redundant given that they are not only listed boldly outside the text boxes, but they are also echoed right beneath these headers in the boxes themselves.

Ryan McMaster’s contact form is actually a little bit more in depth than most that we have featured. Here he has included areas for the user to include their reason for the message and even allows a space for an expected budget should this be used by a potential client. Once again the indicators stay in the box when you click there and have to be manually selected and deleted. Not a big deal, but a step that can slow some users down.

August Creative Agency has an extremely unobtrusive contact form on their site that is cleanly incorporated into the picturesque background of the site. Once again, a very basic presentation and contact form setup, but as usual, it works well with the overall site rather than clashing with it in any way.

We Love Icons has a gorgeously carved contact form for their site, covering the standard info that most ask for. The compact and cleanly presented form is as visually comfortable as it is sharply implemented, complimenting the rest of the design wonderfully.

Kev Adamson has a contact form on the site that feels squeezed in a bit among various other elements, however, enough care has been put into the form itself so that none of the other areas or elements attached to it feel that way. The fonts used are petite enough that they fit nicely among the grunge ridden form, which matches with the rest of the site well.

I love Colors has a well designed and stylish contact form to match the rest of their site. The simple highlights around the active text box, along with the evenly padded borders give the form a very sleek and comfortable appearance. With plenty of room and satisfactory scrolling, the form warmly invites feedback from the site’s users.

Ashes And Milk have a stylishly designed contact form, neatly tucked away in a box. The simple nature of the form works nicely with the rest of the site, however in the main text box when you enter enough text for it to scroll, the appearance of the scroll bar grabs traces of the text behind it and keeps it there the whole time you continue down the message box.

Fabric Adecaricaturas has a contact form that has as much personality in it as the rest of the site. The text boxes are subtly styled and comfortably padded, without any visual distractions or discomfort caused by them.

Giraffe has a colorful and welcoming contact form that fits with the atmosphere and ambiance that they have established through their restaurants and their accompanying website. The form, boxes, and the fonts are all bold and highly visible, unlike some of the smaller, subtler forms that we have seen.

Fundolospaltos has a stylish and understated design approach to their site’s contact form. Though nicely executed, the text boxes, especially the message box could use a little bit of extra padding around all of the edges. The text feels slightly squeezed in the way it is.

Harmony Republic has a simple contact form on their site which is styled with hand-drawn line elements for the text boxes which work nicely to accentuate the entry points. The spacing and padding are all set at comfortable levels, and do not include any breaks that detract from the simple beauty of the design.

Trendy Web Design’s contact form is another form where the style is subtle, but complimentary to the rest of the site so it works well. However the padding on the sides of the text boxes could use some minor adjustments as the text feels pressed against the edges as is. The message box also could stand some adjustments to the padding at the top and bottom as well allowing the text more room to breathe as it were.

Red Bull Soapbox Racer has a appropriately styled contact form to fit with the irreverent site it is attached to without compromising the functionality of the form in any way. The site takes over your sound upon entry and there is sound that accompanies certain elements of the form which seems slightly unnecessary. Though the form is obviously not the draw or focus of the site, it does not suffer or feel lacking in any way in such a unique and whimsical site.

Z-Index Media has a very unique and creatively styled contact form that is set up like a letter being placed into an envelope. The padding is hardly an issue with the expansive area provided to the user to enter their information and message, but even when pushed to the edges, the text remains comfortably spaced. The return to sender element that gets added to the outside of the envelope when you enter your name and email address is also both stylish and creative.

Aterlierdetour has a stylishly creative contact form that is befitting of the site it is carved out of. The non-symmetrical boxes have the grungy hand drawn appeal, while completely containing the text and not having any of it pouring over the edges. The padding in the main text box could stand to be tweaked around the top and the right edges. In these two areas the text feels pushed too close to the edges for complete comfort.

Danielhellier’s contact form is a comprehensive and boldly styled, which compliments the site well. However, after taking the time to craft such an inclusive and information gathering form, the navigational element that gets the user to the page, can also problematically land over the top of the submit button for the form negating the entire form right then and there.

Enviramedia has a rather large contact form that fits with the bright, pastel illustrated website it is a part of. The padding leaves everything feeling roomy and not at all forced in. Overall it is a very inviting contact form that begs for conversational messages from their users.

Alexandru Cohaniuc’s large and bold contact form is simply textured and styled to go hand in hand with the other site elements and inclusions. The padding and scrolling are set up comfortably and not in any way disruptive. Simple, bold, and eye catching.

Five cent stand returns us to the simpler, yet stylish contact forms, where subtle styling is key and the understated color and textures do not overload or complicate the issue at all. The padding in the message box is a little tight on either side, especially with so much room left at the top, it just felt like things were a bit unnecessarily squeezed into place rather than just organically fitting.

Social Snack has a tiny little contact form tucked away down at the bottom of their site, that not only does not seem that inviting to large messages being left, but the scroll bar in the small text box grabs fragments of the text behind it, obtrusively carrying these fragments down the rest of the text box. The spaces provided for the name and the email address are comfortably padded and have no interference that complicates their view.

World-Arcade has an extremely simple contact form that pops up when you click on the contact link. The brightly colored box with the animated robot fit with the overall site theme and presentation. The spaces provided are all well padded and comfortably set up. Overall, it is very simple, but effectively and invitingly crafted.

Hybridworks has a flashy site overall, but the contact form, while sleek and aided by the same sound effects that accompany the rest of the site feels a bit out of place with main presentation of the site. Also, in the main message box, the padding on the left and right side are not even to the point where it feels like something is slightly off. A minor adjustment could straighten that out and make it that much more comfortable on the users visually.

Carsonified has a colorful and bold contact form with large text boxes to fit hand in hand with the feel of the rest of the site design. With such large boxes, the padding seems like it would easily not be an issue, however in the message box the padding on the right side is not set equally with the left and the text can feel pressed right against the edge. There are also fragments that are captured behind the scroll bar when it appears in the box that remain attached to it.

(ik)

  

Here we present some useful plugins and tutorials that will let you create awesome forms for your websites — whether it’s a sign up form or contact us form. You can enhance its functionality and usefulness with these plugins. Since these forms are used by the visitors of your website to interact with you, they are of great importance and for this reason you cannot just ignore them as they play an important role in the success of your website. So here we have gathered a bunch of jQuery Plugins, Tutorials and Resources which will help you in improving the effectiveness and beauty of these forms

Useful jQuery Plugins

Turn Any Webform into a Powerful Wizard ( Demo | Download )
The FormToWizard plugin helps you to turn any webform into a powerful wizard with jQuery “steps left” information.

toChecklist plugin ( Demo | Download )
The toChecklist plugin for jQuery will give you the functionality of a SELECT box without the need to ctrl+click items to select them.

FlexBox ( Demo | Download )
FlexBox is a jQuery plugin that is intended to be a very flexible replacement for html textboxes and dropdowns, using ajax to retrieve and bind JSON data.

A fancy contact form ( Demo | Download )
Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.

Jquery Collapser ( Demo | Download )
Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements.

asmSelect – Select Multiple Form Fields ( Demo | Download )
asmSelect is a jQuery plugin that answers some of these issues. A progressive enhancement is applied to the select multiple that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options.

JQUERY: DFORM ( Demo | Download )
The jQuery.dForm plugin allows you to create your HTML forms programmatically from

A jQuery Inline Form Validation ( Demo | Download )
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers.

JQuery plugin for input text field filtering ( Demo | Download )
This is simple JQuery plugin for filtering text input field by using regexp. Only allowed characters will be inserted into input field, others will be silently dropped.

jQuery Show Password Plugin ( Demo | Download )
This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.

Simple Validation Plugin ( Demo | Download )
A simple validation plugin that comes in at about 1.5kb.

AutoSuggest jQuery Plugin ( Demo | Download )
AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.

How to create Skype-like Form buttons using jQuery ( Demo | Download )
If you use Skype then you have probably noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. In this tutorial Janko Jovanovic is going to show you how to create the same button using jQuery and some simple CSS.

Create an AJAX/jQuery/PHP Contact Form ( Demo | Download )
This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page.

JavaScript image combo box ( Demo | Download )
Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing “select” element.

jQuery plugin: Password Valida ( Demo | Download )

prettyCheckboxes ( Demo | Download )
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

Boxy – Facebook-like dialog/overlay, with frills ( Demo | Download )
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening.

Enlarge input fields on focus ( Demo | Download )

WordPress contact form without a plugin, using jQuery ( Demo | Download )
There are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, Trevor is going to show how to use a custom page template to create a contact form in WordPress without a plugin.

Build An Incredible Login Form With jQuery ( Demo | Download )
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

In-Field Labels jQuery Plugin ( Demo | Download )
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

jQuery Keypad ( Demo | Download )

How to Enhance Forms Using jQuery UI ( Demo | Download )
jQuery makes creating UI so much easier without compromising speed and quality. In this tutorial we are going to enhance form using jQuery UI, so let’s get started

Autocomplete ( Demo | Download )
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

jqTransform ( Demo | Download )
This plugin is a jQuery styling plugin wich allows you to skin form elements.

jQuery Validation ( Demo | Download )

Submit A Form Without Page Refresh using jQuery ( Demo | Download )
Submit a contact form that sends an email, without page refresh using jQuery, This tutorial will help you creating a form that can be submitted without page refreshing, using JQuery.

Selecting Multiple Select Form Elements on the Fly ( Demo | Download )
The following jQuery tutorial offers a simplified solution to selecting related select menu options within a form.

timepickr ( Demo | Download )
jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.

AJAX forms ( Demo | Download )
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.

jQuery AlphaNumeric ( Demo | Download )
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

Give Your Characters a NobleCount ( Demo | Download )
NobleCount is a customizable jQuery plugin for a more improved counting of the remaining characters, and handling of resulting behaviors, of a text entry object, e.g. input textfield, textarea. Also, NobleCount supports pre-existing text within the text object and jQuery chaining.

Password Strength Indicator and Generator ( Demo | Download )
In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

“SAFE SUBMIT” AJAX REQUEST BUTTON HANDLER ( Demo | Download )
If you want to disable your ajax submit buttons when clicked to disallow double submits, jquery.safesubmit makes it simple and safe.

JQByte StickyForms ( Demo | Download )
StickyForms is a jQuery plugin that automatically saves all form fields into cookies, and then autofills those values on any form that shares element IDs across your site.

A BETTER FORM – SPAM-LESS ROBOT-LESS FORMS ( Demo | Download )
A Better Form is a jQuery plugin I designed to help eliminate spam comments, spam emails and other automated form submissions.

Simple chained combobox ( Demo | Download )

Changing Form Input Styles on Focus with jQuery ( Demo | Download )
This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

Ajax Upload; A file upload script with progress-bar, drag-and-drop ( Demo | Download )
This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

Select Multiple Form Fields ( Demo | Download )

Masked Input Plugin ( Demo | Download )

Elastic – Make your textareas grow ( Demo | Download )
This jQuery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

jQuery “Highlight” Plugin ( Demo | Download )

Ajax Fancy Captcha ( Demo | Download )

File Style jQuery ( Demo | Download )
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Emblematiq Niceforms ( Demo | Download )
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!

Uploadify – a multiple file upload plugin for jQuery ( Demo | Download )
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Progress Bar ( Demo | Download )
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.

Uniform – Sexy forms with jQuery ( Demo | Download )
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

jQuery.uiSelect ( Demo | Download )

Autocomplete ( Demo | Download )
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

Useful jQuery Resources

• All About jQuery: Plugins, Tutorials and Resources
  A bunch of exciting and awesome jQuery plugins for your personal use.
• jQuery Techniques and Plugins
  40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites.
• Useful jQuery Plugins for Slideshows, Graphs and Text Effects
  35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.
• 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
  An overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
• Amazing and Fresh jQuery Plugins
  25 of the best newly (or, pretty close to new) released jQuery plugins.
• 40 Exceptional jQuery Interface Techniques and Tutorials
  Explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components.
• 40+ Excellent jQuery Tutorials
  Various jQuery Tutorials for your source of inspiration.
• 50 Useful JavaScript and jQuery Techniques and Plugins
  Useful JavaScript and jQuery techniques, plugins and tools that may help you improve the user experience for your site.

(ik)
]]> http://www.noupe.com/jquery/50-useful-jquery-plugins-to-enhance-your-forms.html/feed 24 http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html#comments Thu, 21 Jan 2010 14:23:10 +0000 Noupe http://www.noupe.com/?p=39319

  

  

By Louis Lazaris

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.

Two-Column vs. One

This decision will generally depend on the content of the form, but it’s often preferable to avoid a two-column layout if the form is fairly simple.

Below is a good example of a simple form that places each label above its related form element.

What are the benefits to this type of form layout, as opposed to a two-column form? First, the form labels have plenty of space to allow for future changes to the text inside them. A two-column form could be limited in this regard, and might require the entire form to be restructured if changes are made. Another benefit is that the form is not as cluttered looking, having plenty of whitespace in the label areas, so it’s easy to read and easy to associate the labels with the fields. Additionally, the background color given to each label/field pairing makes the form more visually inviting.

By contrast, look at the two-column form below:

Especially because of the left-aligned text and lack of color, this form doesn’t have the same clean, visual effect as the previous example. In fact, the vertical space between the labels and the fields is somewhat distracting, giving the sense of multiple entities, when in fact a simple form like this should visually be presented as one grouped entity.

It’s not impossible, however to achieve a clean, organized look with a two-column layout, as shown by the example below from Chapters Indigo Books:

So, although there are no definite rules for the general layout of your form, effective guidelines include avoiding a two-column layout for simple forms, and aligning the text labels right if a two-column layout is used.

Use Inline Form Validation

Recently Luke Wroblewski wrote about the effectiveness of inline form validation on A List Apart. To quote directly from that article:

Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation.

jQuery Inline Form Validation, Because Validation is a Mess is a step-by-step tutorial describing how to use jQuery to add inline validation to a lengthy form.

Really Easy Field Validation

Dexagogo provides a simple script that can be used to add inline validation to your forms. The demo example is not the prettiest, but of course it can be customized to suit your needs. The script uses Scriptaculous for the fade-in effect.

Group Related Fields

With a lengthy form, you’ll be limited as to what you can do to improve its usability, but grouping related fields together to divide the form into manageable visual components will make the form a little less intimidating. Thus, the form will be perceived to be easier to fill out, even though it will probably take about the same amount of time as a form that has no grouping of fields.

To group related fields, use <fieldset> and the optional <legend> element, as shown in the code below:

<form id="form" action="register.php" method="post">

	<fieldset>
		<legend>Basic Info</legend>
		<div>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name" />
		</div>
		<label for="password">Password:</label>
		<input type="text" name="password" id="password" />
		<div>
		<label for="password-confirm">Confirm Password:</label>
		<input type="text" name="password-confirm" id="password-confirm" />
		</div>
	</fieldset>

	<fieldset>
		<legend>Address</legend>
		<label for="address">Address:</label>
		<input type="text" name="address" id="address" />

		<label for="address2">Address (cont'd):</label>
		<input type="text" name="address2" id="address2" />

		<label for="zip">Zip/Postal:</label>
		<input type="text" name="zip" id="zip" />

		<label for="city">City:</label>
		<input type="text" name="city" id="city" />

		<label for="country">Country:</label>
		<input type="text" name="country" id="country" />

	</fieldset>

</form>

The <fieldset> element by default has a border, which can be changed, and is often removed in a CSS reset. Below is an example of a single form that is divided into two sections using <fieldset> and <legend> elements:

Cosmicsoda Registration Form

Unfortunately, the display of the border on the <fieldset> is not the same across all browsers, so it is usually best to disable the border in your stylesheet and create a custom border by some other means. This will also affect the look of the <legend> element, so it’s rare to see the use of these two elements nowadays. But the <fieldset> can still be used to group elements, and custom borders and headings can be included to provide the same basic effect. The <fieldset> and <legend> elements also have the added benefit of contributing to a form’s accessibility.

Clearly Indicate Required Fields

It’s common to indicate required fields by means of the asterisk symbol (*) in a different color than the rest of the text, so the required indicator stands out. Although most sites nowadays include this indicator, some still fail to use it properly.

The explanatory text that describes the purpose of the asterisk should be placed immediately above the form that is to be filled out, so the users see it before they begin filling it out. Some sites have used the asterisk character somewhat like a footnote indicator, placing the description of the asterisk below the form. The example below from the Elderluxe contact page demonstrates this poor placement of the the text that explains the meaning of the asterisk:

Elderluxe Contact Form

The example above has two problems: the asterisks are the same color as the rest of the text, and the explanation of the asterisk is near the bottom of the form. In many instances, asterisks alone would be enough, without any explanation, but if your target audience is not as computer-savvy, you will likely want to include at the top of the form a brief description of what the asterisk means.

The example below from Office Depot’s registration page demonstrates a properly-placed asterisk description:

Office Depot Registration Form

Although the example form above does have problems (left aligned text, small type, little use of whitespace), it clearly indicates required fields and explains the meaning of the asterisk before the user begins filling it out. This is especially important in this example, since the first three fields are not required, thus the user can safely skip them.

Fancier Checkboxes, Radio Buttons, and Select Elements

Forms can look awfully dull, especially since the styling of <select> elements, checkboxes, and radio buttons is limited in most browsers, and it is impossible to use CSS alone to style those elements to look exactly the same in every browser. Fortunately, there are a number of JavaScript library plugins and code that allow developers to include fancier, cross-browser form elements that degrade gracefully.

jQuery Checkbox allows you to insert custom checkboxes and radio buttons into your forms. I don’t particularly care for the look of the radio buttons in this case (they look nothing like radio buttons), but it’s one option to consider.

jQuery Image Combobox is a fully skinnable image-based replacement for the browser’s usually-ugly <select> element.

Giva Labs mcDropdown jQuery Plug-in is an intuitive, keyboard-accessible, easy-to-implement replacement for a typical <select> element that allows for nested data.

Display a Hint When a Field Gets Focus

Complex forms with many different fields can be easier for the user to fill out if some help text is given. Of course, you don’t want to overwhelm the user with one or more paragraphs of text above the form explaining what the fields are for.

As a simple alternative, you can write some JavaScript (or use a customizable plugin) that will display a custom tooltip-style message to explain form elements that might be confusing, or that require a certain type of input (for example, a username that only allows letters or numbers and must have at least 6 characters).

jQuery Input Floating Hint Box is a simple plugin that displays a fully-customizable floating hint when a field gets focus.

DHTML Goodies Form Field Tooltip is another variation of the form field helper text that displays the helper text based on what is entered in the form field’s title attribute.

Be Generous with Whitespace

As mentioned earlier, forms can look ugly and cluttered if the elements in the form are not displayed in a clean, usable manner. We generally think of the use of whitespace in our overall site design, but the same principle can be applied within a form, even down to the smallest details.

You can improve a form’s design by adding appropriate amounts of space around field elements, giving the elements themselves a larger and more usable size, and also allowing plenty of space inside text fields by using padding in your CSS. For example, try typing some text into the two fields below.

With just a small difference in size and padding, the second input field has a more usable feel. When multiple text fields appear in the same form, this can make quite a difference in how the overall experience is perceived, even though technically it might not make a whole lot of difference as far as how long it takes the user to fill it out.

It also helps to allow text fields to have plenty of visible characters. A name field especially should have plenty of space to allow for longer names. Overflow of characters will start pushing the text out of view, so it’s best to have enough space to accommodate longer names so that the user can more easily spot mistakes. The example field below demonstrates how a longer name would be cut off.

A text field that is similar in size to the ones in the previous example would be more appropriate and would allow for longer input to be entered without the risk of cutting anything off. The same principle would apply to a search box that may potentially receive long queries as input.

Make Your Forms Accessible

The topic of accessible forms could easily encompass an entire article and much more, but here are just a few tips to ensure your forms are more accessible and usable to a diverse audience.

• Use the title attribute for inputs, to assist those using screen readers
• If a label doesn’t wrap around the field it is associated with, use a for attribute that matches the accompanying field’s id
• Set a tab order using the tabindex attribute on each element
• For the tab order, increment the tab numbers by large amounts (e.g. “10, 20, 30…” instead of “1, 2, 3…”), to allow for later additions that don’t require rewriting all the tab indexes
• For radio buttons and checkboxes, put the label after the associated element so screen readers read the item first and the word “checkbox” or “radio button” second
• Use the <optgroup> tag to group <select> items
• Use the accesskey attribute on form elements, to allow keyboard access

Further Reading

• Creating Accessible Forms
• Beautiful Forms – Design, Style, & make it work with PHP & Ajax
• HTML Forms and Input on W3Schools
• 25 Web Form Optimization Tips
• Accessible Forms
• Web Form Design: Modern Solutions and Creative Ideas

]]>

  

by György Fekete

Comment forms are an essential part of our blogs, social networks and websites. Comment forms are our websites’ communication channel. Through these forms we get feedback on our content; therefore, it’s necessary to design them in such a way that they are easy to understand by our user base.

A good comment form should align with our website’s main design, but at the same time it should be interesting enough to encourage easy commenting. It must be usable and accessible if we want to capture all of our visitors’ feedback.

We searched for some examples and found original and creative ones. Below we present these examples along with a few guidelines that a designer should follow to make a great comment form.

Guidelines And Best Practices

Even a relatively simple-looking comment form can hide a very complex design behind it. There are many variables that a designer should take in consideration. The ones presented in this article are the most important and can be applied not just to comment forms but to Web forms in general.

1. Keep it simple

People don’t like filling in (yet more) comment forms, because there’s usually only one field that changes for them: the message text field. All of the other fields generally remain the same.

A good design should take this into consideration. When you design a comment form, make sure you don’t include text fields that are not necessary. For example asking users to write their country or phone number in a comment field is a mistake because it has no relevance to the form itself. The only purpose of a comment form is to get the user’s feedback and to communicate with the user.

The following comment form makes this mistake, although it does make it an optional text field.

Keeping the comment form simple enough reduces completion time, another essential attribute that a comment form should have.

Another good practice that contributes to reduced completion time is to top-align the form labels with their associated fields. This improves text scanning. Top-aligned labels should be used when a user is already familiar with the fields that need to be filled: for example, name, email address, etc.

A designer should use spacing and contrast when designing comment forms; these effects also improve text scanning. The following screenshot demonstrates this.

2. Give meaning to the form elements

A comment form stands in for the content author or website owner. Users are not robots; they’re human beings. When they post their comments, it’s like they are talking to the content author. People do not speak in keywords like “Comment” or “Feedback”; instead, they speak in gentler, more meaningful ways, like “Share your thoughts with us.” This is what a comment form should do: communicate its purpose in a meaningful way.

Instead of plain old titles such as “Comment here,” a designer should give meaningful, more natural-sounding titles like “Leave a comment” or “Add your opinion.”

Another example is when a user is asked to fill in his or her website address, but the label of the text field just says “URL.” There are users who are not familiar with this term, so a designer should also include a definition, the meaning of that expression.

3. Identify required fields

Not knowing which text fields are required and which are optional just increases confusion. A designer should clearly separate required fields from the rest by marking them.

Marking required fields with text (e.g. “required“) is good, but using the “*” character is often simpler and better because it’s widely used for this purpose and gives a visual representation of the text “required.”

4. Guide the user in filling the form

The primary goal of every comment form is successful completion by the user. Every comment form should have a solid design behind it that guides the user from start to finish. Every form has its own completion flow. Don’t break this flow.

Many users interact with comment forms by using the Tab key to switch from one text field to the next. A designer should implement proper HTML markup so that tabbing works as expected.

The form in the following screenshot breaks the completion flow. The mistake lies in the placement of the “Submit” button. It should be placed after the check box “Notify me of follow-up comments via e-mail.”

5. Minimize the pain

Every interaction with a comment form triggers complex actions in the user’s brain. Every text field can be considered a question that the author asks of the user. Knowing this, we should construct a comment form so that it “asks” easy, familiar “questions” first, such as “Name” and “Email address.”

It is a bad practice to place the message field first in the comment form, because this demands a more intense thought process of the user and it could result in the user not completing the form. Always place the more demanding fields at the end.

6. Validate on the fly and efficiently

Using AJAX to validate email addresses is essential and contributes to completion flow. If we were to use server-side validation, the page would have to refresh and the user wouldn’t get instant feedback about whether the fields were completed correctly.

Also keep in mind usability and AJAX’s obtrusive nature. A developer should emphasize unobtrusive, on-the-fly validation.

In some cases, it is not obvious at first that a text field requires validation, often resulting in poor usability. For example, it is a mistake to validate a “Name” text field to contain only alphabetical characters and nothing else, because then people with names such as “O’neil” are left out.

If a comment form’s text fields are constrained to a specified maximum character count, then the designer should indicate this next to the relevant field. Many comment forms use reverse counting, meaning they count down from the maximum allowed characters to let users know how many characters they have left to use.

7. Avoid CAPTCHAs if possible

CAPTCHA stands for “Completely Automated Public Turing test to tell Computers and Humans Apart.” The most widely used type of this is text embedded as an image to test verify whether a user is human or a spambot.

These kinds of tests should be avoided if possible. A more accessible solution is to use a third-party spam filter service, such as Akismet.

8. Don’t break habit

When designing your comment forms, always keep in mind the famous quote “Don’t try to reinvent the wheel.” There are many designs that have been tested and just work. Don’t try to come up with your own, because it will most likely fail.

You should align your design with traditional comment form designs, meaning you should include three, or at most four, fields, such as “Name,” “Email address,” “Website URL,” and “Message (Comment).”

9. Keep in mind localization

It is most likely that not only English-speaking users visit your website and comment on your content. Designers shouldn’t discriminate against these visitors; instead, they should keep in mind the peculiarities of different languages.

For example, in many European countries, names are written in reverse order, last name first and first name last. And many people, mostly in Arab cultures, have more than two names. If a designer includes only two fields, “First name” and “Last name,” then these people won’t be able to write their name completely.

A best practice is to simplify this type of text field and just include a “Name” field.

10. Do not use visual elements excessively

It’s true in many cases that an image is worth a thousand words, but it’s not a good motto to follow when designing comment forms.

A designer can use icons and other visual elements moderately but should keep in mind that different icon styles confuse visitors.

In the following screenshot, the icon in the third field does not entirely convey that the field should contain a website address; and not including a descriptive label next to each field can confuse users even more.

Comment Form Showcase

AisleOne.net

iso50.com

cssVault.com

daily.creattica.com

designsojourn.com

elitistsnob.com

hicksdesign.co.uk

ideas.veer.com

inspiredology.com

lucyblackmore.co.uk

typeneu.com

underconsideration.com

wilsonminer.com

About the author

György Fekete is a Web developer with five years of experience in Web design and development. He is the founder of Primal Skill Ltd., an established Romanian Web design and development studio. He also blogs about Web design, development, business and startups at blog.primalskill.com. (al)

  

This article is the second part in a three part series. In the first part we created some basic functionality to allow the user to post messages in a similar way to Twitter. If you have not completed the first part of this tutorial, please do so now.

In this instalment, we will learn how to add some basic user authentication using a useful plugin called nifty_generators. So lets get started!

• The first part of this tutorial: A Simple Twitter App with Ruby on Rails – Messages With Ajax
• The third part of this tutorial: A Simple Twitter App with Ruby on Rails – Building Friendships

Get the Gem!

The nifty_generators gem was created by Ryan Bates, better known for his great RailsCast tutorials. It provides a useful generator for setting up user authentication in a few simple steps.

It’s worth noting that there are other tools for integrating authentication, for instance technoweenie’s Restful Authentication is very good. However, to keep things simple, we will stick with nifty_generators.

At a command prompt key the following command:-

  > gem install nifty-generators

Generating the Authentication

Now, make sure your current directory is set to the project folder of your Rails project and run the following commands:-

  > ruby script/generate nifty_authentication
  > ruby script/generate nifty_layout

The first command creates the relevant files for achieving authentication. The second command creates, among other things, a helper file which is required for some of the authentication view files to function correctly.

Don’t forget to migrate your database!

  > rake db:migrate

Making use of the Authentication Module

Ok, so we now have the functionality, which is required for authenticating users, it’s just a matter of using it. First, we will create a partial allowing the user to sign up or login.

Create a file called “_login.html.erb” in the views/users folder and add the following code:

< % if logged_in? %>
  Welcome < %= current_user.username %>! Not you?
  < %= link_to "Log out", logout_path %>
< % else %>
  < %= link_to "Sign up", signup_path %> or
  < %= link_to "log in", login_path %>.

< % end %>

We will simply render the login partial in the “posts.html.erb” layout file (to keep things simple). This file is located in the views/layouts folder. Edit the file to include the “render” method call, as shown below.

.
.
<body>
  <div id="content">
    <p><%= render :partial => "users/login" %></p>

    <%= yield %>
  </div>
</body>
.
.

Further to this, we only want users to be able to post messages if they are logged in so change the “_message_form.html.erb” file, in the views/posts folder, to have the following condition:

<% if logged_in? %>

  <% form_remote_tag(:controller => "posts", :action => "create") do %>
    <%= label_tag(:message, "What are you doing?") %><br />
    <%= text_area_tag(:message, nil, :size => "60x2") %><br />
    <%= submit_tag("Update") %>

  <% end %>
<% end %>

Let’s Give it a Go!

Fire up the server.

  > ruby script/server

On the home page we now have “Sign up” and “Login” links.

You’ll also notice that you cannot post a message until you have a user account. So you will need to sign up first

Then you can login…

Once you have logged in, you will be able to post messages again.

View Demo of Twitter App with Ruby on Rails

Summary

In this tutorial, you have leanrt how to integrate authentication into your applications and how to make use of it. In the third and final part of this series you will learn how to add functionality, which allows users to follow other users.

Author: Phil McClure

Phil McClure is a Software Developer from Belfast, Northern Ireland. His main interests are software architecture, design patterns and how these can be applied to web development. Phil blogs at Therailworld. Follow him on Twitter.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

  

When you combine some neat functionality courtesy of PHP with the cleverness of javascript you can produce some pretty smart results using the <form> tag. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move.

The post below is made up of 10 smart and intelligent ways of using <form> elements to produce some neat effects, components and plugins, they are all of the highest quality and more or less easy to configure. Give them a try.

1. Creating a Dynamic Poll with jQuery and PHP

In this tutorial you will learn how to create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

<div id="poll-container">
    <h3>Poll</h3>
    <form id='poll' action="poll.php" method="post" accept-charset="utf-8">
        <p>Pick your favorite Javascript framework:</p>
        <p><input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'>&nbsp;jQuery</label><br />
        <input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'>&nbsp;Ext JS</label><br />
        <input type="radio" name="poll" value="opt6" id="opt6" /><label for='opt6'>&nbsp;mootools</label><br /><br />
        <input type="submit" value="Vote &rarr;" /></p>
    </form>
</div>

This form will be processed by the PHP for now, and when we get the Javascript running, by jQuery. The PHP and Javascript are designed to pull the option ID from the value tag.

Check out the demo

2. FancyUpload – Swiff meets Ajax (v3.0)

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all.

<form action="../script.php" method="post" enctype="multipart/form-data" id="form-demo">
 	<fieldset id="demo-fallback">
		<legend>File Upload</legend>
		<p>
			This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
			If this part is not changed, something must be wrong with your code.
		</p>
		<label for="demo-photoupload">
			Upload a Photo:
			<input type="file" name="Filedata" />
		</label>
	</fieldset>

Check out the demo

3. Fancy Capatcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from boys and spammers in a new, intuitive way of completing “verify humanity” tasks. In order to do that users are asked to drag and drop specified item into a circle.

The code calls captcha.php file and gets a random number. Php file just generates simple number and put it in session. When AJAX got that number it creates items based on that number. Lets imagine that we have array of “pencil”, “scissors”, “clock”, “heart”, “note”, so if number 3 is returned it will take “heart” and look for item-heart.png file in /imgs directory.

Check out the demo

4. TextboxList

TextboxList turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a “list” of items that can be easily deleted. It comes with an Autocomplete plugin.

Check out the demo

5. jQuery UI Slider from a Select Element

The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual users and those on assistive technologies.

Check out the demo

6. jQuery Password Strength Meter

Password Strength Meter is a jQuery plug-in that provides a smart algorithm that shows the strength of the input.

Check out the demo

7. jQuery Keypad

A jQuery plugin that attaches a popup keyboard to a text field for mouse-driven entry or adds an inline keypad in a division or span. It can display the letters/numbers randomized which is a very effective security solution against key loggers.

Check out the demo

8. jquery.timepickr

jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible. Using it is so simple, you just need to call the timepickr function with the id of the form.

$(function(){
    $('#test-1').timepickr({
        handle: '#trigger-test'
        convention: 12 });
});

Check out the demo

9. Spellify

Spellify is a script.aculo.us based spell checker, for form fields that utilizes Google as its spell check engine. PHP 4+ with CURL library installed, script.aculo.us and Prototype JavaScript Framework.

Check out the demo

10. Create a shoutbox using PHP and AJAX

Learn how to create a dynamic ajax based shoutbox with jQuery from scratch. It will be very interesting to know how to use the ajax function of jQuery and how it can be used to insert and recover data from a MySQL database via PHP in a way asynchronous.

Check out the demo