load recaptcha when user interacts with the form

recaptcha.js

var captchaLoaded = false;

$( document ).ready(function(){
//Load reCAPTCHA script when a form field is focused
$('form input').on('focus', function() {
// If we have loaded script once already, exit.
if (captchaLoaded)
{
return;
}

// Variable Intialization
console.log('reCAPTCHA script loading.');
var head = document.getElementsByTagName('head')[0];
var recaptchaScript = document.createElement('script');

// Add the recaptcha site key here.
var recaptchaKey = "@settings.RecaptchaSiteKey";

// Dynamically add Recaptcha Script
recaptchaScript.type = 'text/javascript';
recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?render=' + recaptchaKey;

// Add Recaptcha Script
head.appendChild(recaptchaScript);

//Set flag to only load once
captchaLoaded = true;
});
});