Website Development Company in Singapore
⟵ Resources

Create custom data attribute for Sitecore 9 Form Field

Speed up sitecore banner

Sitecore 9 attributes console

Sitecore Forms provides you default form field like Text, Single-line text, Multi-line text, Email, Telephone, Checkbox except this it is very easy to create our custom Sitecore form field and custom Sitecore form field attribute.

In this blog, we are going to discuss how to create custom Sitecore form field attribute in existing Single-line text.

  • Move to the location/sitecore/templates/System/Forms/Fields/Field and add CustomAttribute field with Single-Line Text

Select Field entry

  • Switch to Core db and go to this location /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Styling
  • Create duplication item of CssClass and rename it with CustomAttribute
  • Update FormLabel to Custom Attribute
  • Add BindingConfiguration to customAttribute

Selecting CustomAttribute details

  • Now go to this location “/sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings/SingleLineText/Details” in core DB and in ControlDefinitions field select CustomAttribute which you have created
  • Now create new custom view model CustomSingleLineViewModel in your code
   public class CustomSingleLineViewModel : StringInputViewModel 
     public string CustomAttribute { get; set; } 
     protected override void InitItemProperties(Item item) 
       CustomAttribute = StringUtil.GetString(item.Fields["CustomAttribute"]); 
     protected override void UpdateItemFields(Item item) 
  • Now go to this location ViewsFormBuilderFieldTemplatesand open cshtml
  • Update cshtml code and replace namespace
 @using Sitecore.ExperienceForms.Mvc.Html 
 @model Sitecore.Foundation.Forms.Fields.CustomSingleLineViewModel 
 <label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass custom-form__label" custom-attribute="@Model.CustomAttribute">@Html.DisplayTextFor(t => Model.Title)</label> 
 <input id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass form-control form-control__primary" type="text" value="@Model.Value" @if (Model.MaxLength > 0) { <text> maxlength="@Model.MaxLength" </text> } placeholder="@Model.PlaceholderText" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value) /> 
 @Html.ValidationMessageFor(m => Model.Value)
  • In master db, move into this location/sitecore/system/Settings/Forms/Field Types/Basic/Single-Line Text and update Model Type with new viewmodel

Selecting Single-line text

  • Go to Form explorer and create new form and drag Single-line text
  • Now you can see Custom Attribute field

Adding 'Test' entry in styling form


custom-attribute value is Test


This article originally appeared on SWATI GUPTA (SITECORE MVP) | BLOGS




Playing around with Sitecore 10 docker containers and my simple development framework version 3.0

How to restart Sitecore server via Sitecore user interface

Playing around with Sitecore 10.0.1 docker containers and my simple development framework version 3.1



Contact Us

Website Development Company in Singapore white logo
LowCarbonSG Logo
Terms & Conditions | Privacy Policy | Accessibility Statement

Apply Now!

Upload Resume (with a 2mb maximum file size)
Accepted file types: doc, docx, pdf, xps, Max. file size: 2 MB.
This field is for validation purposes and should be left unchanged.