Passing data through WFFM can be tricky.  For the example, I had a medical clinic that wanted to be able to put a form on any given page on one of their N number of hospital sites.  Each site had an special identifier on the site node itself.  How do I get that identifier to the custom Save Action we wrote?  The answer is: Hidden fields.

There’s a couple parts for this that are going to be important:

  1. The ViewModel
  2. The Rendering
  3. The WFFM Field

The ViewModel

The View Model is important in that it does all the heavy lifting.  When the form loads, the view model is initialized.  For a simple hidden field, we’re going to rip off the Single Line Text field as a start and pare it down.  The code below is the minimum required data to pull a field off our site node.  In reality, you could do anything you wanted here to grab data from Sitecore or any other data source.

You can see from the above code that we’re just setting the Value on Initialize. That’s pretty simple.

The Rendering

WFFM out of the box ships all the Views and stores them in the /Views/Form/EditorTemplates folder.  Adding in a view with a matching name “HospitalIdField.cshtml” to match the ViewModel name will cause MVC to wire them together.  Magic!  The CSHTML is even simpler than the ViewModel:

Reference your ViewModel, and call the built in Html.Hidden.  It’s like this was meant to be.  The BeginField above the Hidden line actually renders all the appropriate wrappers for the field on the page.

The WFFM Field

Finally, we need a Sitecore Item to pull all this together.  We can create this new WFFM Field in the following location: /System/Modules/Web Forms for Markters/Settings/Field Types/Custom like so:

It's almost as if they *want* us to make custom fields.

It’s almost as if they *want* us to make custom fields.

Our Field only has one value set, the MVC Type. We set this to our View Model we created in Step #1.

WFFM_DataView

That’s it. We’re done.  Oh?  You want to see it in action?  Sure!

Let’s take our “Tell a Friend” sample form that comes out of the box with WFFM:

WFFM_Designer

Notice we’ve added the Hospital ID field to the form and selected the Hospital ID field type as our type.

WFFM_ViewDropdown

(It appears under “Custom” down at the end)

When our form renders on the page, you’ll see four field sets:

WFFM_ShowAllHTML

The first three are from the existing Tell a Friend fields “Your name”, “Friend’s email”, and “Message.”  The fourth field is your Hospital ID field.

WFFM_ShowSpecificHTML

You can see after expanding it, that it is in fact a hidden input field, and has a value already populated. Let’s submit the form.

WFFM_Result

Voila! You can see the four fields come across in the custom Save Action I created, and the value from the last item is the value we put in the hidden field.

There you have it.  If you have any questions, drop them in the comments below!

Facebooktwittergoogle_plusredditlinkedinmail