Thursday, April 16, 2009

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; ?>

13 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!