Contact Form 7
Stacking radio buttons & check boxes (9 posts)

  1. mkenison
    Posted 4 years ago #

    On the Contact form 7 plug in, How do I get my radio buttons and check box options to on top of each other rather than go side by side? Thanks for your help!

  2. Net Zero
    Posted 4 years ago #

    Good question. I want to do the same.

    Anyone know?

  3. MacMare
    Posted 4 years ago #

    Hello, I was trying to do this today as well and found this article:


  4. Net Zero
    Posted 4 years ago #

    Nice. Works perfectly!

    Thanks for sharing

  5. Net Zero
    Posted 4 years ago #

    BTW, if you want to have several columns with the checkboxes just create a table in the contact form and then split your check box options into different form fields.

    You gotta give them different names.

    In the mail you just put down all form fields and separate them with commas.

  6. gnurph69
    Posted 4 years ago #

    Okay, I'm a total newbie and don't have much CSS background. I've searched around (found the page noted above) and I believe that what it entails is editing the style.css (appearance > editor > stylesheet) - but I've tried to add the text below in a couple of different places and it doesn't seem to have any impact. Can somebody point me in the right direction, please?

    /* Added by me 11/18/10 */
    span.wpcf7-list-item { display: block; }
    /* end */


  7. Boris
    Posted 4 years ago #

    Hello gnurph69,

    have you found out yet? Don't touch style.css for this! Instead, you need to customize styles.css, which is in the ContactForm7 plugin folder. Good luck!

  8. gregcohen
    Posted 4 years ago #

    Thanks @ispacecrusader, that worked great for me -- but if I update contactform7, it's going to wipe out these changes, no? How do I prevent that?

    Thanks for everything!

  9. Boris
    Posted 4 years ago #

    Updating is always tricky. I'd recommend to add a comment to the style.css file, and adding all of your custom additions below that. If you make a backup of the file, you can always compare after the update, and add your custom additions. But there's always a risk, as some of the css code may be changed in an update, forcing you to test and adapt it again.
    I only update if I think it's necessary (security updates or new functions that I've been waiting for). Otherwise, just leave it as is.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic