Create multiple-step forms using CCK Fieldgroups

Published August 19th, 2010

Harnesses the usefulness of CCK’s “Fieldgroup” sub-module, paired with a few other key modules and settings, to give the effect of a multi-step/page form.

Several modules [1] and/or FormAPI techniques (example 1 [2], example 2 [3]) exist that allow a CCK submission form to span multiple steps or pages, however the modules do not currently work for Drupal 6, and the programming method is above the ability for the average site admin to accomplish.

However, there’s one interesting method that harnesses the usefulness of CCK’s “Fieldgroup” sub-module, paired with a few other key modules and settings, to give the effect of a multi-step/page form. This is by no means a perfect solution or applicable to every situation, but in some cases, it should be sufficient.

Modules needed

Ensure that you have the following modules installed in order to follow along with this guide:

• CCK [4]
• CCK Fieldgroup (a sub-module which comes with CCK)
• CCK Fieldgroup Tabs [5]
• jQuery UI Tabs [6] (Drupal 6 only)
• Javascript Tools Tabs [7] (Drupal 5 only)
• Automatic Nodetitles [8]
• Token [9]
• SaveGuard [10] (optional)

Set up the Tabs module

1. Go to the Tabs settings page at Administer > Site configuration > Tabs (admin/settings/tabs).
2. Since it helps visually reinforce the change from one set of form fields to another, I suggest turning on either the Slide effect or the Fade effect (but not both).
3. Choose either the slow or fast Effect speed.
4. Set the Navigation buttons option to enabled, and if you prefer the Next and Previous navigation buttons to have capitalized names or use different wording, adjust the text here. When you’ve completed these settings, press “Save configuration”.

Create your multi-step content type

1. Begin by creating your new CCK type at Administer > Content management > Content types > Add content type (admin/content/types/add).
2. Unless you have a reason to keep it, expand the “Submission form settings” fieldset and remove the Body field, as if you keep it, it will stay visible on every page of the form.
3. By default, the Title field will show on every page as well; if you’d rather not have the Title visible, a solution is to install the Automatic Nodetitles [8] module, which will allow you to generate a Title based on pre-determined settings (or tokens if you have Token [9] module installed), or on the content of another field of the form. All Drupal nodes “must” have a Title, and Automatic Nodetitles allows you to meet this requirement while allowing you to hide the Title field. Once you’ve installed Automatic Nodetitles module, an “Automatic title generation” option will appear at the top of every content type’s main configuration page. Set this option to Automatically generate the title and hide the title field, and expand the “Replacement patterns” fieldset to see what options you can set for the Title. One possible example of what you could set this to might be: [author-name-raw] [mm]-[dd]-[yy] (Author’s name + the submission date). After you’ve added custom fields to the content type, you can also come back to this setting and use the CCK text tokens options, which allow you to choose any other fields from the content type (for instance if one of your form fields asks for the person’s name, you can use the name they type in your Title.
4. If you’d like to include a description or help text above the form, which will show on every page/step of the form, add that text to the Explanation or submission guidelines field.
5. Expand the “Workflow settings” fieldset and uncheck the Promoted to front page option. Also expand the “Comment settings” fieldset and choose your comment settings for this content type. If this content type is meant for data collection rather than public pages, you’ll probably want to disable comments.
6. Click the “Save content type” button to proceed.

Create Fieldgroups and Fields for your CCK type

1. Click on the “Manage fields” link or tab for your new content type. It doesn’t matter whether you create the fields of your form first, or create one or more of the separate Fieldgroups which will become the pages/steps of your form. If you’re starting a form from scratch, probably the best way to keep things organized and uncluttered would be to create each Fieldgroup as it comes time to make another page of the form. When naming Fieldgroups, choose short and to-the-point names (remember that the names will have to fit inside of the tabs). Unless descriptive names are required, consider simply naming the Step 1, Step 2, etc. To make a new Fieldgroup in Drupal 6, under the New group area of the Manage fields page, enter a Label (which can be slightly longer and capitalized), and a short group_field name. If you’d like, you can drag and drop the group into your preferred order before you even save it. When ready, press “Save”. In Drupal 5, make a new Fieldgroup by clicking on the “Add Group” link/tab.
2. Once you’ve created one or more Fieldgroups and one or more fields, you can begin adding the fields into the appropriate Fieldgroups. The way to add a field to a group in Drupal 6 is simply to drag and drop the field below and to the right of a Fieldgroup. When you do this, the field’s name will be indented to show visually that it is within a given Fieldgroup. In Drupal 5, you need to select the Fieldgroup you’d like to use for each field from the Group down-down list. In Drupal 6, you can drag and drop Fieldgroups to change their order, and all fields within a group stay in the group as you move it (in Drupal 5, use the Weight option for each Fieldgroup to adjust their order).
3. After you create a Fieldgroup in Drupal 6 (or “as” you create a Fieldgroup in Drupal 5), you need to configure the Fieldgroup’s Style setting. In Drupal 6, click on the “configure” link next to the Fieldgroup and choose the tabs option for the Style setting. In Drupal 5, the Style setting is available while you create the Fieldgroup, and is also available from the Fieldgroup’s “configure” link. While configuring the Fieldgroup, you can also enter Help text which will be shown at the top of that “page” of the form.

Changing the tabs to Vertical tabs

If you prefer horizontal tabs, then skip this step. However, if you have more than a few steps in your form, the number of horizontal tabs is likely to span more than the width of your site’s layout, and will begin to stack on top of each other in a rather unappealing manner. In this case, vertical tabs that run along the side of the form are a better choice.

Fortunately this can be accomplished using just some CSS to override and change the position of the tabs. This is a bit of a messy way to do this, but it will work for now; the next release of Tabs module will evidently come with a vertical tabs option by default. Open the style.css file of your theme and add the following code to override the default horizontal tab layout (this works for certain with the standard Garland theme, but may require adjustments for other themes):

Avoiding accidental data loss

Since the pages/steps of this form are actually still part of a single CCK form, the data of one step is not yet saved when proceeding to the next step (it is still there, but is hidden while the next step of the form is shown). It’s possible that an end-user of the form may misunderstand or possibly forget that the form has not been saved, and navigate away from the page, losing all of the data they’ve entered. As a multi-step form such as this is likely to be a substantial amount of data, avoiding a loss like this is important.

One solution to help avoid this problem is the SaveGuard [10] module. If the form has been modified, SafeGuard displays a warning message if the user attempts to navigate away from the page before saving. Simply enable the module, add a custom message if desired, and it immediately begin its task of helping users avoid accidental data loss.

Another similar but more robust solution to consider is AutoSave [11] module.

Tutorial media

multi-step-form.jpg [12]

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