I didn’t either… I wish they’d just fix the plugin.
Edit this plugin file here using the plugin editor:
contact-form-7/modules/checkbox.php
About 3/4 of the way down, you’ll see this:
if ( $label_first ) { // put label first, input last
$item = '<span class="wpcf7-list-item-label">' . esc_html( $label ) . '</span> ';
$item .= '<input type="' . $input_type . '" name="' . $name . ( $multiple ? '[]' : '' ) . '" value="' . esc_attr( $value ) . '"' . $checked . $onclick . ' />';
} else {
$item = '<input type="' . $input_type . '" name="' . $name . ( $multiple ? '[]' : '' ) . '" value="' . esc_attr( $value ) . '"' . $checked . $onclick . ' />';
$item .= ' <span class="wpcf7-list-item-label">' . esc_html( $label ) . '</span><br />';
}
The <br /> tag is what I added, after </span> and before the end quote.
you dont need to do all of that.
if you go into your css files for Contact 7 do this:
go to plugins, under Contact 7, there is an edit field, click that and go to your css files.
Click on stylesheet.css
in the next to the last code block…shouldlook like this…
}
span.wpcf7-list-item {
margin-left: 0.5em;
}
Change it to look like this:
}
span.wpcf7-list-item {
margin-left: 0.5em;
display: block;
}
thats it, save and youre done. very easy fix but they should have that already done. I think it looks like crap aligned that way
HTH
I am jumping into the conversation because I have a related issue. I would like to apply a style class to the input tags <input>.
I could generate entirely new tags but that seems like extra work. i would gladly add to my style sheet but I need someway to specify c-f-7 form elements. Do you have a tip on how I can do that? I looked at the plug-in code and couldn’t find the form name. (I tried some obvious ones but they didn’t work.)
I have a list of 10 checkboxes in a form. I am trying to format my mail so that the checked responses show up in a vertical list instead of a comma separated list in a paragraph. How do I do that? Is there an option I can set?
@ ljkerley – try using .wpcf7 to target the specific inputs. to target the whole form just wrap the shortcode in a <span> or <div> and apply an id or class to it. Here are some examples:
.wpcf7 input{}
.wpcf7-form-control-wrap textarea{}
p.contactBtn input[type=”submit”]{}
If you’re not using firebug give it a try – it can help you find classes a lot easier than by looking through the plugin.
Good luck!
Just add the following to your main stylesheet to fix the problem for both checkboxes and radio buttons:
span.wpcf7-list-item {
display:block;
}
Best thing is it will stay fixed even after you upgrade the contact form 7 plugin.
