How to add HTML elements to Contact Form 7 (Multi Select Checkbox)

You can place HTML form elements in Contact Form 7 plugin form editor. Yes, that is correct.

The example shows multi-select checkboxes containing product images and titles wrapped inside a DIV element. The code below is more a guideline as it’s only proving a concept. The most important thing to have in mind is that the name property should be placed inside the email tab as a shortcode (Ex. if you have <input type=”checkbox” name=”ABC” value=”ABC”>, in the mail tab you should place [ABC] shortcode. Those values are also available through the CF7 filters.

<div>
  <input type="checkbox" name="productChecklist[]" value="ABC">
  <span class="abc">ABC<span>
  <img src="https://t.com/shop/image.jpg" alt="img" class="img-responsive"><br>
  <p>Lorem Ipsum</p>
</div>
<div>
  <input type="checkbox" name="productChecklist[]" value="BC">
  <span class="bc">BC<span>
  <img src="https://t.com/shop/image.jpg" alt="img" class="img-responsive"><br>
  <p>Lorem Ipsum Dolor</p>
</div>

After you prepare your form just place the appropriate shortcode in the mail tab.

[productChecklist]