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

1. The Web A-Team ...5, 6, 7... A Journey Through Drupal Multi-Step Forms Vamory TRAORE Technical Manager

3. Pagebreaks and Webforms

4. Form API

6. Breaking down forms logically

7. Handling different screen sizes (responsive web design)

9. Until Drupal 7, FAPI required ”hacks” to handle multistep forms

10. This can be handled at different level

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. http://www.jankoatwarpspeed.com/examples/webform_to_wizard/

16. Built around HTML markup

18. Does not handle complex forms / validation unless using specific ajax callbacks Valid for simple forms

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

24. Example: http://www.web-a-team.com/forms_presentation/node/1

27. Submit buttons are used to control which part of the form to be displayed

28. Final submit button processes data

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:

33. http://web-a-team.com/forms_presentation/examples/form_example/tutorial/8

34. http://web-a-team.com/forms_presentation/node/2

36. http://drupal.org/project/ctools (CTools Ajax example, wizard.inc)

37. http://preprocess.me/multi-steps-form-in-drupal-7-with-ctools

38. http://growingventuresolutions.com/blog/drupal-7-multistep-forms-using-variable-functions