How to add placeholder text in a dropdown list on Sitecore Forms?

Question

What we wanted to do was to have placeholder text in our DDLs that:

• will trigger data validation if not changed from its default value
• is non-selectable after a choice has been made

Issues:

• Sitecore does not allow you to add an option to a DDL with a blank value.

How can we do this?

Answer 1

• Decide on a convention like 'placeholder' or 'null' as the Value of the default option you want to use

• Go into your webroot to: ...\Views\FormBuilder\FieldTemplates\DropdownList.cshtml and modify like this

   @foreach (var item in Model.Items)
   {
       if (item.Value.ToLowerInvariant() == "placeholder"){
           <option value="" selected="@item.Selected" disabled hidden>@item.Text</option>
       }else{
           <option value="@item.Value" selected="@item.Selected">@item.Text</option>
       }
   }
  

Note:

• set the attributes 'disabled' and 'hidden' (this will make it non-selectable after a choice is made)
• set 'value' to "" (value="" will trigger the validation when the submit button is pressed)