WP Snipp Ninja

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]

 


About the Author

 Dimitar Radev

Hey, I'm Dimitar "B1-0S" Radev or D in short. I'm a WordPress Developer for nearly 10 years and I have in-depth knowledge in creating Custom WordPress Themes, Plugins, Commercial Themes Edits, and WooCommerce Storefronts. In the last two years, I'm specializing in Technical SEO for WordPress websites.


Follow Dimitar Radev on Social Media

Leave a Reply

Your email address will not be published. Required fields are marked *