Creating multistep webforms

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 element

After adding pagebreak element, the page break will appears between two other form elements:
The pagebreak element in the element list

When 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.

Comments

Might be good to point out

doublejosh commented 22 November 2010 at 18:49

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!

joecanti commented 5 June 2011 at 14:59

Thanks for your time, this was a useful article.

Showing number of steps ?

laevensv@gmail.com commented 13 June 2011 at 09:32

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

joecanti commented 13 June 2011 at 13:58

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

fuerst commented 8 February 2012 at 12:59

Add something like the following code to a custom webform-form.tpl.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)

How to show values in previous step page, for anonymous user?

horaceho commented 20 June 2011 at 04:55

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

Hi! You can try to do

varyag-1 commented 27 November 2011 at 19:53

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

print_r($form['#parameters']['1']['storage']['submitted']['1'] )

and do what you want.
Enjoy!

Here is how:

carsonw

handsome / brilliant

commented 19 April 2013 at 19:48

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
    }
  }
}

Not correct

petr.f commented 20 September 2013 at 05:57

@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.

Getting multi-page field value from previous page

kylebehse commented 20 November 2013 at 23:52

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!

Use Conditional rules settings for showing/hiding component...

bisonbleu commented 24 September 2014 at 19:48

Every webform component has a Conditional rules fieldset where you can use a component's value from a previous page to show/hide a component from the current page.

For example, imagine there's a component of type select on page 1 which has a label Are you colour blind? and 2 options: Yes and No. On page 2 there's a component of type text where the user can enter his or her favourite colour. In the Conditional rules settings of this field, use the following settings:

Component: Are you colour blind?
Operator: Is one of
Values: yes

These settings will hide the What is your favourite colour? if Are you colour blind? is set to Yes on page 1.

:~: Senior Drupal Site Builder

I am curious as to where this

pal4life commented 2 December 2014 at 00:12

I am curious as to where this option is?
Are you referring to Conditionals on the form, but they can only show or hide values

Hide previous info

kevinclarkwy commented 15 July 2011 at 16:37

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

Getting errors after inserting page breaks

jillehd commented 6 September 2011 at 18:35

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

Add Shortcut to different pages on top

nico_g commented 7 December 2011 at 17:54

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 similar question

fictionindustries commented 15 December 2011 at 12:17

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

joecanti commented 8 February 2012 at 21:51

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

Use conditionals rules

deixadilson commented 30 March 2012 at 20:49

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.

save and return later?

olisb commented 6 October 2012 at 21:49

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

olisb commented 10 October 2012 at 21:59

answering my own question!
Yes you can.

Save and Exit to return later

IgnitedCoder commented 11 October 2012 at 20:42

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

Save and Exit feature....

dragon123 commented 12 November 2012 at 08:55

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.

Next page and save page

hrpo commented 13 December 2012 at 13:17

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.

Next page and save page???

dragon123 commented 17 December 2012 at 07:04

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.

Save option

hrpo commented 18 December 2012 at 21:06

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.

Multi-page and anonymous users

zkent commented 25 January 2013 at 21:05

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?

I have the same problem

Calcifer commented 30 January 2013 at 08:19

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! :-)

Show specific step

izotov.a commented 7 May 2013 at 12:42

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

Add a page break with hook_form_alter?

kylesmith commented 30 May 2013 at 20:36

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.

breadcrumbs with hyperlinks to other pages

ginho commented 13 September 2013 at 20:30

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

Webform Steps, for breadcrumbs

dan3h commented 13 February 2014 at 02:28

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

Mobile devices

Stephen Ollman

Canberra

commented 18 November 2014 at 01:33

When a webform that utilises the 'pagebreak' function on a mobile device (iPhone or Samsung) the user is unable to get past the first page.

Has anyone else experienced this?

Certified Drupal Site Builder 7 & 8

Pressing 'enter', returns to previous page

Anonymous (not verified) commented 8 June 2015 at 10:22

I'm facing the problem that when I have a webform with multiple pagebreaks, and the visitor wants to submit his or her answer on the second page by pressing 'enter', the 'previous' button is activated and the visitor is sent back to the previous page.
Any thoughts on how to fix this?

Maybe post questions like

keesje commented 17 June 2015 at 08:40

Maybe post questions like this in the issue que as a support request? anyway, a form alter should do:

/**
 * Implementation of hook_form_alter().
 */  
function agnl_enquete_fix_form_alter(&$form, &$form_state) {
  if (isset($form['#node']->type) && $form['#node']->type == 'webform') {
    // Move previous button after next button for enter key behaviour
    if (isset($form['actions']['previous']['#weight'])){
      $form['actions']['previous']['#weight'] = 11;
    }
  }
}

With css float you can reorder the buttons visually of you want