mobile keyboard types in wffm mvc using html5 input types

Question

I have been tasked with making our Sitecore MVC WFFM forms more mobile friendly by adding the HTML5 Input Type so that different mobile keyboards are displayed depending on what field type is active. Through research I have seen examples of doing so, but not for the MVC flavor of WFFM. I know that a custom field type will be required, but the only examples I have seen are for non-MVC forms. Has anyone gone through this exercise and found a solution?

Answer 1

The .cshtml files for the for the WFFM fields are available to be updated.

To change the view of a WFFM MVC field:

1. In the Content Editor, in the content tree, in the Simple Types, List Types, or Complex folder (sitecore/System/Modules/Web Forms for Marketers/Settings/Field Types) click the field type item that you want to change the view of.
2. In the right pane, in the Data section, in the MVC Type field, find the class name of the item that you want to change the view of.
3. In the \Website\Views\Form\EditorTemplates folder of your Sitecore installation, find the .cshtml file that corresponds to the class name from step 2. For example, for the CheckboxField class, the file name and extension is: CheckboxField.cshtml.
4. Edit the relevant .cshtml file to change the view, in this case to set the input types.
5. Deploy the updated .cshtml files to your CD environment.

The underlying controller for the field can also be customized in necessary or custom field types can be created.

See the Customize an MVC field type article for more detail