Theming the User Registration Form in Drupal 6

When you are building an online community, one of your important jobs is to remove obstacles for users to sign up to create accounts. Drupal's user registration form, out of the box, is one of the simplest forms out there, and maybe that is why it is also one of the easiest things to overlook when building a site. By the time profile fields are added in, captchas are placed on the page, and other components have had their way with the fields that become part of it, the form can get rather messy and detract from the user experience.

Fortunately, changing the way the user registration form looks is pretty easy. Modifying forms is something that Drupal 6 has made a lot simpler with advances in the forms api and the theming system. Instead of needing to create a custom module and modify the form at a structural level, developers can implement changes directly within their themes that allow them to author the display of forms using standard CSS and HTML markup. This moves the work of changing the look and feel of a site from aesthetically challenged developers squarely to the realm of designers, where it belongs.

Step One: Tell Drupal What Template to Use

There are 2 steps you need to take to implement a better looking user registration page within your Drupal site - create a template file, used to display the contents of the form, and make some small changes to template.php within your theme file to tell Drupal which template to use. We will look changes to template.php first, you will be modifying a function called 'themename_theme' (substitute the name of your theme for 'themename' in that statement). If this function is not already there, create it using the example below. Here, we are passing on the name of the template file for the user registration form, and calling it 'user-register'. You can feel free to use any name you wish for the template file.

<?php
function themename_theme($existing, $type, $theme, $path) {
  return array(
    ...
   
// tell Drupal what template to use for the user register form
   
'user_register' => array(
     
'arguments' => array('form' => NULL),
     
'template' => 'user-register', // this is the name of the template
   
),
    ...
  );
}
?>

After that is done, reset the registry by clearing cached data at the bottom of the Administer > Performance page.

Step Two: Build Your Template

The next step is you will want to create the template for the user registration form itself. In your theme directory, create a filed called user-register.tpl.php. Notice how the name exactly corresponds to the name we used in the code for template.php. If your form is not displaying properly, there is a good chance it is because there is a mispelling in one of these places. The following example shows you how to create some basic template code that will display the username and password fields, along with the submit button. Within user-register.tpl.php, paste the following code:

<div id="registration_form">
  <div class="field">
    <?php
     
print drupal_render($form['account']['name']); // prints the username field
   
?>

  </div>
  <div class="field">
    <?php
     
print drupal_render($form['account']['pass']); // print the password field
   
?>

  </div>
  <div class="field">
    <?php
       
print drupal_render($form['submit']); // print the submit button
     
?>

    </div>
  </div>
</div>

At this point, Drupal should know to use your template for generating the user registration page. Season to taste with some CSS and you are on your way to a great looking registration page!

As your site grows more complex, you may need to add additional fields to the form. The drupal_render function tells Drupal to 'build' any field that has been defined for this form. If you ever need to get a list of all the form fields that are part of the user registration form, put the following code anywhere within your template to generate a list of fields that are 'defined' for it.

<?php
 
print '<pre>';
  print
var_export($form);
  print
'</pre>';
?>