Disabling / Graying Out a Section of a Form

There may be certain cases in which you want to disable a section of a form yet you still want your users to know it’s there. For example if certain options in the form are only available to paid members but not for users of the free product. Graying out those options for non-paying members can serve as an incentive to encourage them to subscribe to your paid service. (Be sure to include some extra text explaining why the options are grayed out along with a subscription link.)

Basic Steps
(Ideally you would accomplish these using JavaScript or another language instead of hard-coding everything)

  1. Add a classname such as “disabled” to the containing fieldset or div of the section you wish to disable. (Or if you only wish to disable one or a few scattered elements add the classname to those individual elements.) Use this classname to style the grayed out section.
  2. Add the attribute disabled=”disabled” to each form element, e.g. inputs, select tags, textareas, radio buttons or checkboxes.
  3. Add an extra paragraph containing text with an explanation and a link to more information or to a subscription form.

Ideas for Styling

If you are disabling a whole section such as a fieldset or applying styles to a div containing the form elements you could add a special background color, special text colors or borders (gray shades would be appropriate).

Another simple elegant way to style your grayed out elements would be to turn them partially transparent:.

CSS:

.disabled
{filter: alpha(opacity=60);
-moz-opacity: .60;
opacity: .60;}

Advertisements
Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s