6

I want to show the css and javascript only when the shortcode is used in that page. If the short code not present in the wordpress page then the js and css of contact form should not be shown. For that what i have done is i have pasted the following code in my active themes function.php file.

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

The above code totally removes the js and css of contact form 7 plugin. What i need is if contact form 7 shortcode is pasted then both should be shown.

James Paul
  • 157
  • 1
  • 2
  • 14
  • Please check Below code, if its work for you please let me know – developerme Feb 22 '18 at 09:33
  • @developerme It not meet my requirement it just shows the contact form 7 js and css for page with id 100. What i want is it need to show if there is shortcode. – James Paul Feb 22 '18 at 11:14
  • Instead of custom code, use this small plugin: [https://wordpress.org/plugins/scripts-removal-for-contact-form-7/](https://wordpress.org/plugins/scripts-removal-for-contact-form-7/) It works like a charm. – amit Mar 18 '20 at 06:09

3 Answers3

8

Here is the answer for your question. If there is not shortcode the css and js of contact form will be removed and if there is shortcode css and js will be added.

function rjs_lwp_contactform_css_js() {
    global $post;
    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'contact-form-7') ) {
        wp_enqueue_script('contact-form-7');
         wp_enqueue_style('contact-form-7');

    }else{
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'rjs_lwp_contactform_css_js');
J. Shabu
  • 1,013
  • 9
  • 22
  • Instead of custom code, use this small plugin: https://wordpress.org/plugins/scripts-removal-for-contact-form-7/ It works like a charm. – amit Mar 18 '20 at 12:15
  • @amit the question is to add it via code not plugin. – James Paul Apr 14 '20 at 16:59
  • 2
    If you would also like to remove the captcha included with wpcf7 use this: ```wp_dequeue_script( 'google-recaptcha' ); wp_dequeue_script( 'wpcf7-recaptcha' );``` – Luuk Skeur Nov 09 '20 at 19:33
3

I needed the other version that corresponds widgets and shortcodes in theme file.

add_filter( 'wpcf7_load_css', '__return_false' );

add_filter( 'wpcf7_load_js', '__return_false' );

remove_action( 'wp_enqueue_scripts','wpcf7_recaptcha_enqueue_scripts', 20 );

add_filter('pre_do_shortcode_tag', 'enqueue_wpcf7_css_js_as_needed', 10, 2 );
function enqueue_wpcf7_css_js_as_needed ( $output, $shortcode ) {
    if ( 'contact-form-7' == $shortcode ) {
        wpcf7_recaptcha_enqueue_scripts();
        wpcf7_enqueue_scripts();
        wpcf7_enqueue_styles();
    }
    return $output;
}
Mizuho Ogino
  • 336
  • 1
  • 7
1

You use below code.You can add your pages Id in this code.

function dvk_dequeue_scripts() {

    $load_scripts = false;

    if( is_singular() ) {
        $post = get_post();

        if( has_shortcode($post->post_content, 'contact-form-7') ) {
            $load_scripts = true;
        }

    }

    if( ! $load_scripts ) {
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );
    }

}

add_action( 'wp_enqueue_scripts', 'dvk_dequeue_scripts', 99 );

Reference

developerme
  • 1,845
  • 2
  • 15
  • 34
  • It not meet my requirement it just shows the contact form 7 js and css for page with id 100. What i want is it need to show if there is shortcode. – James Paul Feb 22 '18 at 11:13
  • 2
    after CF7 5.1 update, it's good to add `wp_dequeue_script('google-recaptcha')` – moped Mar 01 '19 at 20:42
  • Instead of custom code, use this small plugin: https://wordpress.org/plugins/scripts-removal-for-contact-form-7/ It works like a charm. – amit Mar 18 '20 at 12:15