After the 5.4 update, if you want to load CF7’s JS and CSS only on pages/posts where a CF7 shortcode is present you can put the following code in your child-theme’s functions.php (backup it first!).
Hope this helps.
/**
* Conditionally Load CF7's Scripts and Styles Only Where Needed
*/
/**
* Dequeue:
*
* contact-form-7
* wp-i18n
* lodash
* wp-url
* wp-hooks
* wp-api-fetch
* wp-polyfill (To completely dequeue this, also dequeue recaptcha scripts - see below)
*/
add_filter( 'wpcf7_load_js', '__return_false' );
// Dequeue contact-form-7 CSS
add_filter( 'wpcf7_load_css', '__return_false' );
function conditionally_enqueue_cf7_js_css() {
// Dequeue wpcf7-recaptcha
wp_dequeue_script('wpcf7-recaptcha');
// Dequeue google-recaptcha
wp_dequeue_script( 'google-recaptcha' );
// If current post has cf7 shortcode, enqueue everything back
global $post;
if ( isset( $post->post_content ) AND has_shortcode( $post->post_content, 'contact-form-7' ) ) {
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
wp_enqueue_script('wpcf7-recaptcha');
wp_enqueue_script( 'google-recaptcha' );
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
add_action( 'wp_enqueue_scripts', 'conditionally_enqueue_cf7_js_css', 20, 0 );
