Drupal Articles » Create multiple-step forms using CCK Fieldgroups
Several modules and/or FormAPI techniques (example 1, example 2) 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
- CCK Fieldgroup (a sub-module which comes with CCK)
- CCK Fieldgroup Tabs
- jQuery UI Tabs (Drupal 6 only)
- Javascript Tools Tabs (Drupal 5 only)
- Automatic Nodetitles
- Token
- SaveGuard (optional)
Set up the Tabs module
- Go to the Tabs settings page at Administer > Site configuration > Tabs (admin/settings/tabs).
- 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).
- Choose either the slow or fast Effect speed.
- 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
- Begin by creating your new CCK type at Administer > Content management > Content types > Add content type (admin/content/types/add).
- 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.
- 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 module, which will allow you to generate a Title based on pre-determined settings (or tokens if you have Token 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. - 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.
- 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.
- Click the "Save content type" button to proceed.
Create Fieldgroups and Fields for your CCK type
- 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.
- 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).
- 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
tabsoption 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):
/* Turns off the clear:both in the span from Tabs module's drupal-tabs.css,
so the form will float to the right of the tabs */
#tabs-fieldgroup_tabs span.clear {
clear: none;
}
/* Sets spacing between the tabs and the form */
#tabs-fieldgroup_tabs ul.primary {
margin: 0 20px 0 0;
}
/* Makes tabs vertical and sets padding below each */
#tabs-fieldgroup_tabs ul.primary li {
margin: 0;
padding: 0 0 12px 0;
display: block;
}
/* Prevents the form fields from wrapping under the vertical tabs */
.node-form .ui-tabs-panel {
float: left;
}
/* Clears the float so the Save & Preview buttons stay below the form */
.node-form div.admin {
clear: both;
}
/* Ensures the float clears when the admin is viewing the page too */
.node-form fieldset {
clear: both;
}
/* More tasteful separator line before prev/next buttons*/
.tabs-nav-link-sep {
border-top: 1px #E2E2E2 solid;
margin-top: 10px;
margin-bottom: 10px
}
/* Overriding Tabs module's drupal-tabs.css, more tasteful prev/next buttons */
.tabs-nav-previous, .tabs-nav-next {
font-size: 12px;
font-weight: normal;
float: left;
border: 1px solid #ADADAD;
padding: 1px 7px;
margin-bottom: 5px;
cursor: pointer;
background-color: #E2E2E2;
}
/* Changes hover state of the prev/next buttons */
a:hover.tabs-nav-previous, a:hover.tabs-nav-next {
text-decoration: none;
color: #FFFFFF;
}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 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 module.

Thanks so much for this much-needed and much-appreciated detailed explanation. Very well done. Would you mind adding a quick explanation as to how you should best use this to replace the default user registration in order to create a multi-step registration? Maybe anyone with more than a couple days of Drupal experience would know this... but for the fresh converts, it would be much appreciated...
To clarify...
replacing the user registration, while still taking advantage of modules like Loggintoboggan and Legal.
so, to be able to have legal as one of the steps in the form, and to have the fields generated by logintoboggan such as a double email field to be included in step 1 of the form....
first of all thanks for what you have explain ....
but i need to implement the multigroup functionality for unlimited group field adding support, which is making conflict with the cck_fieldgroup_tabs module,
so cann't able to add more group (i mean bundle of the field) when i m using tab style and editing it.....
plz do reply if u have come across like this problem or do u know something about it......
You stated back in Dec 2008 that this does not work for Drupal 6, do you know if this yet works for Drupal 6 now that it has been 7 months?
thats really great
but i wonder if i could add default cck fields like title or description to any group...
can you please give me you kind thoughts how can i do this...??
thanks...
Thanks David, this post saved the day.
Works perfectly to display content in multi-page without hassles of new node creation or work-flow things.
Hello everybody. First of all GREAT TUTORIAL. I tested it and it worked. And it is also, way much easier to complete than working with FAPI and stuff where you need programming skills.
I have a curiosity though: for example, we create a 4 or 5 tab form whith this method. How can I have one more tab that contains all the variables that a user inserted in each previous tab for review purposes before hitting the SUBMIT button? (maybe an Edit link near each secction would work great too) ?
Do you see any fast solution for doing this? If yes, I kindly ask you to guide me.
Thank you very much. Really appreciated.
All the best
Adrian
How would one put in a "review/confirm" page? When you start dealing in form that long. Many people forget what they've written or agreed to. I hope someone could help us here.
Thanks for the great tutorial. Really helped me out.
Hi,
Finally i could land up here.
You have mentioned-
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.
How can i have some notes under each tab. These will be formatted text under each tab.
Thanks.
thank for this its a real helpful article