Sitecore Web Forms for Marketers Extension

Wow ages passed since my last blog post but here i’m with something cool !

During that sleeping phase (let’s call it like that *.* ) I’ve worked on a module for Web Forms For Marketers with a colleague .

Brief overview for those who do not want to read the whole article:

  • This module gives you the possibility to hide WFFM Field/Section via Rules.
  • It’s opensource and on Github
  • Only works for ASPNET WebForms right now
  • Only tested on Sitecore 7.2 – Web Forms for Marketers 2.4 rev. 141008.
  • Please read the section Before installing.

Web Forms for Marketers

What a wonderful tool that is Web Forms for marketers !

As a marketer you can easily generate forms without calling your developers and use those forms with the whole Sitecore platform (Trigger a goal, Send a Email Campaign Message, Send users into an engagement plan, Send an email,…).

As a marketer but also as a developer ! why still creating forms yourself when you can do it with WFFM ? Are there still people doing a login component with a form asking for Login and password ?

I see you coming already ! It’s only for simple forms. What if we have complex validations or complex fields or complex rules !

Well, the module is pretty modular in fact (like Sitecore :p)  you can change the behavior (or add new behavior) of almost everything (I cannot say everything even if I would love to, I didn’t change everything so maybe there is something that we cannot change ^^).

If you want to know more about WFFM you can read the documentation about the module on SDN or you can send me emails/tweet/…

 

WFFM Extension module

What a wonderful tool that is Web Forms for marketers ! (i already said that *.*) but !

It comes with a lot of features OOTB and of course not the ones that you wanted 😉

That was our case, we wanted to do stuff that WFFM did not and so we wrote that module to solve our problems and we thought that maybe other people were also on the same case as us so we diffuse it !

Our issue : Hide field or section when a value is selected on a dropdown list

Well, that issue was quite easy to fix. With some javascript, the id of the field to hide, the id of the element which gives us the show/hide but… That is WFFM ! The id of today is maybe not the id of tomorrow… I mean by doing that we totally fucked up the big purpose of that module – Generate forms without the need of developer.That first solution was not really a solution…

Then, we saw the action « Hide element » on field or section. So depending on a rule (Let’s say that the querystring user=1212121 ; hide the element). That’s nice, but there are no rules saying : Where the fields value {is equal} to X .

Thanks, we are working on Sitecore, and creating a rule is easy. Our problem was to retrieve that value of the field and to do that, we chose to use Session, maybe not a good choice, still trying to remove that right now finding a better solution, but it was also fixing another issue (display a Thank you page with the value of the fields).

Well that’s nice but … The action is executed Server-Side so it means that when someone changes the value of the dropdown, it was not hiding or showing a field, because by default, the dropdown is not on AutoPostBack=True. From that, you can create a new field for the dropdown and put AutoPostBack=True and it works.

That solved our problem and we are still in the WFFM mood. The problem with that is that I don’t really like the page reload when I change the value of a dropdown.

So we decided to create our own action to hide Element via Javascript

Enough talk, the module itself

So, the module comes with 5 new fields:

  • CheckboxList OnChange
  • DropList OnChange
  • RadioList OnChange
  • Sessioned HiddenField
  • Sessioned SingleLineText

One action:

  • Hide With Javascript

Two Rules:

  • Where Session Field Value is {Equal / not Equal /…} to Value
  • Read Value from Session Variable

Before installing

You should have:

  • Web Forms for Marketers Installed
  • Analytics installed and set up correctly

The module extends some WFFM code. So if you already rewrote some code; please analyze the package first.

  • Form Render include our javascript.
  • Validations : We haven’t rewritten all the validations but the one which are the most popular:
    • ExtensionRegularExpression
    • Count Char
    • Required

If you use other validations, please add that code before the execution of your validation:

Installation

EDIT 18/07/2015 : Please download the package Wffm-Extension-1.2.zip & the conditional rendering-1.0.zip ;

You can download the package from github WFFM Extension Package folder then install it with merge. The package is the full package (Items & Bin + files) .

You can fork the project and link it to your project where you can put all your customization about WFFM.

WFFM Extension use jQuery; it checks first if jQuery is already loaded, if not; it will use the one from the module (jQuery 1.2.11).

Add the /webservices in the IgnoreUrlPrefix.

Making some rules

So now, the module is installed, you can begin to work with it!

Example: We have a form asking if you are member or not; depending on that he will ask your Client Number and then other informations (email, What stuff did you prefer, etc)

WFFMAreYouMember

As you can see here; I chose a Radio List OnChange for the Are you member choice; set the Session variable name to Member. 

So then let’s go on our Client Number

WFFMClientNumber

Except the fact that I added another validation (Numbers Only) I also set a new condition:

Where the fields member is equal to no

Hide Element with Javascript

member is the name of the session variable that I put on my radiolist onchange

And that’s all! Just save and publish; nothing more to do 😉 If you want to show/hide multiple fields, you can:

  • Create a section, add the rules hide/show on the section
  • Or add the rules on all the fields you want to hide/show

For the futur

First, I’d like to have some feedback from you guys; if the module is usefull or totally useless ^^ Please comment or tweet me / emails.

Next steps will be to make it available for WFFM MVC, more testing ! more features (Complex validations with rules; etc etc)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *