Theming CCK input forms with hook_form_alter

Published August 20th, 2010

A short guide with references and examples of methods for custom theming CCK input forms.

There’s a helpful guide on drupal.org on how to theme CCK input forms [1]. The approach of this guide gives you complete control over how every field and aspect of the form will be rendered, by means of creating a template file for the form and starting the form from a blank slate, separately re-adding every desired element back into the form.

Note that the original guide was written (I believe) for Drupal 4.7, contains notes regarding Drupal 5, and there is info about Drupal 6 adjustments in the comments of the page. Perhaps I will try updating that guide for Drupal 6 myself some time when I get a chance.

If your needs for adjustments are minor enough to not warrant manually reassembling the whole form one field at a time, then sometimes it may be simpler to go with a different approach, where you just override aspects of the form using hook_form_alter() [2] (in a custom module) or hook_theme() [3] (in template.php).

Here are several excellent resources for information on how to modify forms either using template.php or within a simple custom module:

• Lullabot: Modifying Forms in Drupal 5 and 6 [4]
• Using hook_theme to modify Drupal forms [5]
• Forms API Reference [6]
• Forms API Quick Start Guide [7]

You can do much of this via template.php, though most often (and in the below example), I use my own simple custom module for full access to all the possibilities. Here’s a lesson I wrote on How to create a simple Drupal 6 module in three easy steps [8]. The above Lullabot link mentions some details on whether to choose template.php or a module. Another reason I use a module is since I’ve set my module to have a very heavy weight value, causing it to override just about anything any other module has already done.

Here’s an example which modifies the input form specifically for Forum nodes in a variety of minor ways (again, this is part of my own customsite module [8]):

A few things to note:

1. Don’t include the <?php and ?> tags, which are only shown here to trigger the code formatting/colors.
2. About the 6th line down you see the commented out dsm($form); function. If you have Devel [9] module installed, un-comment this line as needed and it will add an incredibly useful “widget” to the top of the page (prints in the $messages area) that lets you easily browse through the guts of the form. Don’t uncomment the line if you don’t have Devel module enabled though or it will wsod (white screen of death). The widget has access control, so non-privileged visitors will not see it, just you. If you prefer you can alternately change it to dpr($form); which will add a nicely formatted print_r instead. If you click around in the dsm() widget and compare to the code snippets here, you’ll quickly understand how they are put together and how you can add your own.
3. You can modify any form this way. Every form in Drupal has a unique Form ID. You can find the ID if you view source on the page’s output and search for “form_id” (see the Lullabot article for an example).
4. Above and below 2 specific elements of the form I’ve added a #prefix and a #suffix. This lets you append your own custom text or HTML above or below a form element. In this case I’m using this to wrap a certain set of fields with a div, so I can style them all together. You can add prefixes and suffixes in as many spots in the form as needed.
5. At the bottom I’ve included an empty spot “Method to affect all node forms” which uses a snippet I found inside another module that allows you to effect multiple node types at once (whereas the first instance at the top affects only the “forum_node_form” form ID). I haven’t thoroughly tested this out, but including it as it is likely useful.

Tutorial media

default-sample-img-small.gif [10]