GusRuss89

Hi @nemovich,

Your theme has this CSS which is preventing the checkboxes from being clicked.

input[type="radio"], input[type="checkbox"] { display: none; }

To fix that, add the following CSS under Appearance > Customize > Material Design Forms > Custom CSS.

#cf7md-form input[type="radio"],
#cf7md-form input[type="checkbox"] {
    display: block;
}

Your theme also cuts off the focus rings because it hides the overflow on the form. To fix this, add the following CSS to the same place as the above.

.wpcf7-form {
    overflow: visible !important;
}

Thanks,
Angus

Hi @trentongo,

The page works first time for me. It does show a flash of unstyled form briefly – this is because some of the material styles are added via JavaScript, which loads last. This is quite noticeable on your site because it is slow to load (9s for me to the DOMContentLoaded event). You could speed this up by using a caching plugin and a CDN like CloudFlare (these are good practices anyway).

As an aside, it looks like you’re using conditional fields, but wrapping each group in a [md-text] shortcode, this is resulting in some inconsistent vertical spacing. Instead, the group shortcodes should go around the [md-text] shortcodes, so that only one is visible at a time.

Thanks,
Angus

Hi @yiannit,

I see you’ve tried to solve this issue by using empty labels and adding placeholders. Note that this has not solved the JavaScript error which may cause other issues (I.e. prevent other scripts from running properly on your site).

I’d recommend re-adding the labels and then disabling your other plugins one-by-one to figure out which plugin is causing this issue. If you can narrow it down for me I’ll install the plugin on my test site and see what can be done about the error.

Thanks,
Angus

Hi @2020media

v1.7.0 was released today, which includes a new display attribute for the md-checkbox, md-radio and md-switch shortcodes.

The options for display are: stacked (default), inline, columns-2, columns-3 or columns-4.

E.g.

[md-radio label="What is your favourite food?" display="inline"]
[radio radio-671 default:1 "Pizza" "Cake" "Cookie dough" "Steak" "Burgers"]
[/md-radio]

or

[md-radio label="What is your favourite food?" display="columns-2"]
[radio radio-671 default:1 "Pizza" "Cake" "Cookie dough" "Steak" "Burgers"]
[/md-radio]

This is now the recommended way to achieve inline or columns of items.

Thanks,
Angus

Hi all, I’ve just released v1.7.0 which includes a fix for this issue.

Hi @yiannit,

There’s an error in the JavaScript (if you check the console) that is causing this, however I’m not sure how the error is possible as everything looks like it’s loaded correctly.

Could you try disabling your plugins one-by-one (apart from this one), and re-testing to see if one of them is causing this issue?

Thanks,
Angus

Hi @pmagony

The plugin only affects the style of your forms. It doesn’t do anything with the form data once submitted, but leaves that up to CF7.

So yes it should work fine with Akismet.

Thanks,
Angus

Hi @shubhamdahale

Did the update fix your issue?

Thanks,
Angus