• 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)
  • Hi, I found a solution to this problem over here:

    original msg

    Try adding

    span.wpcf7-list-item { display: block; }

    to your .css!

    Whereabouts do you add this code?

    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….?

    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…

    Hi,

    just fill in
    , ie. like this:
    [checkbox items “item1
    ” “item2
    ” “item3
    ]

    or did I misunderstand you?

    Ralf

    Hi,

    just fill in <br />‘s, ie. like this:
    [checkbox items "item1<br />" "item2<br />" "item3<br />"]

    or did I misunderstand you?

    Ralf

    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!!!

    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

    ptsangari
    Sweet instructions. Worked like a charm.

    Now if I can only figure out how to get the checkbox data to be sent with the email……

    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.