Please read Help Docs to learn details of how reCAPTCHA component works.
Example below shows how both Form Load and Button Click reCAPTCHA components work, together with how to render form with reCAPTCHA from JSON
To test this example, click the ‘Submit’ button and you will see Submission JSON including response from Google for Form Load action under ‘reCaptcha2’ field. Click ‘Test’ button and then ‘Submit’ button and you will see Submission JSON including response from Google for Button Click action under ‘reCaptcha’ field.
Formio.setProjectUrl('https://examples.test-form.io');
const formJSON = {
'components': [
{
'label': 'Test',
'action': 'event',
'type': 'button',
'key': 'test',
'event': 'test'
},
{
'eventType': 'buttonClick',
'type': 'recaptcha',
'key': 'reCaptcha',
'label': 'reCAPTCHA',
'buttonKey': 'test'
},
{
'eventType': 'formLoad',
'type': 'recaptcha',
'key': 'reCaptcha2',
'label': 'reCAPTCHA'
},
{
'type': 'button',
'label': 'Submit',
'key': 'submit',
'action': 'submit'
}
],
'name': 'testRecaptchaForm',
'settings': {
'recaptcha': {
'isEnabled': 'true',
'siteKey': '6Ldc54MUAAAAAP4KjayrT1InduuvCnXvNZUpZpQj'
}
}
};
Formio.createForm(document.getElementById('formio'), formJSON).then(function(form) {
// Provide a default submission.
form.submission = {
data: {
}
};
form.on('submit', function(submission){
console.log(submission);
var jsonElement = document.getElementById('formio-submission-json');
jsonElement.innerHTML = JSON.stringify(submission, null, 4);
})
});