Support » Plugin: Material Design for Contact Form 7 » Checkbox checked does not initiate conditional field

  • Resolved nisignia

    (@nisignia)


    I’m trying to use checkbox labeled Other (value Other) to display additional input field with Contact Form 7 Conditional Fields. Trying to achieve the same thing for radio button down in the same form.
    The issue is, when I check the checkbox or select radio button, nothing happens. I need to click into another field to trigger the logic and display conditional field. Same goes for unchecking / deselecting, it will hide the field only when I click somewhere else – defocus from the checkbox/radio button. When I turn off material design plugin, this works normally.
    If you can’t replicate this on your side, I can send access since the site is still not public.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @nisignia

    The CF7 “other” option isn’t supported, however you can achieve the same effect in a more flexible way using the Conditional Fields for Contact Form 7 plugin.

    Thanks,
    Angus

    Hi Angus,

    sorry for my really bad initial explanation. I do use Conditional Fields, this is where the problem is. So I have a series of checkboxes created in CF7. Last checkbox should open a conditional field when checked and that works OK without material design. Unfortunately, when I create a MD form (wrap regular elements with md tags), clicking on specified checkbox does not automatically display hidden conditional field. Additionally, I have to click on other form field to trigger the action. Same happens for another conditional field where radio button triggers the action.
    This is the form layout. As you can see, conditional fields are wrapped in group tags, being hidden until checkbox or radio button are selected. Conditions are set properly, they work when form doesn’t use MD.

    [md-form]
    
    [md-text label="Email address"]
    [email* aic-md-email]
    [/md-text]
    
    [md-text label="Name"]
    [text* aic-md-name]
    [/md-text]
    
    Occupation
    [md-checkbox]
    [checkbox aic-occupation use_label_element "Architect/ Building Designer" "Builder" "Consultant" "Developer" "Interior Designer" "Investor" "Realtor" "Subcontractor" "Other"]
    [/md-checkbox]
    [group group-occupation clear_on_hide]
    [md-text label="Please specify other occupation"]
    [text aic-occupation-other id:other-occupation-id]
    [/md-text]
    [/group]
    
    [md-text label="Company"]
    [text aic-md-company]
    [/md-text]
    
    [md-text label="Website"]
    [text aic-md-website]
    [/md-text]
    
    [md-text label="Primary Phone Number"]
    [tel aic-md-phone]
    [/md-text]
    
    [md-textarea label="More about yourself or your company"]
    [textarea aic-md-about]
    [/md-textarea]
    
    Would you like any changes to the current AIC list serve policy about keeping referrals private?
    [md-radio]
    [radio aic-referrals-private use_label_element default:1 "Please keep referrals private." "I would like referrals to be shared with the entire group." "Other"]
    [/md-radio]
    [group referral-preference-other clear_on_hide]
    [md-text label="Please specify other preference"]
    [text aic-referrals-private-other]
    [/md-text]
    [/group]
    
    [md-submit]
    [submit "Send"]
    [/md-submit]
    
    [/md-form]
    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @nisignia

    Could you please also paste an export of your conditional field settings?

    Thanks,
    Angus

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @nisignia

    I think it will work if you just remove use_label_element from your checkbox and radio fields. I will look into why this is an issue. Thanks for bringing it to my attention.

    Thanks,
    Angus

    Sure, these are conditions. I’ll try your suggestion as well

    show [group-occupation] if [aic-occupation] equals "Other"
    show [referral-preference-other] if [aic-referrals-private] equals "Other"

    Yup, removing use_label_element solves it, I guess you know why this happens.

    Thank you for your prompt replies.

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    I actually don’t 😂

    It must be to do with how the event listeners are setup in the conditional fields plugin. My plugin changes the html so there must be a conflict there.

    Glad you got it working 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.