Support » Plugin: Material Design for Contact Form 7 » click on checkbox doesnt work but it does on label

  • Resolved gaucho code

    (@glowzar)


    hi guys, the plugin is very nice ! it makes the form look decent.
    but i noticed that is not working as expected
    whe nthe user clicks the checkbox, only it works when the “label” is clicked and not the checkbox itself. what could be the cause?

    you can see it live visiting the site and clicking the bottom right
    ” Business Enquiry” button.

    on this page, it works correctly.
    https://curzonpr.com/services-enquiry/

    any hints appreciated.

    i can see also a lot of “notices” on the console but no errors

    cf7-material-design-bundle.js?ver=2.6.3:2540 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author GusRuss89

    (@gusruss89)

    Hi @glowzar

    Thanks for your feedback on the plugin!

    The business enquiry form seems to work whether I click on the checkbox or the label, however it’s missing check marks. Could you please paste your form code for that form?

    Thanks,
    Angus

    Thread Starter gaucho code

    (@glowzar)

    Hi Gus, yes this is the code:

    thank you will make a review now 🙂

    
    [md-form]
    [md-text label="Your Name" ]
    [text* your-name]
    [/md-text]
    
    [md-text label="Your Surname" ]
    [text* your-surname]
    [/md-text]
    
    [md-text label="Please enter your email address" ]
    [email* your-email]
    [/md-text]
    
    [md-text label="Organisation/Company you are associated with" ]
    [text your-company]
    [/md-text]
    
    [md-text label="Job Title" ]
    [text your-jobtitle]
    [/md-text]
    
    [md-text* label="Please enter your phone number" ]
    [text your-phone] 
    [/md-text]
    
    [md-checkbox label="Please select the communications and PR service(s) you are looking for" ]
    [checkbox* your-services "Need help determining" "Communications and Marketing Strategy " "Brand Development " "Leadership Profiling " "Global Media Relations " "Crisis Communications " "Event Management " "Website and SEO " "Social Media/Content Marketing " "Capacity Building"]
    [/md-checkbox]
    
    [md-checkbox label="Please provide your approximate monthly budget range for us to assess the services we can provide:" ]
    [checkbox your-budget class:budgetselect exclusive "£5,000 to £7,500 per month " "£7,500 to £10,000 per month " "£10,000 to £15,000 per month" "Other"]
    [/md-checkbox]
    
    <div class="budget-conditional-field">
    [md-text label="Please enter your approximate monthly budget amount:"]
    [text your-aproxbudget]
    [/md-text]
    </div>
    
    [md-checkbox label="How did you hear about us?" ]
    [checkbox you-hearfromus exclusive "Google/Online Search " "Curzon PR Facebook/Instagram/Twitter" "LinkedIn" "Other"]
    [/md-checkbox]
    
    [md-text label="Please write here" ]
    <label class="cf7md-label cf7md-label--static">Referred/recommended by:</label>
    [text recommended-by]
    [/md-text]
    [md-textarea label="Please write here" ]
    <label class="cf7md-label cf7md-label--static">How can we help you/your business/organisation?</label>
    [textarea how-can-we-help]
    [/md-textarea]
    
    [md-submit]
    [submit "Send Enquiry"]
    [/md-submit]
    
    [/md-form]
    Plugin Author GusRuss89

    (@gusruss89)

    Hi @glowzar,

    To show the checkmarks properly you just need to add some custom CSS to override your theme. Add this under Appearance > Customize > Material Design Forms > Custom CSS.

    #chatbox #cf7md-form .option-1 svg {
      margin-top: 0;
    }

    Thanks,
    Angus

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘click on checkbox doesnt work but it does on label’ is closed to new replies.