Title: [Plugin: Contact Form 7] Checkboxes vertical align?
Last modified: August 19, 2016

---

# [Plugin: Contact Form 7] Checkboxes vertical align?

 *  [Ranco](https://wordpress.org/support/users/ranco/)
 * (@ranco)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/)
 * Hello WordPress users!
 * I have a problem with my contact-form-7 plugin.
    I have made several checkboxes
   with a few options but the result i get is something like this:
 * Question?: X Option A X Option B X Option C X Option D.
    Well as you can see,
   that’s not very nice.
 * I want to Align it vertical, like:
 * X Option A
    X Option B X Option C X Option D
 * Anyone who can help me with this?
 * Thank you very much.

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [mrtnk](https://wordpress.org/support/users/mrtnk/)
 * (@mrtnk)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010597)
 * Hi, I found a solution to this problem over here:
 * [original msg](http://ideasilo.wordpress.com/2007/12/26/custom-layout-for-checkboxes-and-radio-buttons-contact-form-7-tips/)
 * Try adding
 * `span.wpcf7-list-item { display: block; }`
 * to your .css!
 *  [spottydog](https://wordpress.org/support/users/spottydog/)
 * (@spottydog)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010603)
 * Whereabouts do you add this code?
 *  [composerscott](https://wordpress.org/support/users/composerscott/)
 * (@composerscott)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010621)
 * I too have looked over the various threads and attempted to add this code only
   to get a fatal error. I haven’t found a clear answer or reply on where to put
   it…. Anyone…? Bueller….?
 *  [composerscott](https://wordpress.org/support/users/composerscott/)
 * (@composerscott)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010622)
 * After further experimentation, I figured it out. This worked when I added the
   line to the stylesheet.css file located in the folder for the plugin. A comment
   somewhere said it doesn’t matter where you put it, but I chose to put the line
   after another span.wpcf7-list-item line that I found at the end of that file.
 * Hope this helps…
 *  [ralfmue](https://wordpress.org/support/users/ralfmue/)
 * (@ralfmue)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010624)
 * Hi,
 * just fill in 
   , ie. like this: [checkbox items “item1” “item2” “item3]
 * or did I misunderstand you?
 * Ralf
 *  [ralfmue](https://wordpress.org/support/users/ralfmue/)
 * (@ralfmue)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010625)
 * Hi,
 * just fill in `<br />`‘s, ie. like this:
    `[checkbox items "item1<br />" "item2
   <br />" "item3<br />"]`
 * or did I misunderstand you?
 * Ralf
 *  [ptsangari](https://wordpress.org/support/users/ptsangari/)
 * (@ptsangari)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010636)
 * Hi everyone!
 * composerscott’s explanation was ok and works but i would like to make thinks 
   more clearer by telling the most efficient way to do so.
 * Got to the wp-content -> plugins and get into the contact-form-7 folder. Open
   the stylesheet.css file and go to the end. Second last code block (i mean the
   second block before the end) looks like this:
 * span.wpcf7-list-item {
    margin-left: 0.5em; }
 * You must only put: display: block; inside and it will be like this:
 * span.wpcf7-list-item {
    margin-left: 0.5em; display: block; }
 * Save and exit. That’s all!!!
 *  [nattie33](https://wordpress.org/support/users/nattie33/)
 * (@nattie33)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010637)
 * HI,
    I made the display block, but I still have a problem of css :
 * The text items are far from the checkbox like :
 * * ………………option 1
    * ……………… option 2 * ……………… option 3
 * How can I reduce the distance between the box and the text ?
    Thanks. Nattie
 *  [rootscience](https://wordpress.org/support/users/rootscience/)
 * (@rootscience)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010653)
 * ptsangari
    Sweet instructions. Worked like a charm.
 *  [rootscience](https://wordpress.org/support/users/rootscience/)
 * (@rootscience)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010654)
 * Now if I can only figure out how to get the checkbox data to be sent with the
   email……
 *  [Luke Rumley](https://wordpress.org/support/users/lukerumley/)
 * (@lukerumley)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010656)
 * You just add the checkbox field to the body (or subject line) of the mail section.
   If your checkbox name was “Colors” you would put [Colors] in your email body 
   template.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘[Plugin: Contact Form 7] Checkboxes vertical align?’ is closed to new
replies.

## Tags

 * [Stylesheet](https://wordpress.org/support/topic-tag/stylesheet/)

 * 11 replies
 * 9 participants
 * Last reply from: [Luke Rumley](https://wordpress.org/support/users/lukerumley/)
 * Last activity: [16 years, 6 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-checkboxes-vertical-align/#post-1010656)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics