Web Forms For Marketters (WFFM) Html input tag with placeholder attribute

Question

I have a requirement in which I'm implementing sitecore WFFM to create a form. The page has HTML input tags with Placeholder attribute. I have to render the WFFM SingleLineInput box to a input tag with placeholder attribute. What should I do?

I know that the SingleLineText class is define in the Sitecore.Form.Web.UI.Controls dll.

Answer 1

You can achieve this by extending SingleLineText with an additional property to store the placeholder's text value. Once the property is in place, you'll need to override the OnInit method and inject the placeholder attribute if one happens to be set.

public interface IPlaceholderField
{
    string PlaceholderText { get; set; }
}

Here is the custom implementation of SingleLineText

[ValidationProperty("Text")]
public class SingleLineText : Sitecore.Form.Web.UI.Controls.SingleLineText, IPlaceholderField
{
    [VisualCategory("Custom Properties")]
    [VisualProperty("Placeholder Text", 2)]
    [DefaultValue("")]
    public string PlaceholderText { get; set; }

    protected override void OnInit(EventArgs e)
    {
        // Set placeholder text, if present
        if (!String.IsNullOrEmpty(PlaceholderText))
        {
            textbox.Attributes["placeholder"] = PlaceholderText;
        }

        base.OnInit(e);
    }
}

Finally, you will need to create a new field item definition under /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom/ and set the assembly to use the class above. Your new placeholder property should appear under a "Custom Properties" category when you have the field selected in the Form Designer.