Contact Form 7 In Wordpress How To Include Javascript Src In Body

I'm using wordpress, and contact form 7 plugin. What's i'm trying to accomplish is that some of the drop down menus are populated with custom javascript, I know that you can includ

Solution 1:

sure, that's quite straight forward. There are 2 ways to achieve this,

1. you can either insert a <script>with your js code</script> at the bottom of your form inside the cf7 form editor, this way the script loads only when the form is printed on the page. However, make sure you don't add any new lines spaces in your js code else cf7 plugin will insert empty <p></p> elements and this will break your code at execution. Alternatively,

2. if you are running WP4.7 you can now use the do_shortcode_tag which has been introduced with this release to actually enqueue your script on the same page as which the form is being printed, but remember to register that script earlier on first,

   add_filter('wp_enqueue_scripts', 'register_my_script');
   functionregister_my_script(){
     wp_register_script( 'my-script', get_stylesheet_directory_uri() . 'js/my-script.js', array( 'jquery' ), "1.0" , false );
   }
   add_filter('do_shortcode_tag', 'enqueue_my_script',10,3);
   functionenqueue_my_script($output, $tag, $attr){
     if('contact-form-7' != $tag){ 
       return$output; //make sure we filter cf7 shortcodes
     }
     if(isset($attr['id']) && '4' == $attr['id']){
       wp_enqueue_script('my-script'); //enqueue if it is form id=4
     }
     return$output;
   }