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:
After adding pagebreak element, the page break will appears between two other form elements:
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
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!
Thanks for your time, this was a useful article.
Showing number of steps ?
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
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
Add something like the following code to a custom webform-form.tpl.php:
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?
Say, in 2nd step form, how to display values entered in 1st step form?
Hi! You can try to do
Hi!
You can try to do next:
create file - webform-form.tpl.php or webform-form-[nid].tpl.php.
Then place next code:
and do what you want.
Enjoy!
Here is how:
Not correct
@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
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...
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:
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
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
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
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
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
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
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
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?
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
answering my own question!
Yes you can.
Save and Exit to return later
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....
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
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???
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
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
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
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
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?
Is it possible to add a pagebreak component using hook_form_alter() with some code such as:
I can't get it to work.
breadcrumbs with hyperlinks to other pages
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
The "Webform Steps" module might be what you want. I haven't tried it, but it looks like a good idea.
Mobile devices
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
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
Maybe post questions like this in the issue que as a support request? anyway, a form alter should do:
With css float you can reorder the buttons visually of you want
How to Add captcha to last step
How to Add captcha to last step of multi-step webforms
I am working on a multistep form . I want to add captcha to last step of the form.
https://www.drupal.org
https://www.drupal.org/project/webform/issues/980394
Thank You,
Shashwat Purav