Theming the registration form in Drupal 7

The standard 'out of the box' user registration form in Drupal is not the prettiest of forms and isn't very straight forward to theme either because it doesn't respond to simply creating a user--register.tpl.php in the templates folder. The old override method in Drupal 6 doesn't work anymore due to internal alterations that are way over my head. So I set about to find out how to theme a custom form I had built in Drupal 7.
I found some articles about this subject, most of which didn't work. The solution came from here. Although it took some working out just how to display the fields where I wanted them instead of simply rendering the complete form within a custom template which is, let's face it...pretty pointless seeing as we want to add our own markup to the form.

So here is the complete solution for non php junkies.
 

Adding custom fields to the user registration form is easy. Simply go to 'Configuration' > 'Account Settings' > 'Manage Fields' and add fields just like adding CCK fields to nodes. Don't forget to check "Display on user registration form'.

Getting the user registration form to accept your custom template is a little tricky and requires creating a module. Don't panic...it's easy, here goes.

Create a new folder in your 'modules' folder. Give it a unique name (I called mine 'regform').

Inside that folder create a file called 'regform.info'. That file should contain this (changing the name if you named your folder something other than regform).

name = Regform
description = Module allows for custom theming of the user registration form.
package = User interface
core = 7.x

Now create another file within your module folder called 'regform.module'. Also updating the name if you called it something else. That file should contain this, changing MYMODULE for the name of your module.

<?php
function MYMODULE_form_user_register_form_alter(&$form, &$form_state, $form_id) {
  $form['#theme'] = 'user_register';
}
?>

Now you need to add this code to your template.php which sits in your theme base folder. If not, create one. Change MYTHEME for the name of your theme.

<?php
function MYTHEME_theme($existing, $type, $theme, $path){
  return array(
    'user_register' => array(
      'render element' => 'form',
      'template' => 'templates/user-register',
    ),
  );
}
 

Now create your user-register.tpl.php file within your templates folder. For now just write something like this within your user-register.tpl.php.

<h1>YIPPPEEE</h1>

Go to 'Modules' in Drupal and activate your module which should be under 'User Interface'.

If you now logout of Drupal and navigate to the user registration or create new account page you should be received by a big YIPPPEEE. You won't see a registration form, because we still need to call the correct fields from within the user-register.tpl.php. We'll do that now.

Add this to your user-register.tpl.php.

<?php
print drupal_render($form['form_build_id']);
print drupal_render($form['form_id']);
?>
<?php print drupal_render($form['account']['name']); // prints the username field ?>
<?php print drupal_render($form['account']['mail']); // prints the mail field ?>
<?php print drupal_render($form['account']['pass']); // prints the password fields ?>

This should render the Username, Email and Password fields on the user registration form. I also had a bunch on custom fields which I needed the field ID's of to render. You'll find these back at the 'Account Settings' > 'Manage Fields' page. To call them in the user-register.tpl.php use this code.

<?php print drupal_render($form['field_first_name']); // prints the custom first name field ?>
<?php print drupal_render($form['field_last_name']); // prints the custom last name field ?>
 

My field ID's were field_first_name and field_last_name.

If you have fields you wish to render in the form but don't know the ID's of the fields you can add this to the end of your regform.module php function.

var_dump($form);

This will dump all the available variables to the top of the page. It looks very daunting but you can decipher the field names of the fields you want to display which you can add to the tpl.php as above. Finally you need to render the Submit button with this.

<?php print drupal_render($form['actions']['submit']); // print the submit button ?>

That's it.

Filed under: 

Comments

brilliant. perfectly explained and saved so much time.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.