Creating Horizontal Form Tabs in Drupal 7

How To Create Horizontal Form Tab

Creating Vertical tabs in Drupal 7 forms is an easy task, but to accommodate the design needs we at times have to use different styles. For instance, a horizontal tab might be needed. The same makes more sense for shopping cart check-out pages. And here the need for looking for solutions outside the Drupal core arises as horizontal tabs are not readily available in core.

But contrib modules come into play to unleash the confinements of Drupal core. I'm going to uncover a Drupal way of creating Horizontal tabs using Field Group contrib module in this blog post. Beware there is another contrib module with a similar name and it is obsolete now.

In a hushed way, this module provides a new Form API type, essentially to use in tandem with Fields (a.k.a CCK). But there is no documentation or API reference to exhibit its usage to leverage the same with custom forms.

After a few code walkthroughs & some trial-and-error effort, I was able to figure out its usage and it is very similar to vertical tabs in the core.

Let's take the below code snippet from quiz.module,

if (function_exists('userpoints_userpointsapi') && variable_get('quiz_has_userpoints', 1)) {
  $form['userpoints'] = array(
    '#type' => 'fieldset',
    '#title' => t('Userpoints'),
    '#collapsible' => TRUE,
    '#collapsed' => FALSE,
    '#group' => 'additional_settings',
  );
  $form['userpoints']['has_userpoints'] = array(
    '#type' => 'checkbox',
    '#default_value' => (isset($node->has_userpoints) ? $node->has_userpoints : 1),
    '#title' => t('Enable UserPoints Module Integration'),
    '#description' => t('If checked, marks scored in this @quiz will be credited to userpoints. For each correct answer 1 point will be added to user\'s point.', array('@quiz' => QUIZ_NAME)),
  );
  $form['userpoints']['userpoints_tid'] = array(
    '#type' => 'select',
    '#options' => _quiz_userpoints_type(),
    '#title' => t('Userpoints Category'),
    '#states' => array(
      'visible' => array(
        ':input[name=has_userpoints]' => array('checked' => TRUE),
      ),
    ),
    '#default_value' => isset($node->userpoints_tid) ? $node->userpoints_tid : 0,
    '#description' => t('Select the category to which user points to be added. To add new category see admin/structure/taxonomy/userpoints', array('!url' => url('admin/structure/taxonomy/userpoints'))),
  );
}

This code should be quite self-explanatory for any  Drupal developer., But still, to brief, essentially we are defining a new fieldset in quiz node form if Userpoints module is enabled. The key-value '#group' => 'additional_settings' turns this fieldset into a vertical tab item.

This is how it looks in the node form,

Now to turn (CCK) fields in Drupal 7 to horizontal tabs style, we need to install the above-mentioned Field groups module and create wrapper field types in needed content types. For instance, see the snapshots below,

Manage fields page of Article content type

The field groups module has got adequate pointers to play with fields.

More snapshots of the manage fields page can be found on the project page under the "Extra screenshots and videos" section.

The interesting spice of this module would be to add Horizontal tabs to custom forms, which could be achieved by using the new form API type "horizontal_tabs" which is defined in Field groups (but not properly documented).

See the code below to showcase its usage,

Snapshot of Horizontal tab code snippet

Hope this will save time for others.