Sitecore – Multistep forms in Webforms for Marketers: Part 1

Here at Delphic Sage, we’re constantly evolving our marketing tactics from learnings gained through A/B and multivariate tests to improve lead quantity and quality. Sitecore’s Webforms for Marketers (WFFM) module usually provides enough of an agile environment for our marketers to run their various tests but it does have its limitations when complexities are added.¬†When our marketing team recently asked if we could do a new type of A/B test involving multi-step WFFM forms on landing pages, I gave them my usual annoying response of, “With enough budget, we can do anything. ” After a strategy session, we all agreed not to make a large investment at this stage of testing, and instead, focused on a solution that allowed us to launch quickly.

While working out possible solutions, it was important to balance the overall amount of time spent between reporting, front-end development, back-end development, QA and test setup/administration time. I came up with a solution that required some front-end development time for each test, minimal additional setup/administration, a one time back-end development effort, and no changes to our reporting process. Awesome!

My solution to creating a quick multi-step landing page WWFM module was simple:

Part 1 (Outside of WFFM)

  • Create the first step of the form as a Sub-Layout (.ascx, User Control)
  • Set the submit button of the first step to redirect to the second (final) step with the values of the first step’s fields in the querystring
  • Create a page in Sitecore and attach the Sub-Layout as part of the Presentation

Part 2 (Using WFFM)

  • Add a hidden field type to Webforms for Marketers
  • Within the hidden field class set the field values from the querystring or cookies
  • Create a WFFM form for the second step (final step), with hidden fields that match the querystring values that were getting passed from step one
  • Submit the values on the final step of the form

The user’s path through the multi-step form:

  • User arrives on the landing page with the custom built user control
  • The user submits that first form
  • The user then arrives at the second step of the form with the hidden fields automatically setting their values via the querystring
  • From here, the user submits the form; the values of the visible fields and the hidden fields are saved into WFFM and passed into the CRM via a custom save action

We wanted to launch quickly and gain knowledge through testing before making any large scale changes to our landing page templates, and this solution allowed us to do just that.

Continue on to Part 2 about the Hidden Form field.

« Prev Article
Next Article »