We have found Chapter Three to be a valuable resource in both training and development of custom Drupal functionality. In addition, getting Chapter Three’s help with scaling Drupal has been a real asset.
Jim Nisbet, CTO Highwire Press
HOWTO: Fully Theme and Customize the Drupal User Registration Form
Matt Cheney | February 14, 2008 - 4:11pm (19 comments)
Just a little to the left please. Flip it around. Put that on top of this. Call it by a different name. It is the little changes, that seem trivial and small, that often end up being real headaches to make and support our clients in making. Do we really want to try to build capacity with clients by teaching them to adjust #weight in hook_form_alter?
The Drupal Theming System is pretty powerful and, when done right, can offer a good avenue for our clients and their staff to edit, modify, and change their own website content. Its a lot easier to modify HTML files than Drupal module files.
A good example of where this kind of process is needed is on the user registration page. There are a lot of little bits of language and ordering to change and add, but to do so in Drupal module code can get a little hairy. Observe our technique to abstract the user/register form into a flat template file (while maintaing most of the other good Drupal goodness).
Step One: Create a theme override in your module code for the user/register form that executes a _phptemplate_callback to use a separate template file.
<?php
function theme_user_register($form) {
$vars = array();
$output = _phptemplate_callback('user_registration_form', $vars);
$output .= drupal_render($form);
return $output;
}
?>Step Two: Expand the theme override function made in step one to remove the titles and descriptions Drupal provides for the form elements. We do this in the theme function (instead of in a hook_form_alter) to preserve the original field titles so they can be used as part of any error messages coming out of form validation.
<?php
foreach($form as $key => $value) { // loop through top level
if (is_array($form[$key])) {
$form[$key]['#title'] = '';
$form[$key]['#description'] = '';
foreach($form[$key] as $key2 => $value2) { // loop through second level
if (is_array($form[$key][$key2])) {
$form[$key][$key2]['#title'] = '';
$form[$key][$key2]['#description'] = '';
}
}
}
}
?>Step Three: Create "rendered" versions of each of the form elements and set them as variables that can be passed to the template file.
Note: This can also be done with a generic foreach loop (similar to the one in step two) that renders each form element automatically.
<?php
// Set up the Vars Array
$vars = array();
// Render Specific Fields You Want on Your Registration Form
// note - the specific location of the element in the form array varies
$vars['name_element'] = drupal_render($form['account']['name']);
$vars['mail_element'] = drupal_render($form['account']['mail']);
// continue for each field you want...
// Don't Forget the Submit Button
$vars['submit_button'] = drupal_render($form['submit']);
?>Step Four: Create a template file in your site's theme directory to build the user/register form with the customized variables we defined in step three.
Note: This file needs to be the same name as specified in the _phptemplate_callback (example: user_registration_form.tpl.php).
<div class="user-register-element">
<label>Enter a screen name:</label>
<div class="user-register-element-input">
<?php print $name_element; ?>
</div>
<div class="user-register-element-description">
Screen names can be up to 13 characters in length.
</div>
</div>
<div class="user-register-element">
<label>Enter an Email:</label>
<div class="user-register-element-input">
<?php print $mail_element; ?>
</div>
<div class="user-register-element-description">
Emails must be valid.
</div>
</div>
<?php // continue on for each rendered form element ?>The drupal magic here is that the user registration form is now uniquely customizable by anyone who can edit the theme template. This allows for customized "prompts" for each profile field element, without changing the site-wide field name in admin/user/profile, and it allows for customization of the username and email titles and descriptions.
This technique will need to be modified to support external modules that modify the user/register form like LoginToboggan. It also needs to take into account things like "required" fieldstates.
Comments
Matt Cheney
August 31, 2008 - 2:20am
This is for 5.x only. This becomes so much easier to do in Drupal 6.
Rob
September 1, 2008 - 1:18pm
Hi!
Great tutorial!
However, I've got a little problem and you might be able to help me. I don't really like the way Drupal outputs the forms, I want to achieve something like a "table view". That means labels on the left, input fields on the right, so all looking like a well formed form. I tried a basic CSS approach but my forms are quite long and sometimes the CSS overrides are not the safest way anyway (browser compatibility, etc.). So my question is, is there any way to get Drupal automatically render the form this way? I think this is a major issue but I don't seem to find an answer. Hopefully you can help!
Thanks!
Rob
gotnate
November 30, 2008 - 4:30am
i too would like to fully customize the core output of the form... any takers?
I am starting to see a lot more of Wordpress being used like your Drupal post here. People are starting to make some good money off of modifying WP theme and CSS to meet their customers website needs. Then when they eventually hand it over to the client. The client can do all of the updating they want from an easy to work with admin panel. Huge business in being able to bridge the customer to the internet.
This is a nice tutorial. I am a newbie to "Drupal". Currently using Wordpress and is looking forward to learn a bit about drupal. It seems a great tutorial to me. Thanks for sharing.
Been drupalling for about a year, and I can't figure out this tutorial.
So I put the first code snippet into my theme's template file. Fine.
The second one? Where does it go? Inside the first code snippet? Where?
And the third code snippet also goes in there?
Where?
cecil porter
February 9, 2009 - 2:21pm
ditto. what files are we editing here? anyone?
Anonymous
March 16, 2009 - 5:57pm
Looks like the output format changed and is stripping out some code from the original post. Perhaps try a google cached copy or wayback machine?
Josh Koenig
July 11, 2009 - 3:45pm
The first three code blocks collectively comprise a theme override which builds up the appropriate $vars arrauy. The fourth is an example tpl.php which puts together some nice output.
is there any problem with the class?
James
August 8, 2010 - 4:31pm
do you know how to add a registration button to drupal, i cant figure this out. i have a login button and request new pw link but no register button.
yll
August 10, 2010 - 7:15pm
Mbt zapatosEnciendo el televisor escuchando el diálogo de los demásMbt zapatosTal vez los que me pueden dar cuenta de la historia
Usted tiene que amar no puedo aprenderMbt zapatosImpotente viendo que la situación empeore．Sentirse realmente en serio vistazo a la situación．Yo no puedo darte el futuro ustedMbt zapatosTranquilo final del tratamiento es otro．Cuando las lágrimas para permanecer．Shangyiqiaozai
La separación es otra de Mbt zapatosentender
Add comment
Blog Tags
Client Testimonial
Drupalcon SF 2010
Hello, This is a great guide to developing a well themed user registration experience. I was wondering which versions of Drupal it works on. I run a Visual Basic Source site that has just the normal registration page right now. However, I'm thinking of adding some more fields specific to submitting tutorials and source samples. The problem is I'm on 5.8 still and I don't think I can upgrade until I develop some updated modules. Will this work with 5.x or only on 6?