Custom layout for checkboxes and radio buttons (Contact Form 7 tips)

This is a tip for Contact Form 7 plugin.

In default, a tag of checkbox type (checkbox and checkbox+) and radio button type (radio) are rendered as inline, like

You can reverse checkbox-label order by using label-first option with those tags.

A replaced HTML source of checkbox in default case looks like below (I added line breaks for better viewing):

<span style="position: relative;">
 <span class="wpcf7-checkbox">
  <span class="wpcf7-list-item">
   <input name="your-checkbox" value="ウインダム" 
     class="exclusive" type="checkbox">&nbsp;
   <span class="wpcf7-list-item-label">ウインダム</span>
  </span>
  <span class="wpcf7-list-item">
   <input name="your-checkbox" value="ミクラス" 
     class="exclusive" type="checkbox">&nbsp;
   <span class="wpcf7-list-item-label">ミクラス</span>
  </span>
  <span class="wpcf7-list-item">
   <input name="your-checkbox" value="アギラ" 
     class="exclusive" type="checkbox">&nbsp;
   <span class="wpcf7-list-item-label">アギラ</span>
  </span>
 </span>
</span>

You can customize the layout with CSS trick.

If you want block layout instead of original inline one,

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

If you want table layout,

span.wpcf7-list-item { display: table-row; }
span.wpcf7-list-item * { display: table-cell; }

(combined with label-first option)

Notice: { display: table* } properties are not supported in Internet Explorer (even in IE7). I hate IE.

18 thoughts on “Custom layout for checkboxes and radio buttons (Contact Form 7 tips)

  1. I had to comment out the “Exclusive checkbox” code in contact-form-7.js to get the checkboxes to work like checkboxes are supposed to – with multiple selections. Why is this code in there? Will commenting this out mess something else up?

  2. Well I discovered with the “Exclusive checkbox” code commented out, it doesn’t pass all the selected items to email autoresponder, only the last one selected. Please fix this so the checkboxes can work right. Thanks.

  3. Got everything working again using “checkbox+” – IMHO there should not be an option where the checkboxes work like radio buttons – too confusing.

  4. I’d like my checkboxes in block layout but I don’t understand where to paste: “span.wpcf7-list-item { display: block; }”… can you direct me a little further? Thanks!

  5. I don’t understand where to paste: “span.wpcf7-list-item { display: block; }”

    I’m not a tech guy so I don’t know about CSS Stylesheets, or most of what you wrote above.

    Does it go somewhere in the contact form design page, or does it go somewhere on the actual page where I’m putting the form?

    I even tried copy and pasting it exactly as is but it didn’t come out right. Please help.

    The form layout looks like:

    Name/Nickname (required)
    [text* name]

    Your Email (required)
    [email* email]
    Text Messaging Info(in case we don’t see you, we’ll contact you to make sure you can find us)
    [text text-contact 30/]

    I’ll be there for:
    [checkbox* mini-seminar "The 2/26 Seoul- Free Mini-Seminar(Dongdaemon, Doota! 9F, 8-9:30pm)" "4/2 Osaka - Free Mini-Seminar(Umeda Hep5 Starbucks, 8-9:30)" "4/9 Tokyo - Free Mini-Seminar(Roppongi Starbucks, 8-9:30)"]

    Do you have any specific questions? If so, put them here and we will answer them during the seminar.
    [textarea mini-seminar-questions x4]

    [submit "I'll see you there!"]

  6. Hello,

    How can I make radio buttons to be required?

    In my form, if the user doasn’t click the radio buttons, the mail goes with no info. In my case, the user must choose a option for each radio button, but putting an * [radio* ...] doesn’t work.

    Thanks for all the good software you’re providing us!

    a.

  7. HERE IS THE FORM:

    Your Name (required)
    [text* your-name]

    Your Email (required)
    [email* your-email]

    Subject
    [text your-subject]

    [checkbox checkbox-539 "ARTS" "Culture and Traditions" "Performing Arts" "Visual Arts" "BULGARIANS" "Great Bulgarians" "Just Talented Bulgarians" "Notable Bulgarians" "eBOOKS" "EDUCATION" "HISTORY" "HOUSEHOLD" "HUMOR" "NATURE" "NEWS" "SPORT "]

    Your Message
    [textarea your-message]

    [submit "Send"]

    HERE IS THE MESSAGE BODY:

    [your-checkbox-539 "ARTS" "Culture and Traditions" "Performing Arts" "Visual Arts" "BULGARIANS" "Great Bulgarians" "Just Talented Bulgarians" "Notable Bulgarians" "eBOOKS" "EDUCATION" "HISTORY" "HOUSEHOLD" "HUMOR" "NATURE" "NEWS" "SPORT "]

    [your-message]

    HERE IS THE EMAIL RECEIVED:

    [your-checkbox-539 "ARTS" "Culture and Traditions" "Performing Arts" "Visual Arts" "BULGARIANS" "Great Bulgarians" "Just Talented Bulgarians" "Notable Bulgarians" "eBOOKS" "EDUCATION" "HISTORY" "HOUSEHOLD" "HUMOR" "NATURE" "NEWS" "SPORT "]

    Test text text ok
    ========================================

    The Check Boxes do not work. I cannot make the right sintax. Too complicated and there is not a clear samples.

  8. Hi,
    Is there a way to customize the checkbox table layout to be 2 columns? I tried a colspan, but it didn’t apply. Maybe I put it in the wrong place?

    span.wpcf7-list-item { display: table-row; colspan=”2″;}
    span.wpcf7-list-item * { display: table-cell; }

  9. Dawn – I accomplished 2 columns by actually having two formfields (checkbox1 and checkbox2). I then built a table around those two formfields using 2 columns.

    HTH

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s