De-Drupalizing The Login Form

If you want to figure out if a site runs on Drupal, it is a 99.99% probability that by taking a look at the /user page, Drupal—formerly laden with tabs and a form set in stone, hidden behind dark, developer magic—will reveal itself in all its glory.

The ability to modify forms was once a task only possible from a module; that really set some limitations for what themes could do in Drupal 6. In Drupal 7 the power to modify forms the same way as modules has been bumped down to the theme layer, and for that we sure are pleased: Let us now put this newfound power to good use and deDrupalize the login form.

Here is the battle plan:

• Remove the tabs from the login page and insert them where they would make sense in a login form.
• Use icons instead of the long username/password descriptions and still make it accessible. (Use HTML5 to add placeholders to the forms fields.)
• Hide the helper text until the user activates the field—with a little advanced css selector magic.
• Make it all easily reusable for other forms by putting it all in a class, and inject that class with the preprocessor.
• Change the title for the user pages so they make sense.

template.php is your backstage pass to awesomeness.

The template.php file in your theme will be the place where all the fun is going to happen -- yes, it is code, and a little bit dangerous.

Lets start slowly, fix the titles, and, because we're not going to use them anymore, remove the tabs on the user login, password request, and register page.

Fix the Titles

With the power of the API let’s fiddle with the title and get it to make sense for the user:

THEMENAME_preprocess_page(){
    /*-
      USER ACCOUNT     
      Removes the tabs from user  login, register & password
      Also fixes page titles
    */
    switch (current_path()) {
      case 'user':
        $vars[title] = t('Login');
        unset($vars[tabs]);
        break;
      case 'user/register':
        $vars[title] = t('New account');
        unset($vars[tabs]); 
        break;
      case 'user/password':
        $vars[title] = t('DOH! I forgot my password');
        unset($vars[tabs]);
        break;
 
      default:
        # code...
        break;
    }

This code is simple: check on the page for the path if the path is one of our three user pages.

      case 'user/password':  <- this is the path
        $vars[title] = t('DOH! I forgot my password'); <- fix title
        unset($vars[tabs]); <- remove the tabs
        break;

Links in the Form

Before the form API came into the theme layer, doing this would require obscure css—which would turn your hair gray. Fortunately, this is now a simple task—inserting it somewhere into some markup might seem lots simpler, but that’s not how Drupal works.

function THEMENAME_form_user_login_alter(
&$form, &$form_state, $form_id) {
// add a <b><href=”login-register”>.... before the name
  $form['name']['#prefix'] =  
'<b>' . l(t('Register a new account'), 'user/register', array('attributes' => array('class' => 'login-register', 'title' => t('Create a new user account')))) . '</b>';
//place forgotten password link after the password field  
  $form['pass']['#suffix'] = '<b>' . l(t('Forgot password?'), 'user/password', array('attributes' => array('class' => 'login-password', 'title' => t('Get a new password')))) . '</b>'; 
}

The idea is, we are looking for the two form fields we want to add the links to (name and password).

HTML5 Power Input, Placeholders, and Visual Goodies

In HTML5 we can add helper text inside form fields as a placeholder. This opens up new design possibilities, and there is no need to add JS or perform secret background tricks. (Learn more in the article Drupal 7, Meet 2012's HTML.)

function THEMENAME_textfield($variables) {
....
  //add placeholder
  if (!empty($element['#title']) {
      $element['#attributes']['placeholder'] = $element['#title'];
   }
….
}

The text field in the forms will now be added to the placeholder attribute so it will print out as:

<input placeholder=”whatever”>

When the label value is added to the placeholder, we can make the form more user-friendly by adding icons instead of lengthy text descriptions,
removing the labels, and placing the icons into the form fields.

CSS:

label{
  display:inline-block;
  text-indent:-999em;
  width:0
}

Labels are now invisible but still accessible for screen readers.

.oldiecrapbrowser label{
  text-indent:0em;
  width:auto;
}

To add icons:

  #edit-name, .username{
    background: #fff url(../icon/user.png) no-repeat  5px center;
  }
  input[type="password"]{ 
    background: #fff url(../icon/key.png) no-repeat  5px center;
  }
  input[type="email"], input[name="conf_mail"]{
    background: #fff url(../icon/email.png) no-repeat  5px center;
  }

Tooltip CSS

div.description{
… hide position absolute -xxxx
}
input:focus ~ div.description{
//activate the description field when the input field is in focus - nifty!
}

Add Tooltips to the forms.
Instead of filling up our css with repeating classes, we can add this .tooltip class to the forms that need this.

### inject the tooltip class into the forms
function THEMENAME_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == "user_login"){  //<- check for the login form 
    $form['#attributes']['class'] = "tooltip"; // add a class to the form
  }
  elseif ($form_id == "user_register_form") {
    $form['#attributes']['class'] = "tooltip";
  }
  elseif ($form_id == "user_pass") {
    $form['#attributes']['class'] = "tooltip";
  }
  elseif ($form_id == "user_login_block") {
  $form['#attributes']['class'] = "tooltip";    
  }
}

We now have a completely redesigned form based on the most powerful Drupal APIs there are.

The complete example code can be found at: https://github.com/mortendk/De-Drupalizing-the-Login-Form

The mothership Theme that is dedicated to simplifying & cleaning up Drupal's markup to a modern standard, comes with the de drupalized login form in its goodie bag.