While working with Sitecore, I am sure you must have found WFFM (Web Forms For Marketers) been very useful be it a developer/marketer. However, there had been one thing that i always missed in the form – a Wizard interface especially when it comes to lengthy forms.
Before i jump into the solution, here are few other options that you may want to try out:
For Sitecore 8.2 and below:
you could build a custom WFFM Form template extending the OOTB WFFM Form to perform a wizard-based functionalities, based on the solution mentioned here: http://kirkegaard-at.blogspot.dk/2017/02/sitecore-enhancing-web-forms-for.html.
For Sitecore 9 and above:
you could create a Wizard interface Form, using the all NEW Sitecore Forms OOTB.
Js based Approach
1. Hide all the <fieldset> tags on the page except for the first tag.
2. Hide the “Submit” button and Insert 2 button that performs “Previous” and “Next” operations
3. Define js click events for “.next” and “.prev” button, to show and hide corresponding <fieldset> tags to browse through the wizard forms
4. On the final wizard form visible, ensure that the “Submit” button is made visible.
Here is the complete js code snippet for your reference:
Testing the Script
You can test the above script in your existing WFFM Form Page, using Chrome “Console” window as shown below:
Before you run the script, you need to take care of the following:
- Ensure that the WFFM Form has “Sections”
- If you have multiple WFFM Forms on the same page, you may want to define separate CSS class to target the form and update the script to target the appropriate form.
I hope this helps you convert/build a wizard form interface using a Sitecore’s OOTB WFFM.