Load JavaScript and CSS Contact Form 7

Hi! how to load Contact Form 7’s JavaScript and CSS stylesheet specifically on the “Contact” page? How to insert this code:

<?php
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wpcf7_enqueue_scripts();
    }

    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
?>

On my template contact.php

<?php
/* Template Name: Contact */

// Setup document
beans_add_smart_action( 'beans_before_load_document', 'bench_page_setup_document' );

function bench_page_setup_document() {

  //Center page content and add a large bottom margin since we removed uk-block earlier from beans_main
 beans_add_attribute('beans_post_body', 'class', 'uk-container uk-container-center');
}

// Load beans document
beans_load_document();

Thanks!

Hey Walter,

First you have to prevent CR7 assets to load globally by adding the snippet below in your child theme functions.php

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

Then you simply have to add the snippet below in your contact.php template file:

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
  wpcf7_enqueue_scripts();
}

if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
 wpcf7_enqueue_styles();
}

Happy coding,

Thank you so much Thierry