How to Fix Checkbox and Radio Button Layout with Contact Form 7
One of my favorite free contact form plugins for WordPress is Contact Form 7. It’s easy to use but also has a lot of features, it can handle file uploads, and you can create multiple forms, if you need more than one on your website.
On many themes, however, the checkboxes and radio buttons don’t line up properly when there are a lot of choices and are displayed horizontally rather than vertically.
The checkbox selections look like the following:
There is, however, a simple CSS fix for this.
Paste the following into the stylesheet for your theme. It is located at Appearance > Editor > style.css
span.wpcf7-list-item {
display:block;
}
The checkbox and radio button selections will then look like this:
Do you use a contact form on your site? Which one do you use? Do you like Contact Form 7?
photo credit: 22658750@N02
Keep Reading:
Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter. If you are looking for Hosting, WordPress Theme, Newsletter or other recommendations, please view my detailed list.
September 12, 2011 at 1:11 am
Great option to use,
We can make our blog post much more attractive with this nice option.
sam @ goa carnival´s last post ..Goa Carnival Date 2011 (5th to 8th March)
September 14, 2011 at 9:19 am
Thanks – I’m glad it helped.
September 18, 2011 at 10:22 pm
I’ve had issues in the past with updates on a previous contact form that I used to use. Ever since though I switched to ‘Fast Secure Contact Form’ and everything has been smooth and good!
-Jean
September 20, 2011 at 8:10 am
Thanks for the recommendation – I haven’t tried that one.
June 24, 2012 at 1:01 pm
thank you very much, and I had his head broke as me make it vertical)) Super