05_2_friendlyCaptcha.md

Friendly Captcha Component

This component will enable Friendly Captcha functionality on your form.

Back-End Configuration

First, you need to set up some server side configuration via form builder. Read more about it here.

Enable Component

import {FriendlyCaptcha} from 'js-pimcore-formbuilder';

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
        new FriendlyCaptcha(form);
    });
});

Default Options

{
    useAutoWidget: true,
    autoWidgetVersionToLoad: null, // change to explict version you want to load from cdn: e.g. 0.9.16, null means latest
    setupField: null,
    friendlyCaptchaFieldClass: 'div.form-builder-friendly-captcha'
}

Extended Usage

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
        new FriendlyCaptcha(form, {
            useAutoWidget: false, // disable it to use your own implementation (see next option "setupField")
            setupField: function (element, form, options) {

                const friendlyCaptionOptions = {
                    doneCallback: function (solution) {
                        console.log("CAPTCHA completed successfully, solution:", solution);
                    },
                    sitekey: options.sitekey,
                }

                const widget = new WidgetInstance(element, friendlyCaptionOptions);

                widget.start();

                formBuilderForm.addEventListener('formbuilder.success', () => widget.reset());
                formBuilderForm.addEventListener('formbuilder.error', () => widget.reset());
            }
        });
    });
});