we are using Contact Form 7 with the MailChimp for WordPress plugin. All works well, however we add the shortcode of [mc4wp_checkbox] to each form, and sometimes on the page there can be 2 or 3 of these forms, that all use the same shortcode.
Due to styling, we hacked the plugin to include the label for and seperate the input from under the label…
// checkbox
$content .= '<p id="mc4wp-checkbox">';
$content .= '<input class="css-checkbox" id="'. $this->checkbox_name .'" type="checkbox" name="'.$this->checkbox_name.'" value="1" '. $checked . ' /> ';
$content .= '<label for="'.$this->checkbox_name.'" class="css-label">';
$content .= $label;
$content .= '</label>';
$content .= '</p>';
The CSS we are using is like so:
#mc4wp-checkbox input[type=checkbox].css-checkbox {
position:absolute; z-index:-1000; top:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}
#mc4wp-checkbox input[type=checkbox].css-checkbox + label.css-label {
padding-left:37px;
height:31px;
display:inline-block;
line-height:31px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:31px;
vertical-align:middle;
cursor:pointer;
font-size:11px;
}
#mc4wp-checkbox input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -31px;
}
#mc4wp-checkbox label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_b133c39c81582c4d41ca75f74160bf35.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
So the problem is because we are using the same code across all forms, when you click the checkbox it only updates the first instance of the form on the page, not the specific form – so if we have 3 forms on the same page, then it will only change the checkbox for the 1st form, even if you click the checkbox within form 3. I think it is because of the label for – but dont know how to make this unique for each form. Is that further plugin hacks?
Solved by JQuery using targeted attr for and id replacements.