Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

De-Drupalizing The Login Form

Parent Feed: 

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.

Login form before our changesHere 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'];
   }.
}

Login form after our changesThe 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 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.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web