1

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 include it with another plugin "Scripts and Stuff" for example. but I wanted to put it in a seperate file and include the file in the body tags of the contact form with script src="http://example.org/myscript.js" (actual form created with the plugin)

EDIT: i donot want to add it to a footer.php of the theme, I want the script src to be on a Single page only. not the entire theme

sim555
  • 13
  • 1
  • 6

1 Answers1

4

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');
function register_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);
function enqueue_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;
}
Aurovrata
  • 2,000
  • 27
  • 45
  • thank you for the very informative reply, however the second option is a little hard for a self teaching beginner. is there anyway you can add some more // notes // to explain what the script does? step by step? – sim555 Apr 02 '17 at 18:05
  • it does 2 things: hooks [wp_enqueue_scripts](https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts) which allows you to queue or register a script you want to add to either your page header or footer. The difference between register and enqueue is that register will do just that but not actually print the script on your page until and unless you enqueue it before the actual page is printed. – Aurovrata Apr 05 '17 at 14:12
  • the 2nd step is to hook the `do_shortcode_tag` is allows you to identify/modify any shortcodes being called on your page before it is printed. This therefore allows you to identify which cf7 form is being printed and subsequently enqueue your previously registered script to make sure it is printed on the page (header or footer depending on how you registered it) – Aurovrata Apr 05 '17 at 14:15
  • Yes. Thanks for the follow up, and I really appreciate your input – sim555 Apr 09 '17 at 22:12
  • @sim555 great, could you kindly approve the answer and upvote it – Aurovrata Apr 10 '17 at 12:45
  • @Aurovrata I tried your 2nd solution, however when i open the webpage, all the forms are vanished from the page. Here, i'm assuming the id is the form id. for example: [contact-form-7 id="275" title="UserData"] then the id to put instead of your '4' is '125'. – Digvijayad Apr 25 '17 at 05:00
  • @Digvijayad thanks for bringing this up, I realised I forgot to add `return $output;` at the end of the function call... my mistake. Please correct your function and this will fix your missing forms – Aurovrata Apr 25 '17 at 05:15
  • @Aurovrata can't believe i missed that as well. Now the form is showing up however, the scripts are still not running. I'm trying to add nicEdit to my form. Therefore there are 2 scripts, one for nicEdit and the other for initializing the niceEdit in textarea. so i'm registering and en queuing 2 scripts together. – Digvijayad Apr 25 '17 at 05:32
  • if your scripts are not loaded in your page (check your footer/header depending on where you queued them), then it means the registration/enqueue is not being hooked properly. [Print a debug msg to your debug.log file](https://www.elegantthemes.com/blog/tips-tricks/using-the-wordpress-debug-log) to make sure the hooks are being called properly. Most likely your error is coming form there. – Aurovrata Apr 25 '17 at 06:35
  • @Aurovrata I got it working now. Apparently the error was in the register_my_script function: `Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'register_javscript_scripts' not found or invalid function name in /var/www/html/wordpress/wp-includes/class-wp-hook.php on line 298`. I got it working by putting the both the `wp_register_script()` and `wp_enqueue_script` in the `enqueue_my_script` function. – Digvijayad Apr 25 '17 at 19:19
  • @Digvijayad the original code is correct, you have renamed the functions and misspelt it in your hook callback. Putting both `wp_register_script` and `wp_enqueue_script` in the `'wp_enqueue_scripts'` hook call function will result in your custom script being appended to all your front-end pages, regardless of whether it has a cf7 form embedded in it or not. I recommend you follow my example. – Aurovrata Apr 26 '17 at 08:10
  • @sim555 would you confirm this answer as the right one. Selecting answers as working ones encourages us to reply to questions, making sure we continue to do so. – Aurovrata Apr 26 '17 at 08:14