ConsentFriend v1 Functionality Google reCAPTCHA
To disable the automatic loading and execution of the reCAPTCHA script, you have to modify i.e. the default recaptchav3_html with the following code:
<script type="application/javascript">
function loadCaptcha() {
grecaptcha.ready(function() {
grecaptcha.execute('[[+site_key]]', {action: '[[+form_id]]'}).then(function(token) {
document.querySelector('[name="[[+token_key]]"]').value = token;
});
});
}
</script>
<script onload="loadCaptcha()" type="text/plain" data-type="application/javascript" data-src="https://www.google.com/recaptcha/api.js?render=[[+site_key]]&hl=[[++cultureKey]]" data-name="googleRecaptcha"></script>
<input type="hidden" name="[[+token_key]]">
<input type="hidden" name="[[+action_key]]" value="[[+form_id]]">
Since the order of excecution of javascripts after they are enabled by Klaro! is
not fixed, the grecaptcha.ready
method has to be wrapped by a method, that is
executed after the load of the recaptcha script with the onload attribute.
Otherwise you will get an Uncaught ReferenceError: grecaptcha is not defined
error in the browser console.
Disable the inputs
The forms that are secured by reCAPTCHA can be modified on changing the consent state of the googleRecaptcha service with a callback function. The following example is predefined in the demo service data in the onToggle callback:
function(consent, service) {
var buttons = document.body.querySelectorAll('input[data-name="' + service.name + '"],button[data-name="' + service.name + '"]'), index;
for (index = 0; index < buttons.length; index++) {
buttons[index].disabled = !consent;
}
}
This code disables all inputs with data-name="googleRecaptcha"
, when no
consent is given for this service and enables the input after the consent is
available.
Disable the submit
Another option would be to disable the form's submit button and display a modal window to enable the reCAPTCHA service, which can be used to re-enable the submit button. The following example code for the onToggle callback does this with jQuery/Bootstrap 5:
function(consent, service) {
var button = $('button[data-name="' + service.name + '"], input[type="submit"][data-name="' + service.name + '"]');
button.css('display', 'inline-block');
if (!consent) {
button.on('click', function(event) {
var recaptchaModal = new bootstrap.Modal(document.getElementById('recaptchaModal'));
recaptchaModal.show();
event.preventDefault();
});
} else {
button.off('click');
}
}
The modal window that appears after clicking the submit button can be created as follows (Bootstrap 5):
<div class="modal fade" id="recaptchaModal" tabindex="-1" aria-labelledby="recaptchaModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="recaptchaModalLabel">reCAPTCHA service needed</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>You have disabled the reCAPTCHA service in the consent settings. This service provides spam protection for our forms. The forms cannot be submitted without enabling the reCAPTCHA service. Please <a data-bs-dismiss="modal" onclick="klaro.show(window.consentFriendConfig, { modal: true });return false;">enable</a> the service in the settings. Alternatively, you can send us an <a href="mailto:[[++emailsender]]">email</a>.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>