Convert a Sitecore WFFM Form to Wizard Form (Js based Approach)


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

If none of the above options seems to working out for you, here is the javascript based approach that you could try.

Background: This approach takes advantage of the “Sections” that you can build in WFFM forms. While building out the form, you can define the Wizard pages as independent sections. The WFFM “Sections” translates to HTML <fieldset> tags on the page when rendered on the page. The javascript will take care of injecting a “Previous” and “Next” button to scroll through the <fieldset> tags or section whereby giving you a Wizard interface.

WFFM Section.png

Approach: All you need is a WFFM form with “Sections” defined and a javascript injected on the page. You could inject the javascript through various ways:

  1. Javascript file/snippet injected as a part of the WFFM hosting page
  2. Javascript file/snippet injected as a part of the WFFM Form template by extending the OOTB WFFM Form template by following the approach mentioned here and calling it “WFFM Wizard Form“. The extended Form Template will take care of inserting a custom javascript that converts the WFFM Form to a wizard

The custom javascript performs the following actions:

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:

WFFM Wizard Script Execution - Console App.png

Before you run the script, you need to take care of the following:

  1. Ensure that the WFFM Form has “Sections”
  2. 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.

WFFM Wizard Buttons

WFFM Form Buttons.png

 

I hope this helps you convert/build a wizard form interface using a Sitecore’s OOTB WFFM.

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Advertisements
Advertisements
%d bloggers like this: