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.

Eudemonism

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.

Humbert

Hi guys, Does this still apply for WFFM 8.1 ? – Unhinge

Answer 2

If you are using MVC version of WFFM you need to add following as explained in approved answer

1- Create a class

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

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

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

        base.OnInit(e);
    }
}



public class ExtendedSingleLineTextField : Sitecore.Forms.Mvc.ViewModels.Fields.SingleLineTextField, IPlaceholderField
{
    [VisualCategory("Custom Properties")]
    [VisualProperty("Placeholder", 2)]
    [DefaultValue("")]
    public string PlaceHolder { get; set; }

}

2- Copy Single-Line Text from /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Simple Types/Single-Line Text to /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom set Assembly,Class and MVC Type

3-Create a new chtml file under \Views\Form\EditorTemplates ane name it ExtendedSingleLineTextField.cshtml it should be same name with the class name(ExtendedSingleLineTextField)

@using Sitecore.Forms.Mvc.Html
@using LendLease.Web.HtmlHelpers
@model  LendLease.Extension.Sc.WFFM.ExtendedSingleLineTextField


@using (Html.BeginField())
{
    @*@Html.TextBoxFor(m => m.Value, new { placeholder = Model.PlaceHolder })*@
    @Html.ExtendedBootstrapEditor("value",Model.PlaceHolder,"",new []{""})

}

add a html helper so you can inject placeholder i named it BootstrapEditorHtmlHelperExtension.cs

  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.Editor(expression, new
        {
            htmlAttributes = new
            {
                @class = (string.Join(" ", classes) + " form-control" + (string.IsNullOrEmpty(str) ? string.Empty : " " + str) + (helper.ViewData.Model is SingleLineTextField ? " dangerousSymbolsCheck" : string.Empty)),
                placeholder = placeholderText,
                style = (inlineStyle ?? string.Empty)
            }
        });
    }
}

Andes

what would be in case of multi-cultured website ? as a workaround we would go for dictionary item – Kellar

I used this method to create my placeholder text and it works great, but for some reason the text does not translate when I create another language version. The text I add to the field for the other language also overrides all other versions. Any ideas? – Meddle

Answer 3

I used the following code to create a Custom Field. And It works fine :)

internal class CustomType : SingleLineText
{
    [VisualProperty("Placeholder", 100)]
    [VisualCategory("Appearance")]
    public string placeholderText
    {
        get;
        set;
    }
    protected override void DoRender(System.Web.UI.HtmlTextWriter writer)
    {
        this.textbox.Attributes.Add("placeholder", this.PlaceholderText );

        base.DoRender(writer);
    }

}

Then i just created an Field Type Item under /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom and entered assembly and class details in the item.

Works like a charm...!!

Eudemonism