GusRuss89

Hi @snippet24,

Sorry for the slow reply, I’ve just had the power come back on in Cairns after tropical cyclone Niran came through.

The dark theme of material design just works by adding a class to your form’s parent element. So to get it to work with your dark theme toggle button, just toggle that class when the theme changes. You can use JavaScript like this, just make sure to update the selector for the dark theme switch if necessary.

jQuery('.wp-night-mode').click(function() {
  jQuery('.cf7md-form').each(function() {
    jQuery(this).toggleClass('cf7md-theme--dark');
  });
});

Thanks,
Angus

Hi @chrisprime

That’s great, thanks for letting me know. I’m guessing X-Theme’s first update probably conflicted with a few plugins and they quickly released a patch to fix it.

Thanks,
Angus

Hi @schlorian

Your website’s JavaScript files are still not working, they’re returning 404 Not Found. This is not just happening to Material Design scripts, there are others also returning 404.

It looks like the scripts are attempting to load from test.yourdomain.com, while the page you sent me is at yourdomain.com. If you can figure out why the scripts are trying to load from a different subdomain, that will probably help.

I expect that as soon as you get that issue resolved, material design will work as advertised.

Thanks,
Angus

Hi @chrisprime

Thanks for the heads up. Do you have any more information about what actually breaks? Is it on the front or back end? Is there an error message?

Thanks,
Angus

Hi @snippet24,

Unfortunately there’s no way the plugin to know in advance which page includes a contact form, which is why the scripts load on every page. However, if you as the site owner know which pages the script is required on, you can quite easily take care of this manually.

You can add this to your functions.php. It will dequeue all the plugin scripts and styles except on pages with slug ‘contact’ or ‘form’. You will need to change the if condition to suit your pages.

function my_dequeue_cf7md_assets() {
    if( ! is_page( 'contact' ) && ! is_page( 'form' ) ) {
        wp_dequeue_script( 'md-components-js' );
        wp_dequeue_script( 'autosize' );
        wp_dequeue_script( 'cf7-material-design' );
        wp_dequeue_style( 'cf7md_roboto' );
        wp_dequeue_style( 'cf7-material-design' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_cf7md_assets', 20 );

There are some old threads that go into a bit more detail if you need further help. Here’s the most recent: https://www.ads-software.com/support/topic/prevent-scripts-from-loading-on-all-pages/

Thanks,
Angus

Hi @stephenzhao

This is an interesting case of the Material Design for CF7 plugin and Google SiteKit both using the same css variable names. Well done for figuring it out!

You should be able to fix it by adding this CSS under Appearance > Customize > Material Design Forms > Custom CSS:

#cf7md-form .mdc-layout-grid {
  padding: 0;
}

By adding the CSS in the right location, that should work, but if it doesn’t, just add !important.

Thanks,
Angus

HI @burbujasmedia

Sorry for the late reply.

I checked your website and confirmed these messages are only warnings, so they should not be responsible for your menu not working.

Regardless, I’ve just released an update to the plugin that resolves these deprecated API usages. Please update the plugin and let me know if you still have any issues.

Thanks,
Angus

Hi @artemeo

Your theme (or some other plugin) is trying to turn the select field into a “jqselect” field.

Hopefully you can just find a setting in your theme to turn this functionality off. If not, you might need to submit a support request to your theme creator asking how it can be turned off.

I can see that it is being done in themes/gotoalb/js/misc.js. If you can remove (or comment) this from that file it should fix it:

jQuery('select').styler({
  singleSelectzIndex: 1
});

Thanks,
Angus

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

Hi @barista17,

Thanks for using my plugin.

The slick.min.js script is only loaded in the admin page, and that message you see is just a warning but doesn’t affect any functionality.

I will make the necessary upgrades to the plugin, but for now you can be confident that nothing is actually broken.

Thanks again,
Angus

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

Hi @greatzhao

I’m happy to look into this. Could you please post your form code?

Thanks,
Angus

Hi @bigshow

Thanks for that info. I can’t see that error on my end (same setup). Is it possible for you to share a screenshot of the JavaScript console? Or perhaps link me to a page where you see the error?

Thanks,
Angus

You have total control and creativity over the if condition. If you’re not confident with PHP and WordPress functions, feel free to describe what you want here, and I’ll write the condition for you. For specific pages, the ID is probably the best way to target them.

Thanks,
Angus

Unfortunately no there’s not, at least not that I’m aware of. If there was a way to do that I’d have done it by default in the plugin itself.

You might be better off opting specific pages in to this function rather than all but the contact page. E.g. if ( is_page( 'about' ) || is_page( 'pricing' ))

Thanks,
Angus