How to create custom Field type in Sitecore Web Form for Marketer 8.1

Question

In one of my Sitecore Project, I have to create a Custom field in WFFM. Field type must have Two Textbox and user can enter 5 digit in each text box (Example xxxxx xxxxx, as we enter credit card details in 4 text box).

As per the ref document “https://sdn.sitecore.net/upload/sitecore6/64/presentation_component_cookbook-a4.pdf” I have crated below code :-

Crated a .cs Class

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using Sitecore.Form.Web.UI.Controls;
using System.ComponentModel;
using System.ComponentModel.Design;

namespace Web.MySite.Fields
{
    [Designer("System.Windows.Forms.Design.ParentControlDesigner, System.Design", typeof(IDesigner))]
    public class SocialSecurityNumber : SingleLineText
    {

        private static readonly string baseCssClassName = "scfSingleLineTextBorder";

        protected TextBox firstPart;protected TextBox lastPart;

        public SocialSecurityNumber() : this(HtmlTextWriterTag.Div)
        {
            firstPart = new TextBox();
            lastPart = new TextBox();
        }

        public SocialSecurityNumber(HtmlTextWriterTag tag) : base(tag)

        {
            this.CssClass = baseCssClassName;
        }

        protected override void OnInit(EventArgs e)
        {
            SetCssClasses();
            SetTextBoxeWidths();
            SetMaxLengths();
            SetTextBoxModes();
            AddChildControls();

            base.OnInit(e);
        }

        private void SetCssClasses()
        {
            help.CssClass = "scfSingleLineTextUsefulInfo";
            title.CssClass = "scfSingleLineTextLabel";
            generalPanel.CssClass = "scfSingleLineGeneralPanel";
        }

        private void SetTextBoxeWidths()
        {
            firstPart.Style.Add("width", "40px");

            lastPart.Style.Add("width", "50px");
        }

        private void SetMaxLengths()
        {
            firstPart.MaxLength = 3;

            lastPart.MaxLength = 4;
        }

        private void SetTextBoxModes()
        {
            firstPart.TextMode = TextBoxMode.SingleLine;

            lastPart.TextMode = TextBoxMode.SingleLine;
        }

        private void AddChildControls()
        {
            Controls.AddAt(0, generalPanel);
            Controls.AddAt(0, title);

            generalPanel.Controls.Add(firstPart);


            generalPanel.Controls.Add(lastPart);
            generalPanel.Controls.Add(help);
        }


    }

    public class SocialSecurityNumberModel : Sitecore.Forms.Mvc.ViewModels.Fields.SingleLineTextField
    {


    }


}

Then I have Created a BootstrapEditorHtmlHelperExtension.CS and Crated a .CSHTML:-

using Sitecore.Forms.Mvc.Interfaces;
using Sitecore.Forms.Mvc.ViewModels.Fields;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace Web.MySite.Extensions
{
    public static class BootstrapEditorHtmlHelperExtension
    {
        public static MvcHtmlString ExtendedBootstrapEditor(this HtmlHelper helper, string expression, string placeholderText, string inlineStyle, string[] classes)
        {
            var str = string.Empty;
            var viewModel = helper.ViewData.Model as IViewModel;
            if (viewModel != null)
            {
                var styleSettings = viewModel as IStyleSettings;
                if (styleSettings != null)
                {
                    str = styleSettings.CssClass;
                }
                if (string.IsNullOrEmpty(placeholderText))
                {
                    placeholderText = viewModel.Title;
                }
            }

            return helper.TextBox(expression,null, new
            {

                    @class = (string.Join(" ", classes) + " form-control col-lg-2" + (string.IsNullOrEmpty(str) ? string.Empty : " " + str) + (helper.ViewData.Model is SingleLineTextField ? " dangerousSymbolsCheck" : string.Empty)),
                    placeholder = placeholderText,
                    style = (inlineStyle ?? string.Empty)

            });
        }



    }



}

SocialSecurityNumberModel.CSHTML

@using Sitecore.Forms.Mvc.Html
@using Web.MySite.Extensions

@model  Web.MySite.Fields.SocialSecurityNumberModel

@using (Html.BeginField())
{
 @Html.ExtendedBootstrapEditor("value", " ", "width:50%", new[] { "" }) 
 @Html.ExtendedBootstrapEditor("value", " ", "width:40%", new[] { "" }) 

}

After it ,I have Crated a Custom Field in Sitecore and gave Below dll ref. in

Assembly 
Sitecore.Forms.Custom.dll

Class
Sitecore.Form.Web.UI.Controls.SingleLineText

MVC Type 
Web.MySite.Fields.SocialSecurityNumberModel,Web.MySite

I am getting both the text box but ID is same for Both.

ID=wffm1755f6ce241245b7a1183288954ce0e7_Sections_0__Fields_0__value

Answer 1

You don't have to create an ASCX file for creating a custom field for WFFM First of all you need to create an item of type:

/sitecore/templates/Web Forms for Marketers/Field Type

If you are using WFFM with MVC you need to fill MVC Type field.

You can look with Dot Peek how other Sitecore Wffm field are build.

You need to create your own class like in this example:

https://sitecorecorner.com/tag/wffm-custom-field/

http://elenazlateva.blogspot.ro/2012/09/custom-field-type-for-sitecore-web.html

https://divamatrix.wordpress.com/2011/12/20/wffm-custom-field-type-made-easy/