How to add HTML elements to Contact Form 7 (Multi Select Checkbox)
Author: Dimitar Radev | Posted on: August 13, 2018 |

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]
If you want to recieve the latest WordPress snippets, tutorials, tricks and useful information about web development, seo, social media marketing, google you can Subscribe to our newsletter. All you need to do is to fill the Subscribe form below, verify your Free Subscription in your email and start read our daily useful tips and tricks straight in your mailbox.
Note* we hate spam and our newsletter is powered by Google Feedburner and you will not get spam messages in your mailbox.
Leave a Reply