Theming Forms in Drupal 6

Mon, Mar 2, 2009 by Scott

I don't know why but there really aren't a whole lot of resources out there for theming forms in Drupal 6. Maybe it is because overall people try their best to avoid Drupal's dreaded forms just because of how cumbersome they can get. It can be difficult to understand the form API at first but again once past the intimidation you'll wonder why you ever avoided them in the first place. I'm going to use Drupal's registration form as an example for this post. The question that will be answered here is "How can I make my registration form look more elgant and friendly?". You want people to sign up for your site...don't scare them away.

The same method can be applied to any form on your site that you are trying to theme. The first thing you need is the ID of the form. You have firebug installed right? Go to your sites user/register page and check out the ID on the form tag...it's user-register. That means that your form ID is user_register. (yes...the hyphen becomes an underscore and I have no idea why). Now that you have the form ID, you need a declaration of hook_theme. This will either be in an appropriate custom module, or you can declare it in your template.php. If you are putting it in your template.php file, you declare it by "themename_theme()"....if in your module, it's "modulename_theme()". If you don't know anything about hook_theme, you have some learning to do. Go to api.drupal.org and start reading.

You can now use the form ID to intercept the form before it gets outputted, like so:

function yourtheme_theme() {
  return array(
    'user_register' => array(
       'arguments' => array('form' => NULL),
       'template' => 'user-register',
       ),
   );
}

Now, create the user-register.tpl.php file in your theme folder, CLEAR YOUR SITE'S CACHE, and you are ready to begin wrapping each field in your desired markup! All of the form values are stored in $form. You can output individual fields in your template file like this: 

<div class="column-left">
  <?php $form['Personal Information']['flux_firstName']['#title'] = t('First Name'); ?>
  <?= drupal_render($form['Personal Information']['firstName']) ?>
</div>
<div class="column-right">
  <?php $form['Personal Information']['flux_lastName']['#title'] = t('Last Name'); ?>
  <?= drupal_render($form['Personal Information']['lastName']) ?>
</div>
<?= drupal_render($form); ?>

One thing to remember, no matter what, after your done printing out each inidivdual field, to render the rest of the form object. This will ensure that all the hidden junk that the form needs to process is outputted as well. Of course, your fieldnames may be named differently so make sure you know how the form is built. Put this code in your custom module and then debug($form) in your tpl so you know exactly how to print out each field:

function debug($var, $type = TRUE) {
  drupal_set_message('<pre>'.var_export($var, TRUE).'</pre>', $type?'status':'error');
}

Now you have complete control over your forms. Change the layout however you want and make it pretty to encourage those users to fill it out.

 

Anonymous posted on November 23, 2009 1:58 am

you saved my day. THANKS!!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <h2>
  • Lines and paragraphs break automatically.

More information about formatting options