Just a simple front-end technique I thought to be worth sharing:

Form fields can usually do with some more information on what you are supposed to fill in. Examples include valid user name rules, desired date/time format.

The problem

On one hand, you want your users to know what they’re supposed to do, as confusing your visitors easily leads to a dramatically decreased conversion rate. On the other hand, you want your forms to look clean and minimal, so your visitors are not bombarded with information. If you show information by every field on your form, it quickly gets cluttered, and that’s exactly what we want to avoid.

The solution

Hide the elements containing the help text until they are needed. When a user focuses on a field, the relevant information shows up. This may sound like something you would solve with the onfocus and onblur events, but you can actually accomplish it with CSS.

Assuming you have an element with an info class right after the input element, you just use the :focus pseudo-selector in an adjacent sibling selector.

Example

For the example, I’ve come up with a simple sign-up form:

<form action="/user/signup" method="post">
    <fieldset>
        <div>
            <label for="form_username">Username</label>
            <input type="text" id="form_username" name="username">
            <div class="info">A valid username consists of letters (a-z) and/or numbers (0-9).</div>
        </div>
        <div>
            <label for="form_email">Email</label>
            <input type="text" id ="form_email" name="email">
            <div class="info">We will send you an email to validate your account.</div>
        </div>
        <div>
            <label for="form_password">Password</label>
            <input type="password" id ="form_password" name="password">
            <div class="info">Your password should be at least 6 characters long.</div>
        </div>
        <div>
            <label for="form_passwordretype">Repeat Password</label>
            <input type="password" id ="form_passwordretype" name="passwordretype">
            <div class="info">Please repeat your password to ensure you haven't made any mistakes.</div>
        </div>
    </fieldset>
</form>

To which we add this little bit of CSS that makes it all work:

div.info {
    display: none;
    /* Make sure the info element is initially hidden */
    color: #777;
    font-size: 12px;
    margin: 2px 0;
    text-indent: 1em;
}

input:focus + div.info {
    /* This selector selects the div.info that comes right after
       the focused input */
    display:block;
   /* Make the element visible */
}

With some minor CSS additions that gets you this (Try clicking the input fields or tab through them)

(View on JsFiddle)

Now get creative!

The example shown above is the most basic form of this technique. With some fancy CSS positioning, you could use a sidebar to display the info of the currently focused input, and that’s just one idea.

I hope this can help some folks create more attractive forms. Be sure to show me your implementations of this technique, and as always, if you have any questions, don’t hesitate to ask.