Bizforms checkbox input nested within a label

Jacob Butler asked on September 5, 2016 16:18

Is it possible to define custom structure of form inputs so it conforms to bootstraps layout, which has inputs for radio and checkboxes nested within the label.

I'm aware of the Layout tab, but that doesn't allow fine enough control.

A second issue is that the checkbox outputs two labels, the second an empty one under the input, generated code as below:

<div class="checkbox">
    <label id="p_lt_ctl03_pageplaceholder_p_lt_WebPartZone2_ZoneProductRight_On_lineForm_plcUp_viewBiz_Marketing_lb" class="EditingFormLabel" for="p_lt_ctl03_pageplaceholder_p_lt_WebPartZone2_ZoneProductRight_On_lineForm_plcUp_viewBiz_Marketing_checkbox">If you wish to receive information about our products and services, check this box </label> 
    <div id="p_lt_ctl03_pageplaceholder_p_lt_WebPartZone2_ZoneProductRight_On_lineForm_plcUp_viewBiz_ncpmarketing" class="EditingFormControlNestedControl editing-form-control-nested-control">
        <span class="CheckBoxField checkbox">
            <input id="p_lt_ctl03_pageplaceholder_p_lt_WebPartZone2_ZoneProductRight_On_lineForm_plcUp_viewBiz_Marketing_checkbox" type="checkbox" name="p$lt$ctl03$pageplaceholder$p$lt$WebPartZone2$ZoneProductRight$On_lineForm$plcUp$viewBiz$Marketing$checkbox" checked="checked">
            <label for="p_lt_ctl03_pageplaceholder_p_lt_WebPartZone2_ZoneProductRight_On_lineForm_plcUp_viewBiz_Marketing_checkbox">&nbsp;</label>
        </span>
    </div>
</div>

bizform checkbox

Correct Answer

Richard Sustek answered on September 5, 2016 19:23

You won't be able to do this within the Layout or any other configuration on the field level. Luckily you can accomplish this by developing your own form control where you literally can have anything you want. You could also clone Kentico's form controls and modify the clones - will make it easier and faster to develop.

To develop a form control follow this article

0 votesVote for this answer Unmark Correct answer

Recent Answers

Chetan Sharma answered on September 7, 2016 12:29

Hi,

I disagree with Richard's solution here. I ran into this problem recently and reached out to the Kentico support. Luckily there is a solution to this without writing a custom form control.

First of all, Kentico accepted this as their bug. Checkbox control will generate its own label tag, so you don't need to be worried about it. The problem comes that it generates an empty code " " inside the label tag. I also faced issues regarding accessibility because of this auto-generated tag with " ". That is where we ran into this problem for the first time.

So here is the solution for this. I am quoting here Solution by their Support Engineer Eric Dugre. Eric helped me get this solution.

 I've heard back from the developers, and this additional label is intentional. There is no way to change the text by default, but you can do this without any code changes necessary.

To define this text, open the Form Controls module and edit the "Checkbox form control". In the Properties tab, add a new property with field name "Text"(It has to be text, no other name will work). You can add any Field Caption you would like. This property will now appear in the field definition in the Forms module, and the text that you enter in this field will render in the additional label.

That's it. Using this approach, you should not use a separate label tag as form control will generate it own its own.

I hope this helps. We have this solution running on one of our websites, so I know this is a correct solution.

Cheers, Chetan

7 votesVote for this answer Mark as a Correct answer