Multistep form
?Download as ODP, PDF?
1 like?1,588 views
There are three main approaches to creating multi-step forms in Drupal: 1) Using jQuery plugins which wrap form elements in HTML for each step but don't integrate with server-side validation. 2) Using pagebreaks in Webforms which provides a simple way to divide forms into steps with validation at each step. 3) Leveraging Drupal 7's improved Form API which allows data to persist across pages through $form_state, enabling complex multi-step forms with conditional logic and gathering final submission data.
Multistep form
- 1. The Web A-Team ...5, 6, 7... A Journey Through Drupal Multi-Step Forms Vamory TRAORE Technical Manager
- 2. Multistep forms in Drupal 7 Different approaches: Using Jquery plugins
- 4. Form API
- 5. Multistep forms: why? Better user-experience
- 6. Breaking down forms logically
- 7. Handling different screen sizes (responsive web design)
- 8. Creating complex forms BUT Depending on goal to achieve, this may require development
- 9. Until Drupal 7, FAPI required hacks to handle multistep forms
- 10. This can be handled at different level
- 11. 1) Using Jquery plugins Various solutions based around the same concept, wrapping elements for each step around markup: <fieldset>STEP 1</fieldset><fieldset>STEP 2</fieldset> Adding navigational elements, hiding form elements upon users request
- 12. A few examples (not applied to Drupal though): Form Wizard: http://thecodemine.org/
- 13. How to Create A Multi-Step Signup Form With CSS3 and jQuery: http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/
- 15. 1) Using Jquery plugins Easy for themers
- 16. Built around HTML markup
- 17. Doesn't require server-side development BUT Doesn't play well with server-side validation
- 18. Does not handle complex forms / validation unless using specific ajax callbacks Valid for simple forms
- 19. 2) Pagebreaks and Webforms Most Drupal sites are using Webforms
- 20. There is a simple way to create multistep forms: pagebreaks
- 21. A page break is a simple element which divides the webform in steps
- 22. Easy to use, no coding required
- 23. Validation at each step
- 25. 3) Form API In Drupal 7, the new Form API makes multi step forms easy to develop
- 26. Thanks to better data persistance and ability to add custom values to $form_state , no need to hack a form to create multistep forms: The form step is saved in a value to handle navigation through pages: $form_state['page_num'] = 1
- 27. Submit buttons are used to control which part of the form to be displayed
- 28. Final submit button processes data
- 29. 3) Form API Using the same logic, it is possible to chain forms together and go beyond multistep forms: By creating specific forms with custom validation function at each steps
- 30. By creating conditional forms depending on answers at previous steps
- 31. By gathering all the data for these different steps and processing them in the final submit function
- 32. Demo:
- 35. References http://drupal.org/project/examples (Form example)
- 36. http://drupal.org/project/ctools (CTools Ajax example, wizard.inc)