1

Is it possible to add custom name and id "values" to the list items in the Experience forms "radio button list"?

for now, the name is Sitecore generated guid

We can have custom labels and values but I want the <input> tag HTML to look like :-

<label class="">
    <input type="radio" 
        name="custom_text" 
        id="custom_text" 
        value="some_static_text_value"/>
    some_custom_label
</label>
1

1 Answer 1

0

Yes, You can customize or extend Sitecore forms elements as per your need. To modify the HTML you can copy RadioButtonList.cshtml file from \Views\FormBuilder\FieldTemplates\ folder.

  1. Create folder structure as \Views\FormBuilder\FieldTemplates in solution and place RadioButtonList.cshtml file and update as bellow.
@using Sitecore.ExperienceForms.Mvc.Html
@model Sitecore.ExperienceForms.Mvc.Models.Fields.ListViewModel

<label class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
@{
    var i = 1;
}

@foreach (var item in Model.Items)
{
    <label class="">
        <input type="radio"
               name="@Model.Name"
               id="@(Model.Name + "_" + i)"
               value="@item.Value" />
        @item.Text
    </label>
    i++;
}
@Html.ValidationMessageFor(m => Model.Value)

  1. Set up the radio button list in the form.

enter image description here

Html output:

<label class="">
        <input type="radio" name="custom_text" id="custom_text_1" value="some_static_text_value_1">
        some_custom_label_1
</label>

<label class="">
        <input type="radio" name="custom_text" id="custom_text_2" value="some_custom_label_2">
        some_custom_label_2
</label>
2
  • Thanks for the detailed instruction. It was super simplified and easy to implement.
    – Jay B
    Feb 1, 2023 at 16:35
  • I'm glad it solve your issue. You can mark the answer as accepted. Feb 1, 2023 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.