Add asterik before required field in sitecore 9 forms

Question

I want to add asterik before required fields in sitecore 9 forms. What's the best way of achieving this ?

Answer 1

You can achieve using customize your \Views\FormBuilder\FieldTemplates\{Allfields}.cshtml.

---

Intro:

---

Basically All sitecore form fields Models are inheriting InputViewModel.

Like below for sample single line input field. This inherits InputViewModel

Sitecore.ExperienceForms.Mvc.Models.Fields.StringInputViewModel : InputViewModel<string>

All Input fields have Required property. Like shown below,

---

Implementation:

---

So you can implement like below, This will add asterisk if the field is mandatory

Add this under label section : @{if (Model.Required) {<p style="color:red">*</p>} }

   <!--SingleLineText.cshtml-->
    
        <label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)@{if (Model.Required) {<p style="color:red">*</p>} }</label>
        <input id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" 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" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)/>
        @Html.ValidationMessageFor(m => Model.Value)
    
    
    <!--Email.cshtml-->        
    
        <label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)@{if (Model.Required){<p style="color:red">*</p>} }</label>
    <input id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" type="email" 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" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)/>
    @Html.ValidationMessageFor(m => Model.Value)
    
    <!--Number.cshtml-->
    
    <label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)@{if (Model.Required) {<p style="color:red">*</p>} }</label>
    <input id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" type="number" value="@Model.Value.ToInvariantString()" min="@Model.Min.ToInvariantString()" max="@Model.Max.ToInvariantString()" step="@Model.Step.ToInvariantString()" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)/>
    @Html.ValidationMessageFor(m => Model.Value)

<!--You can add remaining fields also like above-->

---

Tested (WIth multiple page also)

---

1st page:

2nd page:

Answer 2

Sitecore Forms uses the standard MVC helper to add validation to a field: @Html.ValidationMessageFor(m => Model.Value) So, you can modify it in order to achieve the desired functionality as described in the following resource: https://stackoverflow.com/questions/8714178/mvc3-validation-unobtrusive-validation-asterisk-for-validation-message Sitecore Forms views can be found in the “\Views\FormBuilder\FieldTemplates” folder. Another solution that you mentioned is to use custom CSS class as described below: https://forums.asp.net/t/2035018.aspx?Show+Asterisk+By+Labels+for+Required+Fields+on+the+form+ You can modify, for example, the “\Views\FormBuilder\FieldTemplates\SingleLineText.cshtml” and “\Views\FormBuilder\FieldTemplates\DropdownList.cshtml” files for the “Single-line text” and “Dropdown list” fields accordingly. I attached an example with the Single-line text to the ticket. Please note that they just show how you can achieve the desired functionally, so you should modify all needed files depending on your needs.

Sitecore also submitted a wish with the product department to have a possibility to control this behavior in the “Forms” application or at least it should be documented how to achieve this. To track the future status of this wish, please use the reference number 219239. More information about public reference numbers can be found here: https://kb.sitecore.net/articles/853187