Theming the User Registration Form in Drupal 6

Jan
14

By Marc Ingram | Filed Under: Drupal, how-to, theming, user registration

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>';
?>

Bookmark/Search this post with:

28 Comments

www.pinkworld.com

July 2, 2009

at 12:27 AM

http://www.pinkworld.com.myof

http://www.pinkworld.com.myofni.info/ebony-hogtied.html|Ebony hogtied ma and pounded http://www.pinkworld.com.myofni.info/www.pinkworld.com.html|Www.pinkworld.com http://hogtied-videos.1355511508.info|hogtied videos.1355511508.info free http://horny-underage-girls.1208587035.info|horny underage girls.1208587035.info http://www.pinkworld.com.myofni.info/chunky-black-lesbians.html|Chunky black lesbians http://www.pinkworld.com.myofni.info/lingerie-hogtied.html|Lingerie hogtied pictures

dfs

June 20, 2009

at 7:44 AM

I'm thankful to the one who

I'm thankful to the one who wrote this passage. I always read and write this style of articles. izlesene Also, as a daily writer, I present my respects to the all writers. Lately, I have watched a video resembling that in facebook. I research in all areas.

In my opinion, people should research first and write then.

Regards.

Steve

June 12, 2009

at 11:24 PM

This is exactly what I've

This is exactly what I've been trying to accomplish the last couple of days. Thanks for this tutorial. It has answered a million questions I've come up with over the last couple of days of hair-pulling.

vavovu

June 3, 2009

at 2:55 PM

Hello! Somebody here can

Hello!
Somebody here can advise me as or than easier to earn in the Internet. Not in a year, not through two, and for example in a month.
Prompt examples from a life.
It is a lot of theorists, and who earns are silent.
Who can works on somebody where do not deceive.

Rob Shambaugh

May 27, 2009

at 1:27 PM

Very helpful. Thanks for

Very helpful. Thanks for sharing. It's this basic Drupal stuff that gets us started on the right path. Thanks again.

kacz

May 25, 2009

at 9:01 AM

Thank you for this fine walk

Thank you for this fine walk through. While I think I've done everything as needed for a D6 template override of the user-profile-edit function, I find that the resulting form post does not store changed data and does not return an error. A little background:

In template.php:

function mytheme_theme(&$existing, $type, $theme, $path) {
return array(
'$hooks' => zen_theme($existing, $type, $theme, $path),
'user_register' => array(
'template' => 'user-register',
'arguments' => array('form' => NULL),
),
'user_profile_form' => array(
'template' => 'user-profile-edit',
'arguments' => array('form' => NULL),
),
);
}

The user-profile-edit.tpl.php is pretty straightforward, so nothing really to consider there.

Any thoughts on the failure to restore changed data without any sort of error?

kaay

May 18, 2009

at 2:15 PM

how to re-arrange the fields?

how to re-arrange the fields? cause this is the biggest issue I am facing right now the module "terms of use" and "create an account" button appearing between the form fields.

sankar_jeya

May 8, 2009

at 12:46 AM

hi i have used this model and

hi i have used this model and customized the user registration the issue was i could not able to redirect when submitting , any tips to rectify

Andrew

July 1, 2009

at 9:31 PM

Please let me know if you get

Please let me know if you get that resolved. I've been banging my head against a keyboard trying to get the user registration page to redirect to a new page after someone creates a new account.

Chatchavan

May 2, 2009

at 10:09 AM

This is very useful. If the

This is very useful.

If the desired fields are not displayed, try printing $form to see the actual keys that you should use. This snippet can be handy:

error_log('$var:'.var_export($var, TRUE)); // TODO: remove $var

Gino Head

April 30, 2009

at 4:16 PM

2u92x6dn0kb7o380

Amanda

April 26, 2009

at 7:04 PM

From my own experience using

From my own experience using a form tpl.php, you need to print the whole $form at the very end of the template to ensure that the form will validate upon submission.

<?php print drupal_render($form); ?>

Just adding the hidden form_build_id and the form_id fields will not mean the form will work.

Printing the entire form at the end, however, will mean that all the stuff you wanted to hide in making the template will show. For those fields, include "unset" statements for each one:

<?php unset($form['field_to_hide']); ?>

Please correct me if I'm wrong or if there is a better way to do this.

April 27, 2009

at 1:14 AM

I stand corrected - the

I stand corrected - the method below of printing the token (along with the form_id and the form_build_id) appears to work -- with no validation error. Thanks for the anonymous tip!

Anonymous

April 24, 2009

at 2:05 PM

you also have to print the

you also have to print the "token" in order to make the form work

print drupal_render($form['form_token']);

Menexis Merchant

April 9, 2009

at 1:32 PM

Thanks for this awesome

Thanks for this awesome function.Now instead of spending hours trying to figure this out I can be more productive today with other things

Thanks again.

davorin

April 3, 2009

at 6:09 AM

Don't forget to render hidden

Don't forget to render hidden fields or it won't work ;)

echo drupal_render($form['timezone']);
echo drupal_render($form['form_build_id']);
echo drupal_render($form['form_id']);

Erin

April 1, 2009

at 12:10 PM

I added this code to my

I added this code to my template.php file, created the user_register.tpl.php file, added the print drupal_render($form['form_build_id']);
print drupal_render($form['form_id']); code then cleared the cache and nothing changed.

What could the problem be?

christian

March 25, 2009

at 12:30 PM

Don't forget the

Don't forget the form_build_id and the form_id in the user-register.tpl.php

Without, it won't work ;-)

print drupal_render($form['form_build_id']);
print drupal_render($form['form_id']);

@Miki, don't forget the changes in template.php

Miki

March 13, 2009

at 2:36 AM

Hi, I'm new to Drupal so I

Hi, I'm new to Drupal so I need a simple help with that.
I bought a theme for Drupal 6. I installed it and it's working great.
I have no template.php file in /themes/mytheme dirctory so I create one with the above code. Then I create a user-register.tpl.php file with the above code too.
I added some code in the user-register.tpl.php file and clear the caching but I'm still get the default user registration form, any idea why?

Thanks.
Miki

February 4, 2009

at 11:46 AM

Yeah... the tutorial is

Yeah... the tutorial is concise and easy to understand, I applied all the concepts in Drupal 6.9 version but still couldnt submit the values to the database. When I press submit it reloads the creat an account page with no success. I also have the logintobbogan module. Any ideas?

at 12:21 AM

me too getting the same

February 1, 2009

at 11:08 PM

Hi Great Tutorial. Really

Hi Great Tutorial. Really well written and easy to understand. I used it and it came on screen as expected, validated the password as it should but when I submitted the form nothing happened and the form just went back to the default form values. I went to check the user page to see if the settings had changed there and none of the options had been changed there. I know the template was being recognized because I could change the layout of the form.

Any ideas how to get the form to submit to the database?

Chris

January 26, 2009

at 9:33 AM

Hi, thanks for that great

Hi,
thanks for that great function, but do you know how to override the rest of the registration page? I still have the tabs and die design which is arround the form on the page. I only want to display the fields nothing else...

best regards

John Lewis

January 21, 2009

at 6:09 PM

Extremely helpful and

Extremely helpful and concise. thank you

Tim Millwood

January 14, 2009

at 6:17 AM

I am guessing the same

I am guessing the same principal applies for all forms on the site.

mingram

January 16, 2009

at 10:40 PM

Yes you are correct this

Yes you are correct this process works for all forms on a site.

at 7:09 AM

I created a the files as

I created a the files as shown above and now i am not able to display it in the front end.can u help me.

Drupal Theme Garden

at 5:02 AM

Thanks for this short but

Thanks for this short but very useful article.