Contact Form 7 Checkboxes Only Have A Handful Of Customizations Including Some Handy CSS

[@wplearninglab]

If you enjoyed this video don't forget to the like it and subscribe! Then check out this playlist about doing nearly everything with Contact Form 7: kzbin.info/www/bejne/raqaYYp9eM-Aj5Y

[@joanasflute]

Thanks! Exactly what i needed

[@wplearninglab]

You're welcome Joana, I'm happy I could help! Let me know if you have any questions :)

[@douglasbalico1294]

Thankyou very Much from Brazil!!!

[@TyranVz]

THANK YOU! this saved me hours of frustration

[@cathyenglish]

This was exactly what a needed! Thanks!

[@wplearninglab]

You’re welcome Cathy, thanks for watching!

[@tasvirmahmood]

Thanks, man, doing a WordPress project. You saved me last February 2018 and saving me in this February 2019 also!

[@audioreklama24]

Thanks! Good video! Tell me what is the name of the Divi application, I can not find it in the plugins?

[@karenyyyy]

Great tutorial! Done perfectly that even I (a complete non-techie) can follow it!! Thank you!!

[@wplearninglab]

You're welcome Karen, I'm glad I could help! Thanks for watching :)

[@alexeniy]

Thank you, buddy! It helped me a lot! With greetings from Russia.

[@wplearninglab]

You're welcome, I'm glad I could help. Thanks for watching! Greetings from Canada.

[@adrianduncan7228]

Hi my checkboxes only show a little white tick when checked and I can hardly see it. Is there away to make the checkbox's tick the same as yours ?

[@usedenginefinder2047]

Hi, is it possible to use the checkbox funtion that, if checked it sends to a list of emails?

[@djpete2009]

Fantastic! Subscribed.

[@wplearninglab]

Thanks for the sub Pete, much appreciated!

[@boicom7]

Hi. How do I make image options instead of checkboxes for visitors to choose from?

[@sabiruli]

How can change the background color of the checkbox in the contact form 7?

[@wplearninglab]

Hi Sabirul, I created two Contact Form 7 CSS tutorials which include code for checkboxes on the blog. Here they are: #1: kzbin.info/www/bejne/mHzEo3ZmhrRopck #2: kzbin.info/www/bejne/b5aQe5WPnL51idU I hope that helps and thanks for watching!

[@williamrosebrock1400]

What’s the code snippet if I have over 10 items in my checkboxes list and want to make it into columns?

[@wplearninglab]

Hi William, I don't have a code snippet handy for that, but off the top of my head I would try using the nth-child pseudo selector (Google it) to select the first 5 checkboxes and "float" then left. Then select the last 5 checkboxes and "float" them right. If you're not familiar with floats you can see how they work in the latter half of this tutorial: kzbin.info/www/bejne/qZ-rZ4yteK14pac I hope that helps :) Let me know if you have any further questions. Thanks for watching!

[@williamrosebrock1400]

WordPress Tutorials - WPLearningLab Thanks for the quick reply! Much appreaciated

[@etiennedayer5938]

Cool tutorial. After adding the checkbox, I can't enter any text in the form. Do you have any idea why?

[@wplearninglab]

Hi Etienne, my first guess would be a tag has been opened on your form that wasn't closed or wasn't closed soon enough. Can you copy/paste your form code here? Are you displaying the form on a page builder page or a regular WordPress post or page?

[@etiennedayer5938]

@@wplearninglab I thanks. I solved it, it was because I forgot to enclose the checkbox inside a div!

[@MonalikaBose]

How can we customise the email so the checkbox options display in separate lines rather than with commas in submission. Is there a video for that please

[@kudakwashezvaita1017]

can you insert a heading to this checkbox, like for example 'What do you like to do"

[@imornie]

Great tutorial as always! Quick question, is there a way I can add a "select all" checkbox and it will check all of the boxes? Thanks

[@wplearninglab]

Yes, that can be done, but you'll need to use custom JavaScript to do it. I'm sure there are lots of code examples online if you Google it. Once you have the Javascript, you can use the steps in this tutorial to add it to the required page on your site: kzbin.info/www/bejne/fKiZh3eFj76kqK8 I hope that helps and thanks for watching!

[@mumtazs5406]

Hi, nice tutorial. I'm making a form with long sentences in checkboxes and they're not getting aligned to left properly. The boxes and content are like flying everywhere. Can you suggest what could be done. Thanks mate!!

[@glendalevesque2972]

How would I add a heading for the checkbox on the survey, such as "What I Like to Do".

[@wplearninglab]

Hi Glenda, You can do it in two ways. 1. In the CF7 editor you can write "What I Like to Do" right above the checkbox shortcode. Like this: What I Like to Do [checkbox shortcode] 2. You can do the same as above, but wrap in the HTML label tag. This gives the added benefit of letting people click the text beside the checkbox in order to select it rather than needing to click directly on the checkbox. It looks like this: What I Like to Do [checkbox shortcode] I hope that helps :) Let me know if you have any further questions. Thanks for watching!

[@SteveParkinson]

The link to the css code link reports a critical error on your website... sods law!

[@wplearninglab]

Lol, I was messing around in my functions file earlier today. Everything appeared to be working at the time. Thanks for the heads up Steve! I'll fix it after the kiddos are bed.

[@Paartherapeut]

I want to create a quiz, and need instead of checkboxes pictures on which one can click. is there a posibility to do that with CF7?

[@wplearninglab]

Hi Pedram, I think so, but it will take some custom CSS to replace the check boxes with images. And more custom CSS to let the visitor know which image they selected. I bet there's something about it in StackOverflow. com. I don't have they code handy unfortunately.

[@Paartherapeut]

@@wplearninglab to know my limits is also a very valuable knowledge. Thank you. I will see if I can find a solution around it... For example to put a picture close to a radio and next picture close to the nextone.

[@mjswar]

Was able to add a checkbox to my form, but I'm not able to select any of the options. Nothing happens when clicking on the boxes.

[@k254intels5]

Hi...thanks for the vid.Need some help though....I am looking for a way to use emojis in place of checkboxes in contact form 7 any idea on how this can be done

[@wplearninglab]

You can do pretty much anything you want, but this wouldn't be easy. You would have to write some custom Javascript code and possibly recreate checkbox functionality in the Javascript and pass it to the form when it's submitted. Do you an example you could share a link to?

[@lipsk86]

This is good, but what if I have 15 checkbox items and want to show them in groups of 5 and 3 columns parallel to each other? The first vertical row will have 5 items, the second and third will also have 5 items and all 3 aligned parallel to each other as options to select. Can this be done?

[@nataliesloane8833]

I have watched several of your videos- but can't seem to find one to answer my question. I am trying to add multiple choice options for a download that will get sent to the inquirer. How do I link the appropriate PDF to whichever selection they make in a dropdown menu on Contact form? I have uploaded the documents in a download monitor, but don't know how to link them to the corresponding selection on the contact form. Thank you

[@wplearninglab]

Hi Natalie, I don't have a video for that specific situation, but it's difficult and will require custom code or a pricey autoresponder. But this one is partly applicable: kzbin.info/www/bejne/r3axgKCCg617oq8 The code from that video would need to be adapted so that it uses an "if" statement to detect the form submission. Inside that "if", there needs to be a series of "if" and "else" statements to detect which dropdown item was selected. Each of those if/else statements will redirect the user to a different page. The page they go to will match the dropdown item they selected. Each of the pages will have one PDF download. It could be a page that the download monitor creates for you. And that's about it. It'll take some effort to get the code together, but it will be worth it. I hope that helps :) Let me know if you have any further questions. Thanks for watching!

[@karenongco7053]

can we add image beside the checkbox?

[@wplearninglab]

Hi Karen, Do you mean an image on the left side of the checkbox, or the right side of the checkbox or replace the checkbox with an image?

[@infotalkspunter]

Thanks for great Video :0

[@wplearninglab]

You're welcome Dawood, thanks for watching!

[@roneyfischersilva760]

Thank u

[@randomprog115]

Hi is there a way to make this checkbox as an image?

[@wplearninglab]

Hi Kirito, I've never done that before, but I found this helpful page: css-workshop.com/css-custom-checkbox-style-with-image/ You'll have to do a little CSS, but that should help you build what you need. I hope that helps and thanks for watching!

[@emaryadi]

Hi! Thank you for your tutorial. I tried to test my form with check box, but when I receive the mail, i can not see the result of checked box. Any idea why is this happened? thank you.

[@wplearninglab]

Hi Endi, did you make sure to add the checkbox shortcode to the email template on the CF7 Mail tab?

[@emaryadi]

@@wplearninglab ah ok, I will check again. Thank you Bjorn.

[@adnanahsan2616]

what if I dont want to display block all of the checkboxes ?

[@wplearninglab]

I'm not sure what you mean. Do you mean you would rather display it inline that block?

[@adnanahsan2616]

@@wplearninglab I mean If I have two checkbox input added in cf7 and I want 1 inline-block and other one only block..

[@jeansienkin]

@@adnanahsan2616 Add a class to the checkbox where you want the block. CSS your class with display:block.

[@oscarshanagher1536]

Any idea why my checkbox only ever returns one value no matter how many checkboxes I select from the group?

[@vanderhart1131]

Hi There! Great video I'm having some troubles. I don't know if is the version number of the plugin or what but the checkboxes are not clickable, you know something about it? Thanks man! it should work fine :( [checkbox* service "Spend it trip" "Struggle card" "Closet cleaning" "Other"]

[@wplearninglab]

Hi Vander, I don't know anything about that. I don't think it the version number matters, any form builder that allows you to add checkboxes should make sure those boxes aee clickable. My best guess is that a conflict with another plugin or your theme is causing this issue. You can deactivate plugins one by one and test the checkbox each time. There may be one in particular, that when deactivated will allow the check boxes to work. I hope that helps, let me know if you have any further questions. Thanks for watching!

[@Leneufcinqcergy]

Damn Bjorn, looking sporty in this vid. 😘

[@wplearninglab]

😂 lol

[@adityabapat819]

how to arrange check boxes horizontally

[@-30h-work-week]

span.wpcf-7-list-item {display:block;} :) It's not working. The checkboxes are still displyed horizontally. Another issue (with or without this like of code), the labels are displayed UNDER the checkbox on Android. Damn!, I hate coding... There's *aaaalways* something to fix, info to look up, butt hurts from wasting so much time sitting in chair etc.

[@webtexwebdesign4552]

Doesn't work. Massive gap between checkbox and label and theyr'e on different lines.

[@AtacamaHumanoid]

Mine just stopped working for no apparent reason, just as I was ready to make the site live, which is so infuriating.

[@jeansienkin]

Nicely explained, but I don't think the title of the video does make a lot of sense. "How to vertically align Contact Form 7 checkboxes with CSS" would have been much clearer.

[@fbatista121297]

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