...
Search the Form Element Palette for the Invisible reCAPTCHA element under the Marketplace section.
Drag and drop this element into your Form.
Click on the element in your form and the Edit Invisible reCAPTCHA panel appears (on the right hand side).
...
- Go to https://www.google.com/recaptcha/about/
- Click on v3 Admin Console at the navigation bar
Give your Label a meaningful name (e.g.: recaptcha_test)
For the reCAPTCHA Type, select reCAPTCHA v2 > Invisible reCAPTCHA badge
Under Domains, put the domain name that your Joget DX instance is hosted on.
Info title Setting a domain name If you are using Joget DX on a local computer for development purposes, you can put "localhost" as your domain name.
- Tick Accept the reCAPTCHA Terms of Service
- Click Submit
Copy the generated reCAPTCHA site keys and reCAPTCHA secret keys, and paste them into their respective fields in the Edit Invisible reCAPTCHA configuration.
Remember to click Apply Change and save the form.
...
| Info | ||
|---|---|---|
| ||
|
Testing out the plugin
Try submitting the form where you added the Invisible reCAPTCHA plugin.
If the bottom right corner of your form shows the protected by reCAPTCHA, it means that the Invisible reCAPTCHA plugin is working as intended.
You can seek help from Errors of the plugin if the Invisible reCAPTCHA plugin is not working as intended.
...
What is a reCAPTCHA widget error?
This is how a reCAPTCHA widget error is shown.
...
reCAPTCHA widget error occurs when you may have chosen the v2 tickbox option instead of the v2 invisible option.
Remember to choose the v2 invisible option, so that the reCAPTCHA site key is enabled for the Invisible reCAPTCHA.
...
This is
...
...
how a reCAPTCHA widget error looks like.
Because of this error, the "Form Submitted" message is not shown on the top left corner of the Form.
What is a Plugin validation error?
To replicate plugin validation error is very simple, you only have to provide an invalid reCAPTCHA secret key (e.g. changing a letter to a different letter).
image to be inserted here later..
This is how a Plugin validation error looks like.
Because of this error, the error texts are shown on the top left corner of the Form instead of the "Form Submitted" message.
| Info | ||
|---|---|---|
| ||
You can refer to Custom error text & Debug mode sections. Tip: Hover on the tooltips (? icon) in Edit Invisible reCAPTCHA configuration to read what each configuration properties mean. |
Custom error text & Debug mode
image to be inserted here later..
Custom error text is designed to be shown to end-users when there is a plugin validation error.
...
- Error texts as such do not explain much on what the validation problem is, therefore Custom error text can be used to elaborate the validation problem to end-users
- To produce a meaningful error message or text, you should first understand what a plugin validation error is
...
Enabling Debug mode allows error messages to be printed out for end-users to see.
...