Add a class to Drupal form fields

Forms in Drupal 7 can be a pain to deal with. You don't get easy access to manipulate the html generated -- you can't just open up a form.tpl.php and customize the markup. You have to make your alterations via the Drupal Form API

What am I going to do?

In this example I'm going to add a few classes to the comment form submit button. But you could use this example to do similar things for other elements and on any form in Drupal 7.

Why am I doing this?

I'm using bootstrap and have a set of classes that will style my form submit button. Instead of custom styling my button I'll just add the necessary classes to the form element.

How am I doing this?

I'll use hook_form_FORM_ID_alter to alter one specific form. With this hook we can supply the id of the form to be altered.

You could also use hook_form_alter if you want the change to apply to all forms.

First, create a custom module to put your form alter function in. For the sake of the examples below, let's name the module jc_comments. I often namespace the module to the project it's for. In this case it's for my own site and will contain code that applies to comments.

Find the form_id

Inspect the form in your browser the <form> element will have an id, this is your form id. Remember when you name your function that the form id should use underscores and not hyphens. The default comment form id is: comment-form. 

Create the form alter function

function jc_comments_form_comment_form_alter(&$form, &$form_state) {

}

 

Target the form item. Find the form item to target in the $form variable passed in the form alter function. You’ll need to do something like dpm() or use the object_log module (this module is great!) to dig through the $form array.

Dpm or object_log $form to find the field array. The items in these arrays are what Drupal uses to generate each form item. Inside hook_form_alter() we have a chance to change them before they render

/** Make sure devel module is enabled */
function jc_comments_form_comment_form_alter(&$form, &$form_state) {
  dpm($form);
}

 

Inspect the $form array of the dpm and pick out the various form inputs:

$form[‘actions’][‘submit’]  <-- we'll be using this one

$form[‘actions’][‘preview’]

$form[‘author’][‘name’]

$form[‘author’][‘mail’]
 

Add or update the #attributes array. If there isn’t already an #attributes array, add one. If it exists, don’t overwrite it, add to it. This is where we can add extra attributes to the field. 

Add a class array inside that. And the class array holds an array of classes. This point is confusing to explain in words, so see the code below. Note that the list of classes is an array and the 'class' array is an item in the '#attributes' array.

 

The code

The below example targets the comment form and adds bootstrap classes.

/**
* Implements hook_form_FORM_ID_alter();
* @see comment_form_validate()
* @param $form
* @param $form_state
*/
function MODULENAME_form_comment_form_alter(&$form, &$form_state) {
  $form['actions']['submit']['#attributes']['class'] = array('btn', 'btn-info', 'btn-lg');
}

 

Another example

Another simple example would be to change the comment form button text value from the default "Save" to "Post".

Again, just look at the $form['actions'] item

Object Log of $form array

 

Now just update the function code to the following:

/**
* Implements hook_form_FORM_ID_alter();
* @see comment_form_validate()
* @param $form
* @param $form_state
*/
function MODULENAME_form_comment_form_alter(&$form, &$form_state) {
  $form['actions']['submit']['#attributes']['class'] = array('btn', 'btn-info', 'btn-lg');
  $form['actions']['submit']['#value'] = 'Post';
}