Custom layout for checkboxes and radio buttons (Contact Form 7 tips)
December 26, 2007
This is a tip for Contact Form 7 plugin.
In default, a tag of checkbox type (checkbox and ) and radio button type (checkbox+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">
<span class="wpcf7-list-item-label">ウインダム</span>
</span>
<span class="wpcf7-list-item">
<input name="your-checkbox" value="ミクラス"
class="exclusive" type="checkbox">
<span class="wpcf7-list-item-label">ミクラス</span>
</span>
<span class="wpcf7-list-item">
<input name="your-checkbox" value="アギラ"
class="exclusive" type="checkbox">
<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.
December 28, 2007 at 3:58 am
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?
December 28, 2007 at 4:23 am
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.
December 28, 2007 at 4:34 am
Got everything working again using “checkbox+” – IMHO there should not be an option where the checkboxes work like radio buttons – too confusing.
December 28, 2007 at 2:19 pm
datacode,
I guess you’re right. Maybe I need to reconsider it. Thanks.
April 6, 2008 at 9:53 am
Eh, who love IE? :) Good work and Thank you for your great job ;)
January 5, 2009 at 5:25 pm
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!
January 5, 2009 at 5:37 pm
Never mind, I found the css stylesheet… having some fun now ;)
January 5, 2009 at 11:36 pm
Emil, just in the CSS stylesheet in your theme or in the plugin, or in the header, no matter where.
February 23, 2009 at 6:16 pm
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!"]
March 26, 2009 at 7:35 am
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.
July 23, 2009 at 3:49 pm
Thank you for the tips. The display list as block tip saved me a lot trial and error, worked like a charm!
July 25, 2009 at 5:58 am
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.
July 27, 2009 at 10:19 pm
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; }
October 6, 2009 at 1:13 pm
thanks you very much.
November 8, 2009 at 6:27 am
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