Last updated January 14, 2013. Created by akahn on October 22, 2008.
Edited by srees. Log in to edit this page.

With Webforms, it is possible to create forms that span more than one page. These forms are known as multistep, or multipage forms.

To create a multistep form, create the form elements you want to appear on your form. Then, add one or more elements of the pagebreak type. Set the weight for these elements so that they appear in between sections of elements that you want to be separated by page.

Here is a user selecting the pagebreak element type:
Choosing the pagebreak elementAfter adding pagebreak element, the page break will appears between two other form elements:
The pagebreak element in the element listWhen viewing the form, this element is rendered as a "Next page >>" button:

All of the subsequent form elements will appear on the next step of the form, after the user clicks submits this step.

If a pagebreak uses a conditional field that evaluates as false, subsequent components until the next pagebreak will be hidden. A pagebreak is considered the beginning of a new page, not the end of an old page, and as such the entire page is affected by a conditional on the pagebreak.

Note: Use caution when combining the pagebreak and file components. File components will not be submitted unless they are after the last pagebreak in the form.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Might be good to point out the save draft that feature that helps with drop offs from page breaks. I know that's been a constant issue for me as webform has matured.

Thanks for your time, this was a useful article.

Thanks for it !

Is it possible to add an information like "Step 1 of 4" ... to let know to the user how much steps he has to complete ?

Thanks for you help.

You could just add this as html markup on each page, and then style with css. Possibly it's difficult to do it any other way because they pages are not separated by "?=page1" etc in the URL bar.

You could even add a picture with a progress bar to give a graphical representation.

Joe

Add something like the following code to a custom webform-form.tpl.php:

<?php
$output_pagenum
= '<div class="page-count">Page '
                   
. '<b>' . $form['details']['page_num']['#value'] . '</b>' . ' of '
                   
. '<b>' . $form['details']['page_count']['#value'] . '</b></div>';
echo
$output_pagenum;
?>

There is work in progress to allow adding this using the Webform UI. See #258696: Multipage form - Page n of n (progress or percentage complete)

Say, in 2nd step form, how to display values entered in 1st step form?

Hi!
You can try to do next:
create file - webform-form.tpl.php or webform-form-[nid].tpl.php.
Then place next code:

<?php
print_r
($form['#parameters']['1']['storage']['submitted']['1'] )
?>
and do what you want.
Enjoy!

function HOOK_form_alter(&$form, &$form_state, $form_id) {
  // Continue if the form in question is a webform
  if (preg_match("/webform/i", $form_id)) {
    // Check to see if the textfield component "name" isset (from page 1) and if the markup component "my_markup" isset (from page 2)
    if (isset($form_state['input']['submitted']['name']) && isset($form['submitted']['my_markup']['#markup'])) {
      // Grab the value of the textfield component "name"
      $value = $form_state['input']['submitted']['name'];
      // Now I can modify the value in $form['submitted']['my_markup']['#markup'] however I want, using $value
    }
  }
}

@carsonw: In $form['submitted'] there are only submitted page values, so there you cannot access the components which are on step 2 which was not submitted yet. So still it is not clear how to render/access values submitted in first step on the second step page.

How would I populate the Default Value with input from the previous step? I thought I could manage with tokens (%post['first_name_field']) but it doesn't work. ie: I have a form with Page 1: First, Last name and email. Page 2: First, Last name and email; but I would like the fields on the second page to be populated with the response from the previous step (for non-authenticated users). Thanks!

I'm creating a multi-page form. I have the pagebreaks in place, but when you go to the next page, all the info from before the pagebreak still shows up. How do I hide the earlier information when the user goes to the next page?

Thanks!

Kevin

Edited: Found the solution here: http://drupal.org/node/1084464

Hi,
I'm using Drupal 7.
Creating forms that are all one page work fine.
But when I add page breaks, the forms works fine as you're scrolling through each page. But after clicking "Submit" at the end, an "unepexcted error" occurs.
Any ideas why this could be happening?
Thank you,
Jill

Hi,

I am using Drupal 6. I made a multistep form with 8 pages. How can I create some way of allowing the user to jump to specific pages with out having to click next page over and over?
So for instance Im on page 1 and I want to go directly to page 5 with out having to click Next Page 4 times..

Is there a way to do this?

Thanks in advance

Nico

I have a multistep form all with multiple choice questions. Depending on the answer given some questions should be skipped. Is that possible?

In both these cases it might be better to use CCK and the multistep module, as each page has a different URL, so you can skip between them easier. You can set it up so that the first step 'creates' the node, then all the subsequesnt steps 'edits' the node - which to the end user just looks like the different steps.

For answers which depend on other answers: I think you can do conditional fields with the webform module, but I also found there was a good conditional fields mod for CCK.

Joe

You can use conditional rules on page breaks, so if the condition is not true the page and the components on it will be skippped.

Theres also a module called webform conditional for using conditional rules for hiding/showing components based on other component in the same page.

can you save and exit a multipage form?
So that users can come back later and carry on where they left off.

answering my own question!
Yes you can.

Please tell me how you did this? I also have a multistep webform that does a skills survey for my company. When the form is submitted its gone... I've set the limit per user to 1 but I need the user to come back later and add details as they see fit and as time permits.

Thanks in advance, brand new to Drupal so its not clear where I set this up.

Brendan

Brendan,
Developer - http://www.ignitedcoder.com

I have a multistep form and when i click "Save Draft" button, my form is saved as draft also it remains on same page with the form data. When i logged out and login again i see the same form with previous data already present. Thus I am not able to submit another data.
As you have talked about save and exit feature I need it urgently . So please tell how you have done this feature?
I need a feature such that at any point of time I can come back to the form and edit and complete the remaining details of the form and submit.

I have a multiple page (10). I would like to have two optinos for the user - to go further ("Next page") and if he doesn't want go go further - to save a page.

Hi hrpo will you please elaborate about how you have achieved this type of functionality in detail. Thank you in advance waiting for your reply.

I have a multiple page (10 pages). People can post photos and comment it. And they can submit as many photos as they like (max. 10). I have the problem if people won't post 10 photos, but lest say just 5. I would like to have two options for the user - to go further ("Next page") and if someone doesn't want go go further - just save webform - that is submit only two (or whatever) pages or submit 10. How to add submit option (save) after every page break. Thx.

It appears to me that if an unauthenticated user clicks the back button on a multipage webform, he is taken all the way back to the beginning of the form with all data erased. Is that correct?

In my case, when you reload browser page at third step, you come back to first step with all data resetted.
I asked webform developers about this problem, i hope they give me some solution! :-)

Hello friedns , I want ask your help.
if I have several steps (multistep form) . how can I show specific step on start , if I have 3 steps , I want see second step on start :) Please help me

Is it possible to add a pagebreak component using hook_form_alter() with some code such as:

$form['submitted']['pagebreak'] = array(
  '#type' => 'pagebreak',
  //...
);

I can't get it to work.

I am working on a multistep form. How can you have a breadcrumbs of all pages with hyperlinks to each page. I would be good if the user can skip to from page 1 to page 7. Please let me know. Ginho

The "Webform Steps" module might be what you want. I haven't tried it, but it looks like a good idea.