Are you using Contact Form 7 plugin in a WordPress website using a theme built with Bootstrap front-end framework? Then you must have faced styling issues in CF 7 inputs in accordance with Bootstrap. Creating Contact Form 7 radio and checkbox using the form template doesn’t allow adding classes as per Bootstrap documentation.
Contact Form 7 is a popular plugin, widely used in WordPress websites. Bootstrap 4 is also a fantastic framework to create responsive websites. Further, there are a number of WordPress themes that use CF7 and BS4 together.
Still, a few issues arise when you create a BS4 form using the CF7 interface in WordPress admin panel. However, there are easy fixes for CF7 and BS4 combination issues for forms in WordPress websites. Like, use this fantastic CSS solution to improve the appearance of Contact Form 7 validation errors.
Contact Form 7 Radio and Checkbox – Problem for Bootstrap 4
We have used version 5.0 of CF7 and 4.1 of Bootstrap during the writing of this article. A typical checkbox markup is as follow according to Bootstrap documentation:
0 1 2 3 4 5 6 | <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> |
And following is the markup for a checkbox field in CF7:
0 1 2 3 4 5 6 7 8 9 10 11 12 | <!-- In template --> [checkbox cb_label "Label Text"] <!-- markup produced --> <span class="wpcf7-form-control-wrap"> <span class="wpcf7-form-control wpcf7-checkbox"> <span class="wpcf7-list-item"> <span class="wpcf7-list-item-label">Label Text</span> <input type="checkbox" name="cb_label[]" value="Label Text" /> </span> </span> </span> |
Now try to add classes to checkbox or radio field in the template and check the rendered markup. It won’t get success to apply BS4 classes adequately. Since Bootstrap labels, checkboxes and their parents, each needs their own class.
- Redirect to another URL after CF7 submission
- Validation errors don’t disappear in WordPress CF7
- Dynamically add select tag options to Contact Form 7
Bootstrap 4 Style in Contact Form 7 Radio and Checkbox
Here we have jQuery solution to style the checkbox and radio button fields. Since it’s a WordPress website as well as Bootstrap theme. So jQuery should be available in your CF7 pages. First of all, you need to place the following script in your theme’s JS file (without script tag). Alternatively, you can add these lines in the footer.php file of your active theme after the wp_footer() function.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script> jQuery(document).ready(function($){ if(jQuery('.wpcf7-form').length){ var astx_label_class = 'form-check-label', astx_input_class = 'form-check-input', astx_parent_class = 'form-check form-check-inline'; $('.wpcf7-form input[type=checkbox], .wpcf7-form input[type=radio]').each(function(){ var element = $(this), parent = element.closest('.wpcf7-list-item'); element.addClass(astx_input_class); parent.addClass(astx_parent_class); if(astx_label_class) parent.find('wpcf7-list-item-label').addClass(astx_label_class); }); } }); </script> |
Here you see 3 variables, the first one adds the given class to the label. Leave the astx_label_class variable empty if you don’t want to add or hasn’t the label associated. The second variable adds the class to the checkbox or radio itself. And the last variable is to add the class to the input’s parent. Also, you can specify multiple classes using space as shown.
Finally, our form mark up will look like:
0 1 2 3 4 5 6 7 8 | <span class="wpcf7-form-control-wrap"> <span class="wpcf7-form-control wpcf7-checkbox"> <span class="wpcf7-list-item form-check form-check-inline"> <span class="wpcf7-list-item-label form-check-label">Label Text</span> <input type="checkbox" name="cb_label[]" class="form-check-input" value="Label Text" /> </span> </span> </span> |
Did this solution resolve your issue regarding styling Contact Form 7 radio and checkbox as Bootstrap 4 style? Do you have any trouble regarding combining Bootstrap 4 and Contact Form 7? We’re here to assist you. Also, don’t forget to check what we offer at the sidebar in the right.