Django - The Easy Way Django - The Easy Way
Samuli Natri 2012.05.16
Samuli Natri has been a software developer since the 90's. He enjoys building web applications and games. He attended Helsinki University Of Technology (Computer Science) and Helsinki University (Social Sciences).

Drupal 7 - How To Customize User Login Form

Tutorial on how to override and alter user login form.

Overriding the template

Move the User login block in the sidebar in /#overlay=admin/structure/block:

Go to your webpage and copy the html of the login form with firebug or similar (right-click form element).

Create a file themes/bartik/templates/block--user--login.tpl.php and paste the copied markup inside the login template.

Now you can edit the template the way you want (Keep the basic info unchanged though, like form post method, action and input name attributes).

Save the file and flush caches for changes to show up.


Here's an example of custom user login form with minor changes to original:

<form accept-charset="UTF-8" id="user-login-form" method="post" action="/node?destination=node">
  <div class="custom-form">
    <div class="form-item form-type-textfield form-item-name">
      <label for="edit-name">Username <span title="This field is required." class="form-required">*</span></label>
      <input type="text" class="form-text required" maxlength="60" size="15" value="" name="name" id="edit-name">
    <div class="form-item form-type-password form-item-pass">
      <label for="edit-pass">Password <span title="This field is required." class="form-required">*</span></label>
      <input type="password" class="form-text required" maxlength="60" size="15" name="pass" id="edit-pass">
    <div id="edit-actions" class="form-actions form-wrapper">
      <input type="submit" class="form-submit" value="Log in" name="op" id="edit-submit">
    <div class="item-list">
        <li class="first"><a title="Create a new user account." href="/user/register">Create new account</a></li>
        <li class="last"><a title="Request new password via e-mail." href="/user/password">Request new password</a></li>
    <input type="hidden" value="<?php print $elements['form_build_id']['#value']; ?> " name="form_build_id">
    <input type="hidden" value="user_login_block" name="form_id">

Notice that I print the form_build_id from the $elements array. You can see all available variables by putting this in your block--user--login.tpl.php:


Overriding specific elements

If you don't want to replace the whole template, you can override the elements in template.php. Use hook_form_alter hook to alter the form:

function bartik_form_alter(&$form, &$form_state, $form_id) {
  if ($form['#id'] == 'user-login-form') {
    $form['name']['#title'] = t("Custom title");
    $form['actions']['submit']['#value'] = t("Hit this to login!");

Use this to see available form elements (requires the Devel module):


Now you can have something like this: