Web Forms for Marketers (WFFM) Html input tag with placeholder attribute

Question

I have a requirement in which I implement sitecore WFFM to create a form. The page has HTML tags with the Placeholder attribute. I have to map the WFFM SingleLineInput field to an input tag with the placeholder attribute. What should I do?

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

Answer 1

You can achieve this by extending SingleLineText an additional property to preserve the text value of the placeholder. When the property is in place, you need to override the OnInit method and enter the placeholder attribute, if set.

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

Here is a 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 position definition in the /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom/ section and set up the assembly to use the above class. Your new placeholder property should appear in the Custom Properties category if you have a field selected in the form designer.

Answer 2

If you are using the MVC version of WFFM, you need to add the following as described in the 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 its name is ExtendedSingleLineTextField.cshtml, it should be 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 html helper so you can embed 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) } }); } } 

Answer 3

I used the following code to create a custom field. And it works great :)

 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 a field type element in the / sitecore / system / Modules / Web Forms section for marketers / settings / field types / custom and entered the assembler and class data into the element.

Works like a charm ... !!