2009-04-16

Theming the Drupal 6 User Login Form

There are a great deal of articles out there on theming the Drupal User Login Form, but most don't give you granular control over each individual form element. Rather, you are restricted to mainly editing the css. Here is a way to have complete granular control over each element within the user login form... 1. Place this function either in a module or in your template.php:
function get_user_login_form() {
  $form_id = 'user_login';
  $form = array();
  $form['name'] = array(
    '#type' => 'textfield',
    '#maxlength' => USERNAME_MAX_LENGTH,
    '#required' => TRUE,
    '#attributes' => array('tabindex' => '1'),
  );
  $form['pass'] = array(
    '#type' => 'password',
    '#required' => TRUE,
    '#attributes' => array('tabindex' => '2'),
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Log in'),
    '#weight' => 2,
    '#attributes' => array('tabindex' => '3')
  );
  $form['#validate'] = user_login_default_validators();
  $form['#build_id'] = sprintf('form-%s', md5(uniqid(mt_rand(), TRUE)));
  $form_state = array();
  drupal_prepare_form($form_id, $form, $form_state);
  drupal_process_form($form_id, $form, $form_state);
  $out = new stdClass;
  $out->form_start =
    sprintf("<form method='post' accept-charset='UTF-8' action='%s'>",
    url('user/login'));
  $out->form_end = "</form>";
  $out->name = drupal_render($form['name']);
  $out->pass = drupal_render($form['pass']);
  $out->submit =
    drupal_render($form['form_id']) .
    drupal_render($form['form_build_id']) .
    drupal_render($form['submit']);
  return $out;
}
2. In your .tpl.php file, output the fields
<?php
  $login_form = get_user_login_form(); 
?>
<?php print $login_form->form_start; ?>
  Username: <?php print $login_form->name; ?><br />
  Password: <?php print $login_form->pass; ?><br />
  <?php print $login_form->submit; ?>
<?php print $login_form->form_end; ?>

22 comments:

Cauly said...

Fatal error: Call to undefined function sprint() in C:\AppServ\www\po\sites\all\themes\ad_the-morning-after\template.php on line 24

Line 24:
$form['#build_id'] = sprint('form-%s', md5(uniqid(mt_rand(), TRUE)));

Brendon said...

Cauly,

Thanks. I have fixed this now.

Lektum said...

Thanks a lot but it doesn't work for me, maybe I misunderstood something. In which .tpl.php file your code of step 2 is to be pasted ? I pasted it in a user_login.tpl.php file, is that correct ?

Aaron said...

I'm fairly new to Drupal and have been unable to create a customizable login form for Drupal 6.x. Just for the sake of clarity, which .tpl.php file does the second step refer to?

Thanks.

Anonymous said...

First off all thank you for helping me alot in my drupal form !

I have a problem. How can this form can be customized to include the login welcome message from: http://drupal.org/node/92657

Here is the code:


function garland_user_bar() {
global $user;
$output = '';

if (!$user->uid) {
$output .= drupal_get_form('user_login_block');
}
else {
$output .= t('< p class= "user-info">Hi !user, welcome back.< /p >', array('!user' => theme('username', $user)));

$output .= theme('item_list', array(
l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
l(t('Sign out'), 'logout')));
}

$output = '< div id= "user-bar">'.$output.'< /div>';

return $output;
}


I know that the destionation for form must be like this:
$output .= drupal_get_form('get_user_login_form');

I dont know how to concatenate this into your form ! Thank you very much

Евгений said...

it does not change anything as for me. Can you tell me what can be the reason ?

Acuity GmbH said...

Thanks, works fine.
But how can I output the "forgot password" link?

jil said...

i have also experience that trouble one time when i havent noticed the one single code missing when i have typed it thats why i have search everywhere on any side of the search engine luckily i found it on drupal video tutorial and that'show i found whats missing

Miss Lynx said...

I tried this method, and while I was able to get the intro text I wanted to show up before the login form, I ran into a couple of other problems.

The main factor causing them seems to be that Drupal doesn't recognize the output of this technique as being the "real" user login form, so things that should appear in that, like the links to create a new account or retrieve a login, or the "Remember Me" checkbox added by the Persistent Login module, don't show up in it.

It may be the fault of how I implemented it - the instructions said to place the second code snippet "In your .tpl.php file", which appears to be missing a filename. :-) I had already, before trying this method, tried a whole bunch that involved creating additional .tpl.php files with names like user_login.tpl.php, user_login_block.tpl.php, etc., and could not for the life of me get any of them to show up. And I can't just add it to page.tpl.php, because there's no way to get it to take its proper place in the left sidebar where the block is supposed to appear when the content of the left sidebar is just given as $left.

So I ended up creating a custom block for it. Maybe that caused the problem? Is there somewhere I could have put the code snippet which would have caused Drupal to treat it as the actual login block and include the appropriate elements?

Anonymous said...

Hi Brendon!
Thank you very much for this snippet.
It works good on my website, just few questions...
- How could i change the color of the textfield? I tried to add a '#class' in template.php but it did not work...
- There is a big space between "username:" and the textfield (between password and the textfield as well)...how could we correct this?
Thank you very much
Matt

Golkonda said...

I'm having a hard time getting this to work. So I copied the code for the template.php exactly and I obviously changed the maxlength for username.

I also copied the tpl code to both user-login.tpl.php and user_login.tpl.php. But it still doesn't seem to work. What should I do?

Checker said...

Nice, it showed up on my site, positioned and themed it, but loggin in doesnt work..

Shawn said...

For Drupal 6 users have a look at:

http://drupal.org/node/478328

One of the few solutions I found that works straight out the box!

Ken Thomas said...

^^ @Shawn, this solution is for D6 and WORKS. The solution you point to is not a very "Drupal Way," though this solution has it's issues.

However, all solutions (written up) that I've seen so far (form overrides) do not consistently validate. This method validates and submits, allowing login.

SEO Web developer UK said...

How can you add register link here

Anonymous said...

Works for me in Drupal 6. Thanks

Anonymous said...

an old post, but looks like the .tpl.php question is still not responded.

so here it is:
block-user-0.tpl.php

Vincent said...

nice article... but how can i completely control(customize) the html tag output? and also how to include the "Create new account" and "Request new password" links with this code?


thanks

vic

Liam McDermott said...

Hope you don't mind me spamming a link, but I've just finished an article that covers a similar topic for Drupal 7.

It's called Get more sign-ups from Drupal 7: make ‘Create new account’ eye catching but also covers some general theming stuff.

Hopefully this is useful to someone!

Anonymous said...

Hey, this script does not print a error message or a succes message can u help about this matter?
thanks!

Anonymous said...

It's doesnt work because error message is not showing in my custom template but i'm redirect to the default login page to show the error message when user with bad login/ pass

Have you found a way to bypass this litte issue *

Thank you

Flex Sin said...

This is really a nice post and I think that the popularity of drupal is increasing day by day. drupal