Checkbox text selection

  • Resolved mbuilders

    (@mbuilders)


    6 years ago

    The text part of checkbox for contact form 7 doesn’t select the checkbox on clicking. I tried playing around, couldn’t fix it. How do I allow the checkbox to be selected even when someone clicks the text part of checkbox. Many thanks!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Jainil Nagar

    (@jainilnagar)

    6 years ago

    Hello @mbuilders

    You need to use the use_label_element option in the checkbox which will wrap checkbox and text with a <label> tag. Check here.

    ex:
    [checkbox Webinars use_label_element "Entrepreneurship" "Freelancing" "UI/UX Design" "WordPress"]

    Thread Starter mbuilders

    (@mbuilders)

    6 years ago

    Thanks for quick reply Jainil. I tried this out. The checkboxes become big & misaligned..
    Created a test page- https://www.gomasterbuilders.com/contact-form-test

    • This reply was modified 6 years ago by mbuilders.
    Jainil Nagar

    (@jainilnagar)

    6 years ago

    Hello @mbuilders

    Yes you need to apply CSS for that.

    Thread Starter mbuilders

    (@mbuilders)

    6 years ago

    Tried but couldn’t do anything about it. Any simple solution?

    Jainil Nagar

    (@jainilnagar)

    6 years ago

    Hello @mbuilders

    Add the following CSS:

    label input[type=checkbox], label input[type=radio] {
    height: 17px;
    width: 17px;
    cursor: pointer;
    display: inline-block;
}
.tb-contact-form-wrapper span.wpcf7-list-item-label {
    display: inline-block;
    font-weight: 400;
    line-height: 27px;
    font-size: 17px;
    color: #707070;
    padding-left: 5px;
    margin-bottom: 0px;
}
    Thread Starter mbuilders

    (@mbuilders)

    6 years ago

    This worked. Thanks so much Jainil. You’re a champ!!
    Really appreciate your gesture.

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

The topic ‘Checkbox text selection’ is closed to new replies.