How to wrap HTML around checkboxes in bizform?

In the field definition on the form you can do this there should be a Content before and after

That was my initial thought too, but I believe that wraps the entire control, not each item in the control.

Greg, you're right, this wrpas the whole control. In addition, you can modify the Item transformation to wrap some HTML in there, but that only has an impact on the label of the checkbox.

Looking at your requiremetn of 'I've been asked to style the checkboxes that it generates, and to do so, I need to wrap each with some HTML.', I woudl have thought that you should be able to do this with single element around the whole control, but I suppose it depends on how you're trying to style it?

Correct, Matt. I'm actually trying to apply pre-existing styling that was done on another area of the site. It's rather complex and, while it's possible (although unlikely) I could find another way to do it that doesn't require individual HTML wrappers, that would require recoding quite a few other areas for consistency. which I don't have the authorization to do.

If you don't want to wrap it around the individual form control, then have a general "form" wrapper and style it that way. This is the most common approach and how we style all of our Kentico sites. It does however, require you to know what Kentico renders for each control type but it can be done pretty easy.

Let me explain what I'm actually trying to style so that it's a little easier to understand. Each checkbox, in this case, has a script listener which manipulates a wrapper class in order to create two pseudo-elements of the wrapper that are absolutely positioned relative to each individual checkbox/label in order to create a particular visual cue. I need the wrapper to hold the class and to position these elements relative to each checkbox/label pair. What is currently in-place on other custom forms on the site is similar to the following (though I've changed classes and added inline styling for clarification). I didn't code this, but without going through another design-related QC cycle, I'm stuck working with it. Heh.

<div class="form-item">
    <div class="checkbox checkbox-active" style="position:relative;">
        <input type="checkbox" name="checkbox-name" id="checkbox1" checked>
        <label for="checkbox1">Checkbox</label>
    </div>
    <div class="checkbox" style="position:relative;">
        <input type="checkbox" name="checkbox-name" id="checkbox2">
        <label for="checkbox2">Checkbox</label>
    </div>
</div>

If you're using the out of the box form that is built by Kentico without creating a custom layout, this isn't possible. If you create a custom form layout, you can get closer but you still won't get the markup you're showing without customizing the form controls themselves.

The default markup Kentico renders for any form control has a div wrapper on it. So best case scenario would be something like this:

<div class="form-container">
    <div id="first-name" class="form-item">
        <div class="FieldLabel">
            <label class="EditingFormLabel">First Name</label>
        </div>
        <div class="EditingFormValueCell">
            <div class="EditingFormControlNestedControl editing-form-control-nested-control" type="text">
                <input type="text" maxlength="200" class="first-name-field">
           </div>
        </div>
    </div>
</div>

Note each of the actual labels and input controls have div wrappers on them. This is out of the box functionality. As I mentioned, you can adjust the layout but there are some elements you cannot modify unless you create your own custom form control to handle this.

That's actually not the case with checkboxes in Kentico. If it was, I could work with it, but as it stands, there are no divs around individual pieces like you mention. Here's the actual code output by Kentico for 2 checkboxes (with the IDs and classes shortened for readability). It just puts a br between them.

<div id="ctl00_..." class="EditingFormControlNestedControl...">
    <span id="ctl00_..." class="checkbox checkbox-list-vertical">
        <input id="ctl00..." name="ctl00$..." value="Test 2" type="checkbox">
        <label for="ctl00...">Test 2</label><br>
        <input id="ctl00..." name="ctl00$..." value="Test Newsletter" type="checkbox">
        <label for="ctl00...">Test Newsletter</label>
    </span>
</div>

Ahh my misunderstanding, I thought you were working with just the field label and not each of the individual checkbox text fields.

Solution is on the multi-select checkbox field in the form, set the repeat layout to "Table" vs. "Flow". Then add the Online form webpart to your page template, select the form, and set the Output filter to checked and at the very bottom of the webpart Output filter configuration set the convert table tags to divs for "All code except blocks marked class='_nodivs'". This will initially render them in a

format, then convert table, rows and columns to divs.

If you're using widgets, then go to the Widgets app and edit the "Online form" widget. On the System Properties tab, select the "EnableOutputFilter" field and check the "Display field in the editing form" and save. Do the same for the "OutputConvertTablesToDivs" field. All new widgets added to your pages will have these options enabled now and allow you to get the layout you're looking for.