How to prepopulate/prefill WFFM form field in Sitecore 8.2?

Question

We have WFFM from, which has input fields like textbox and dropdownlist. Where user can submit his/her personal settings information.

Once user revisit site, can see saved personal data and update it.

We are using API service for CRUD operation and storing user personal data in standalone database.

How to data-bind/pre-fill input fields into WFFM form?

Sitecore 8.2 update 5.

Thanks for yours valuable suggestion.

Answer 1

We need to create custom control then we can pre-fill/databind our WFFM form.

Here we are adding custom SingleLineTextField. Below are steps:

1) Create custom control designer class, where we can add our custom property

namespace xxx.Foundation.Forms.WFFM
{
    [Designer("System.Windows.Forms.Design.ParentControlDesigner, System.Design", typeof(IDesigner))]
    public class CustomTextBox : RegexInputControl
    {
        private static readonly string baseCssClassName = "scfSingleLineTextBorder";

        [VisualCategory("Custom Properties")]
        [VisualProperty("Identifier", 2)]
        [DefaultValue("")]
        public string Identifier { get; set; }

        [VisualCategory("Validation"), VisualProperty("Minimum Length:", 1000), DefaultValue(0)]
        public int MinLength
        {
            get;
            set;
        }

        [VisualProperty("Maximum Length:", 2000)]
        [DefaultValue(256)]
        [VisualCategory("Validation")]
        public int MaxLength
        {
            get
            {
                return this.textbox.MaxLength;
            }
            set
            {
                this.textbox.MaxLength = value;
            }
        }

        [VisualProperty("CSS Class:", 600)]
        [VisualFieldType(typeof(CssClassField))]
        [DefaultValue("scfSingleLineTextBorder")]
        public new string CssClass
        {
            get
            {
                return base.CssClass;
            }
            set
            {
                base.CssClass = value;
            }
        }

        public CustomTextBox(HtmlTextWriterTag tag): base(tag)
        {
            this.MaxLength = 256;
            this.MinLength = 0;
            this.CssClass = CustomTextBox.baseCssClassName;
        }

        public CustomTextBox(): this(HtmlTextWriterTag.Div)
        {
        }

        protected override void OnInit(EventArgs e)
        {
            this.textbox.CssClass = "scfSingleLineTextBox";
            this.help.CssClass = "scfSingleLineTextUsefulInfo";
            this.generalPanel.CssClass = "scfSingleLineGeneralPanel";
            this.title.CssClass = "scfSingleLineTextLabel";
            this.textbox.TextMode = TextBoxMode.SingleLine;
            this.Controls.AddAt(0, (Control)this.generalPanel);
            this.Controls.AddAt(0, (Control)this.title);
            this.generalPanel.Controls.AddAt(0, (Control)this.help);
            this.generalPanel.Controls.AddAt(0, (Control)this.textbox);
        }
    }
}

2) Create MVC Type class to data-bind custom control. Here we can apply our binding logic.

namespace xxx.Foundation.Forms.WFFM
    {
        public class CustomTextBoxMVC : SingleLineTextField
        {
            public CustomTextBoxMVC()
            {

            }

            public override void Initialize()
            {
                //Here can do data-bind 
                this.Value = "My Value";
            }
        }
    }

3) Go to below path and add new field type.

/sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom/

Here in this example we are adding CustomTextBox. Specified Assembly,Class,MVC Type field under Data section.

4) WFFM form designer choose newly created custom control.