Contact Form 7 and jQuery

For my new website, I am using child theme of Customizr theme and one of the plugin I used is Contact Form 7.

What I am trying to accomplish now is show/hide various input fields based on a checkbox selection and this tutorial here gave a pretty good start: https://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery. Plus I love how the author styled his/her form!

The only part I change is Step 5 on adding the jQuery scripts to the header. I used the method shown here instead inside my child theme’s functions.php. This is the final code of how I enqueue the main jQuery script and the script to show/hide Contact Form 7 fields:

/* Enqueue main jQuery script */
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}

/* Enqueue show/hide Contact Form 7 fields script */
if ( !is_admin() ) {
wp_register_script('custom_script',
get_bloginfo('stylesheet_directory') . '/js/hidefieldsScript.js',
array('jquery'),
'1.0' );
wp_enqueue_script('custom_script');
}

Advertisements