Contact Form 7 – Placing Radio Buttons and Checkboxes on Separate Lines

FacebookGoogle+LinkedInStumbleUponPinterestRedditShare

I saw an article answering the question, “how can I get Contact Form 7 to display radio buttons and checkboxes on separate lines instead of all jumbled up”? And, of course, this is a great question and likely asked by … well, you. This would be why you’re here.

Most of the answers I have seen are really complex and not necessarily the best practice in coding so I thought I would share how I do it for myself and those very few clients so fortunate to have me working for them. Ahem.

Log in as admin. Navigate to your list of plugins. Find “Contact Form 7″. Click on the “Edit” link. Look on the right side and find the file that named “STYLES.CSS”. Click on it. This will open it for editing.

Inside of the file scroll down about 2/3s of the way and find the line that reads “span.wpcf7-list-item” and this is where (and the only place) you’re going to edit. See the “before” and “after” images to see what this does and see the “code” image to see how to edit. Don’t forget to save the file after making the change and don’t forget to refresh your form page to see the results.

2 thoughts on “Contact Form 7 – Placing Radio Buttons and Checkboxes on Separate Lines

  1. This worked so well. It did take a bit to find the .css file as it was hidden under Contact_Form_7/includes/CSS/styles.css but very easy instructions to follow. Thank you so much!!

    1. You are welcome Heather. Glad you found the style sheet and made your changes. The way that is done if you update you may lose your changes so keep a backup copy of the style sheet or the changes you made.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

What is 10 + 10 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)