Checkbox group - images as options

Hi,

We have a checkbox group with 3 options which at present are in text format. What we'd like is to be able to replace those options with graphical representations. Can we simply replace the text inside the label text with an image or is there a better/preferred method to achieve this? Also what would the implications be for management of this form if we made that edit?

Thanks in advance.

Hi qmeister,

Try putting image links in the label boxes - you may find it breaks some of the CSS/layout. If it does then using a Custom Code element will give you more more flexibility with the layout.

Bob

Hi Bob,

I tried replacing the text in the label tag with an image but it was stripped out. I tried this both in the code and also in the designer tab of the editor.

You mention using a custom code element instead. Are you able to talk me through that method, please? I've not used custom code elements before.

Many thanks

Hi qmeister,

The simplest way to do this is to create the checkbox group as usual. View the form, then copy the HTML of that part of the form and paste it back into a Custom Code element and edit as needed. You need to remove the Custom Code element title and set Pure Code to Yes.

<div class="form-group gcore-form-row" id="form-row-fruit_picker">
  <label for="fruit_picker" class="control-label gcore-label-left gcore-label-checkbox">Pick a fruit</label>
  <div class="gcore-input gcore-display-table" id="fin-fruit_picker">
    <div class="gcore-single-column" id="fclmn">
      <div class="gcore-checkbox-item" id="fitem">
        <input name="fruit_picker[]" id="fruit_picker" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="apple">
        <label class="control-label gcore-label-checkbox" for="fruit_picker">Apple <img src='/images/apple.png' /></label>
      </div>
      <div class="gcore-checkbox-item" id="fitem1">
        <input name="fruit_picker[]" id="fruit_picker1" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="orange">
        <label class="control-label gcore-label-checkbox" for="fruit_picker1">Orange <img src='/images/orange.png' /></label>
      </div>
      <div class="gcore-checkbox-item" id="fitem2">
        <input name="fruit_picker[]" id="fruit_picker2" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="banana">
        <label class="control-label gcore-label-checkbox" for="fruit_picker2">Banana  <img src='/images/banana.png' /></label>
      </div>
    </div>
  </div>
</div>

Bob

PS You can’t add the link to the label because of a little bug in ChronoForms. It breaks the line on the second = whereas it should ignore any after the first one.