Customising the login form

description

These snippets allow you to override the default login layout using a custom user_login.tpl.php.

If you want to customise the full page layout, click through to the Customising the login, registration and request password full page layout handbook page.

Step 1 of 2

In a text editor like notepad.exe, create a file called template.php using the the following snippet. If you already have a template.php file, simply add it to your existing one.

<?php
/**
   * This snippet catches the default login form and looks for an
   * user_login.tpl.php file in the theme folder
   */

function phptemplate_user_login($form) {
    return
_phptemplate_callback('user_login', array('form' => $form));
}
?>

Step 2 of 2

  1. In a text editor paste the following snippet into your user_login.tpl.php file
  2. Edit the style sheet classes and content to suit
  3. Upload your edited user_login.tpl.php to your active theme folder

For use with Drupal 4.7.x

<div class="login_form"><p>Extra login instructions can go here, just above the Login form</p>
<?php
   
print form_render($form); // this displays the login form.
?>

<p>Extra login instructions can go here, just below the Login form</p>
</div>

For use with Drupal 5.x

<div class="login_form"><p>Extra login instructions can go here, just above the Login form</p>
<?php
   
print drupal_render($form); // this displays the login form.
?>

<p>Extra login instructions can go here, just below the Login form</p>
</div>

Style sheet reference

For controlling how your login form looks using your style sheet, this is what the rendered login form HTML and class names are by default:

<div class="form-item">
<label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>
<input type="text" maxlength="60" name="name" id="edit-name"  size="30" value="" tabindex="1" class="form-text required" />
<div class="description">enter your username</div>
</div>
<div class="form-item">
<label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
<input type="password" name="pass" id="edit-pass"  size="40"  tabindex="2" class="form-text required" />
<div class="description">enter your password</div>
</div>
<input type="hidden" name="form_id" id="edit-user-login" value="user_login"  />
<input type="submit" name="op" id="edit-submit" value="Log in"  tabindex="3" class="form-submit" />
<p><a class="textlink" href="?q=user/password">Forgotten your Password?</a></p>

notes

  • Click through for a more advanced login form override
  • Recommended reading for more information and an explanation of how the snippets work: Dominating the User Login Form at Nick Lewis' blog
  • If you have an even more advanced snippet that has been tested, please add a child page to this handbook page
  • This snippet was tested with Drupal 5.x (June 24th 2007) by Dublin Drupaller (Note: If you have the locale.module enabled you may need to refresh your search_index by editing any text string related to the user page before your changes take effect, such as 'password'. )
 
 

Drupal is a registered trademark of Dries Buytaert.