Creating horizontal form tabs in Drupal 7
Creating Vertical tabs in Drupal 7 forms is an easy task, but to accommodate the design needs we at times have to use different style. For instance, horizontal tab might be needed. The same makes more sense for shopping cart check out like pages. And here the need for looking 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 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 walkthrough & some trail-and-error effort I was able to figure its usage and it is very similar to vertical tabs in core.
Let's take the below code snippet from quiz.module,
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
Field groups module has got adequate pointers to play with fields.
More snapshots of mange fields page can be found in project page under "Extra screenshots and video's" 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 show case its usage,
The above code snippet tries to provide a practical example to leverage the handy form api type. The code should be self explanatory and can be extended by copy pasting the same in any form builder / form alter function.
The code would produce output as below,
Snapshot of Horizontal tab code snippet
Hope this will save the time of others.