Submitted by Robert Rhead on

Theming the registration form in Drupal 7

Drupal web design image

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.

robert-rhead-web-designer-profile

About the Author

is a qualified graphic designer, web designer and photographer with many years experience in providing high quality design and marketing products to small businesses throughout Europe.

Comments

brilliant. perfectly explained and saved so much time.

Perfect!!! Thank you ;D

Everything worked until I got to the part of adding the fields to user-register.tpl.php. The fields are not visible. Only the submit button is visible and I'm not sure why.

UPDATE: I used your instruction on a new drupal install and it worked so I realized a module must be preventing it from working. I discovered the Field group module was preventing the fields from rendering after I disabled it.

Thank you for the tutorial. I wish I found the issue earlier.

Thank for your post its detailed and simple saved me alot of time i just have one problem its not displaying the password field what maybe wrong?

Emmanuel, are you sure you have this line in your template file?:-
<?php print drupal_render($form['account']['pass']); // prints the password fields ?>

would regform_form_user_password_form_alter be the code to change the reset password form trying and its not working

briliant

i have a problem theming my user-profile-edit.php the user name field (name) is rendering nothing, while other fields like 'mail' are working good.

//contents of user-profile-edit.php
<?php
print render($form['form_id']);
print render($form['form_build_id']);
print render($form['form_token']);
print render($form['account']['name']);
print render($form['account']['mail']);
?>

//contents of template.php
...
function MY_THEME_theme($existing, $type, $theme, $path){
return array(
'user_register' => array(
'render element' => 'form',
'template' => 'templates/user-register',
),
'user_login' => array(
'render element' => 'form',
'template' => 'templates/user-login',
),
'user_profile_form' => array(
'render element' => 'form',
'template' => 'templates/user-profile-edit',
),
'user_pass' => array(
'render element' => 'form',
'template' => 'templates/user-pass',
),
'user_pass_reset' => array(
'render element' => 'form',
'template' => 'templates/user-pass-reset',
),
);
}
in the end when I open the page mysite.com/user/1/edit I can only see the mail field.

any idea of what am I doing wrong?? or how can I render that name field so I can customize the visualization?

hi i can apply the theme its look great !!! but one problem that is event not called when i clicked on create account button its just reload the page!!!!

Do you have a tutorial for Theming the login page

I've not had much of a problem so far with theming the login page. What are you having difficulty with?

How can I theme profile2 fields in the registration form

Trying to put placeholder text inside the Email field, First Name field, and Last Name field on the User Registration form. The email works like a charm, but I can't get anything to work with the hook_form_alter() method on the name fields.

Figure I have something named incorrectly.

if ( TRUE === in_array( $form_id, array('user_register_form')))
{
$form['account']['mail']['#prefix'] = '<i class="ss-icon">mail</i>';
$form['account']['mail']['#attributes']['placeholder'] = t(' Your Email ');

$form['field_first_name']['#attributes']['placeholder'] = t(' First Name ');

$form['field_last_name']['#attributes']['placeholder'] = t(' Last Name ');
}

Hmm...not sure. I usually add placeholders through the template.php as this example for a webform:
function MYTHEME_form_alter(&$form, &$form_sate, $form_id){
if($form_id == 'webform_client_form_5'){
$form["submitted"]["your_name"]["#attributes"]["placeholder"] = "Please enter your name";
}
}

In the regform.module, the #theme is "user_register". I'm using "analytic" as my display theme, so when you say "add function MYTHEME_theme($existing, $type, $theme, $path){ to your template.php which sits in your theme base folder" am I supposed to update template.php in "htdocs/drupal/sites/all/themes/analytic" or create a new folder "htdocs/drupal/sites/all/themes/user_register" and add template.php there?

Also, I don't have a templates folder, where do I keep user-register.tpl.php?

If you're using Analytic as your display theme you need to replace the word MYTHEME in the template.php function with the name of the theme your using....in your case analytic. The theme isn't user_register.
The template.php should be in /sites/all/themes/analytic
I keep all theme template files (except template.php) in a folder as such /sites/all/themes/analytic/templates. If you don't have that folder simply create one.

i implemented in my application but it does not work.

i want to display last name field after user name and before email address and i have enabled confirm email address in the form..

So when i use user-register.tpl.php for theming then confirm email address does not display....

thanks

how to i set the registration page link in menu ?

when i open the page using URL it's show error "The requested page "/hardik/drupal/Regform" could not be found."

Plz guide me.

Hardik...the URL for the registration page will always be /user/register

Thanks.
but still show the " Access Denied " error.

Then you probably have the permissions misconfigured somewhere. Are anonymous users allowed to create user accounts? Check the 'Account Settings' page.

Hmm....I check the all 'Account Setting ' and user->'Permission' but denied issue still there.

doesn't work with profile2, i don't know why.... any suggestion?

template.php:
function zeroemission_theme($existing, $type, $theme, $path){
return array(
'user_register' => array(
'render element' => 'form',
'template' => 'user-register',
),
);
}

user-register.tpl.php:
<h1>YIPPPEEE</h1>
<?php
print render($form['profile_main']['field_nome_e_cognome']);
print render($form['profile_main']['field_ragione_sociale']);
print render($form['profile_main']['field_indirizzo']);
print render($form['profile_main']['field_telefono']);
print render($form['profile_main']['field_foto_profilo']);

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

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

template_login_form.module:
function template_login_form_form_user_register_form_alter(&$form, &$form_state, $form_id) {
$form['#theme'] = 'user_register';
}

Nice....

Hi..
How to error message in webform tpl file...

comment_body[und][0][value]

Well, this works, but that's not "it" - how to style fields them self? I tried using field templates, but it just doesn't work - templates are not used by drupal. I.e. I named my field "ort" so I tried making field templates:

field--ort.tpl.php
field--field-ort.tpl.php
field--field_ort.tpl.php

None of these work?!?
Is this possible? What's the correct naming form?

Milan

Thanks a lot......I was trying to find solution for this 4 days......

Add new comment