CF7 form with image checkboxes

Here’s an example of pure CSS checkbox styling in Contact Form 7 form. The goal was to replace checkboxes with selectable images.

The checkboxes show their state and are fully accessible with screen readers.

You can easily adjust the size and style of the image-checkboxes and add styles for :disabled pseudoclass.

The form configuration is shown below.

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<!-- To have your checkboxes accessible, don't forget to wrap them with fieldset and provide legend -->
<fieldset>
<legend>Pick your fruit</legend>

[checkbox checkbox-238 class:imgchkbox use_label_element "Oranges" "Bananas" "Strawberries"]

</fieldset>

<style>
/* replace the standard checkbox control with custom box */
.imgchkbox input[type="checkbox"] {

/* first hide the default control */
  appearance: none;
  background-color: #fff;
  margin: 0; 

/* Now style the box for image */
  font: inherit;
  color: currentColor;
  width: 5em;
  height: 5em;
  border: 0.15em solid lightgray;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  background-color: lightgray;
  background-size: contain;
  transition: all 0.3s ease-out;
}

/* Visually change the input when checked */
.imgchkbox input[type="checkbox"]:checked {
  filter: brightness(0.7);
  outline: 2px red solid;
}

/* Set images as our checkboxes background */
.imgchkbox .wpcf7-list-item:first-child input[type="checkbox"] {
background-image: url("https://bon.uw.edu.pl/wp-content/uploads/2022/08/oranges.jpg");
}
.imgchkbox .wpcf7-list-item:nth-child(2) input[type="checkbox"] {
background-image: url("https://bon.uw.edu.pl/wp-content/uploads/2022/08/bananas.jpg");
}
.imgchkbox .wpcf7-list-item:last-child input[type="checkbox"] {
background-image: url("https://bon.uw.edu.pl/wp-content/uploads/2022/08/strawberries.jpg");
}

.imgchkbox .wpcf7-list-item {
  display: block;
}
.imgchkbox .wpcf7-list-item label {
  display: flex;
  align-items: center;
}
.imgchkbox .wpcf7-list-item label .wpcf7-list-item-label {
  margin-left: 1em;
}
</style>

[submit "Submit"]