Drupal Comment Form Theming

Before. Standard Drupal comment form layout: labels above form elements.

After. Templated comment form layout using a table to place the labels on the left.

Alternative. Drupal comment form without the Homepage field.

Theming Drupal comment forms is like theming web forms, except for one trick: it requires you to add your template to Drupal theme registry. I'll explain in this tutorial how to do that and how to change the form layout using tables, so that the labels are on the left side of the form elements. This article builds on the most popular tutorial on my site: Drupal web form theming tutorial, so be sure to check that one first.

Change comment form with modules

Firstly, you can change comment form layout in Drupal without any modules: you can enable subject and contact information fields (Your name, E-mail and Homepage) using: Administer › Content management › Page (or some other content type) › Comment settings. Then toggle Comment subject field or in Anonymous commenting select "Anonymous posters must leave their contact information".

Then there are several free modules to customize the form as you wish, for example:

• Comment notify - Adds "Notify me when new comments are posted" selection on the form that lets the commentators subscribe to any further comments.
• CAPTCHA - Protects your website from spam by forcing users to solve mathematical questions or decypher distorted letters from an image.
• Better formats - Helps to configure one input format for the admins and another input format for the comment form. Additionally, by setting permissions for anonymous and authenticated users, you can show/hide elements, for example: "show format selection for comments" and "show format tips".

If ready modules aren't enough for you, I recommend that you use this tutorial as a staring point. Once you get it working it's easy to alter the form freely: change/translate texts, set some default values or add some JavaScript to do a client-side validation, for example.

Custom template for comment form

Versions
Article was written for Drupal 6.

Let's start with that one trick I mentioned... With many Drupal components, like forms, it's enough that you drop a template file into your theme folder. However some of them need to be registered manually to the theme registry. Comment form is one of those. Typically to Drupal, configuration is made easy: there's no need to alter any core files, you just need to add few lines to hook_theme in template.php. The actual name of this function depends on you theme - if you're using the default Garland theme it would be garland_theme. Add the following into your template's template.php, e.g. sites/all/themes/garland/template.php

function garland_theme(){
  return array(
    'comment_form' => array(
      'arguments' => array('form' => NULL),
      'template' => 'comment-form',	
    ),
  );
}

Next you need to provide a template... Here I'm styling the form with a helper for forms table layout. Copy the helper and create the following kind of file for the template at sites/all/themes/garland/comment-form.tpl.php

<?php
// file defined in http://1013.fi/cms/theming-drupal-web-forms
include_once( 'form-formatting-helpers.php' );
// dpm( $form ); // debugging using developer module

// create table only when we're asking for a name - i.e. user is anonymous
// (logged in users automatically see username taken from their profile)
if( $form['name'] ) {
	// steal (reference) the interesting parts of the comment form into a new
	// array that looks like a fieldset
	$personal_info_fieldset = array(
		'#type' => "fieldset",
		'name' => &$form['name'],
		'mail' => &$form['mail'],
		'homepage'=> &$form['homepage']
	);
	
	// render the newly created fieldset into a table
	// notice that the function works by reference, so there's no return value
	fielset_labels_on_left_array( $personal_info_fieldset, false, 30 );
	
	// print the table
	// rendering them marks them done, meaning that they won't get rendered anymore
	// when we render the rest of the form
	print drupal_render( $personal_info_fieldset );
}

// Always print out the entire $form. This renders the remaining pieces of the
// form that haven't yet been rendered above.
print drupal_render( $form );

After this you're ready to flush the theme registry cache and try it out.

Finally, you can make a simple change to your stylesheets to get rid off the zebra table effect where odd and even rows have different background colors:

#comment-form tr.odd,
#comment-form tr.even,
#comment-form tr.odd td,
#comment-form tr.even td {
    background-color: inherit;
}

Comment form without Homepage field

Here's an alternative template without Homepage field and without any dependencies to other files:

<?php
// create a table with one row and two cells containing form fields
$rows = array();
$rows[] = array(
	0 => drupal_render( $form['name'] ),
	1 => drupal_render( $form['mail'] )
);

unset( $form['homepage'] );

print theme('table', array(), $rows);

// Always print out the entire $form. This renders the remaining pieces of the
// form that haven't yet been rendered above.
print drupal_render( $form );

Finalize the design by aligning cell contents to top instead of default center.

#comment-form td {
    vertical-align: top;
}

Related articles

Customizing Drupal comments has been discussed in several articles and comments on the Drupal website, including:

• Username as a link to homepage also for registered users
• Remove subject line from comment template (in addition to comment form)