Custom Login Pages & Forms

Let's revisit Drupal arguments to extend page layouts for our newly customized login/registration form. Assuming the login page you want is different than the rest, say a one column layout with custom blocks that are not found on any other page. If you just want the custom login forms, skip step 1.

Step 1 - Setting up custom pages

The following snippit will cover the following arguments:

user
user/login
user/register
user/password

<?php
    if ( arg(0) == 'user'&& ( arg(1) == '' || arg(1) == 'login' || arg(1) == 'register' || arg(1) == 'password' ) ){
 
    //custom one column page layout
    //with blocks not associated with any other pages.
    include 'page-no_column.tpl.php';
    return;
    } 
?>

Step 2 - Preparing template.php

Next, before preparing the template.php, we first need to understand what it is we are modifying. The image below is the Drupal's html output when rendering the login form, along with its related display output.

Rendered HTML output:

HTML code

  <form action="/user" accept-charset="UTF-8" method="post" id="user-login">
    <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="60" value="" tabindex="1" class="form-text required" />
      <div class="description">Enter your zQlab 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="60" tabindex="2" class="form-text required" />
      <div class="description">Enter the password that accompanies your username.</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" />
  </form>

Drupal form variables:

<?php
//Username field 
  $form['name']['#type'] = 'textfield';
  $form['name']['#name'] = 'name';
  $form['name']['#id'] = 'edit-name';
  $form['name']['#class'] = 'form-text required';
  $form['name']['#size'] = 60;
  $form['name']['#description'] = 'Enter your @s username';
  $form['name']['#title'] = t('Username');
  $form['name']['#tabindex'] = 1; 
 
//Password field
  $form['pass']['#type'] = 'password';
  $form['pass']['#name'] = 'pass';
  $form['pass']['#id'] = 'edit-pass';
  $form['pass']['#class'] = 'form-text required';
  $form['pass']['#size'] = 60;
  $form['pass']['#description'] = t('Enter the password that accompanies your username.');
  $form['pass']['#title'] = t('Password');
  $form['pass']['#tabindex'] = 2; 
 
//Submit field
  $form['submit']['#type'] = 'submit';
  $form['submit']['#id'] = 'edit-submit';
  $form['submit']['#name'] = 'op';
  $form['submit']['#class'] = 'form-submit'
  $form['submit']['#size'] = 60;
  $form['submit']['#value'] = 'Log in';
  $form['submit']['#tabindex'] = 3;
 
//Email field (for registering)
  $form['mail']['#type'] = 'text';
  $form['mail']['#name'] = 'mail';
  $form['mail']['#id'] = 'edit-mail';
  $form['mail']['#class'] = 'form-text required';
  $form['mail']['#size'] = 60;
  $form['mail']['#description'] = t('A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail..');
  $form['mail']['#title'] = t('E-mail address');
?>

With all the tools in hand, in template.php, you call the function phptemplate_user_login(). In the function, add or modify the form variables (above examples). If one is left out, that form variable will display the default. So if you want to not display a description below the username field, you have to tell drupal not to by using single quotes.

Template.php - For User Login

function phptemplate_user_login($form) {
  //Do not display descriptions for username or password fields
  $form['pass']['#description'] = '';
  $form['name']['#description'] = '';
  return _phptemplate_callback('user_login', array('form' => $form));
}

Template.php - For User Register

function phptemplate_user_register($form) {
  $form['mail']['#description'] = '';
  $form['mail']['#size'] = 30; 
  // change the size of the email form box       
  return _phptemplate_callback('user_register', array('form' => $form));     
}

Template.php - Finalizing and prevent drupal from breaking

function _phptemplate_variables($hook, $variables = array()) {
  global $user;
  switch($hook) {
    case 'page' :
      if (arg(0) != "user" && $user->uid == "0") {     
        $variables['user_login'] = user_login($msg = '');     
      }
    break;     
  }     
return $variables;
}

Step 3 - Create the login page

The phptemplate_callback will return a custom page with its custom form variables. Drupal will expect the following PHP pages within your theme directory:

user_login.tpl.php
user_register.tpl.php

Within these files is the layout of your form. You can add CSS divisors here. The minimal content requirement for these pages is:

drupal_render($form['name'])
drupal_render($form['pass'])
drupal_render($form)

Otherwise, your login section will be blank without the above functions. There is no need to add the FORM fields, as drupal will handle that. Also, order does not matter, you may place the drupal_render() functions anywhere within the user_login.tpl.php. A run of the mill user_login.tpl.php would look like this.

<div class="registered-users"?
  <div class="content">
    <h4>Registered Customers</h4>
    <p>If you have an account with us, please log in,</p>
   <?php
    global $user;
    if ($user->uid) {
      drupal_goto('user/'.$user->uid); //send to users profile page
    }
    print drupal_render($form['name']);
    print drupal_render($form['pass']);
    ?>
    <div class="required">* Required Fields</div>
  </div>
  <div class="button-set">
    <span class="right"><?php print drupal_render($form); ?> </span>
    <a href="<?php print base_path(); ?>user/password" class="left">Forgot Your Password?</a>
  </div>
</div>

Supporting template.php

function phptemplate_user_login($form) {
  $form['name']['#description'] = '';
  $form['name']['#size'] = '30';
 
  $form['pass']['#description'] = '';
  $form['pass']['#size'] = '30';
 
  $form['submit']['#id'] = 'send2';
  $form['submit']['#name'] = 'send';
  $form['submit']['#class'] = 'form-button';
  $form['submit']['#value'] = 'Log in'; //change the login button text
 
  return _phptemplate_callback('user_login', array('form' => $form));
}

The display output of user_login.tpl.php...

References: Drupal 5.x API ( http://api.drupal.org/api/function/user_login/5 )

Also in the lab...

Drupal.org

Custom Login Pages & Forms

Step 1 - Setting up custom pages

Step 2 - Preparing template.php

Step 3 - Create the login page

Syndicate