Successfully reported this slideshow.

Multistep form

3,365 views

Published on

Multistep forms presentation. Drupal DropIn 12 Dec 2011 / Cap Gemini / London

Published in: Technology, Design
  • Be the first to comment

Multistep form

  1. 1. The Web A-Team ...5, 6, 7... A Journey Through Drupal Multi-Step Forms Vamory TRAORE Technical Manager
  2. 2. Multistep forms in Drupal 7 Different approaches: <ul><li>Using Jquery plugins
  3. 3. Pagebreaks and Webforms
  4. 4. Form API </li></ul>
  5. 5. Multistep forms: why? <ul><li>Better user-experience
  6. 6. Breaking down forms logically
  7. 7. Handling different screen sizes (responsive web design)
  8. 8. Creating complex forms </li></ul>BUT <ul><li>Depending on goal to achieve, this may require development
  9. 9. Until Drupal 7, FAPI required ”hacks” to handle multistep forms
  10. 10. This can be handled at different level </li></ul>
  11. 11. <ul><li>1) Using Jquery plugins </li></ul><ul><li>Various solutions based around the same concept, wrapping elements for each step around markup: </li><ul><li><fieldset>STEP 1</fieldset><fieldset>STEP 2</fieldset> </li></ul><li>Adding navigational elements, hiding form elements upon users request
  12. 12. A few examples (not applied to Drupal though): </li><ul><li>Form Wizard: http://thecodemine.org/
  13. 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/
  14. 14. http://www.jankoatwarpspeed.com/examples/webform_to_wizard/ </li></ul></ul>
  15. 15. <ul><li>1) Using Jquery plugins </li></ul><ul><li>Easy for themers
  16. 16. Built around HTML markup
  17. 17. Doesn't require server-side development </li></ul><ul><li>BUT </li><ul><li>Doesn't play well with server-side validation
  18. 18. Does not handle complex forms / validation unless using specific ajax callbacks </li></ul></ul>Valid for simple forms
  19. 19. <ul><li>2) Pagebreaks and Webforms </li></ul><ul><li>Most Drupal sites are using Webforms
  20. 20. There is a simple way to create multistep forms: pagebreaks
  21. 21. A page break is a simple element which divides the webform in steps
  22. 22. Easy to use, no coding required
  23. 23. Validation at each step
  24. 24. Example: http://www.web-a-team.com/forms_presentation/node/1 </li></ul>
  25. 25. 3) Form API <ul><li>In Drupal 7, the new Form API makes multi step forms easy to develop
  26. 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: </li><ul><li>The form step is saved in a value to handle navigation through pages: </li><ul><li>$form_state['page_num'] = 1
  27. 27. Submit buttons are used to control which part of the form to be displayed
  28. 28. Final submit button processes data </li></ul></ul></ul>
  29. 29. 3) Form API <ul><li>Using the same logic, it is possible to chain forms together and go beyond multistep forms: </li><ul><li>By creating specific forms with custom validation function at each steps
  30. 30. By creating conditional forms depending on answers at previous steps
  31. 31. By gathering all the data for these different steps and processing them in the final submit function
  32. 32. Demo:
  33. 33. http://web-a-team.com/forms_presentation/examples/form_example/tutorial/8
  34. 34. http://web-a-team.com/forms_presentation/node/2 </li></ul></ul>
  35. 35. References <ul><li>http://drupal.org/project/examples (Form example)
  36. 36. http://drupal.org/project/ctools (CTools Ajax example, wizard.inc)
  37. 37. http://preprocess.me/multi-steps-form-in-drupal-7-with-ctools
  38. 38. http://growingventuresolutions.com/blog/drupal-7-multistep-forms-using-variable-functions </li></ul>

×