Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

In the Form Builder, open up any Form that you wish to implement this feature for.

Image Modified

Search the Form Element Palette for the Invisible reCAPTCHA element under the Marketplace section.

...

  1. Go to https://www.google.com/recaptcha/about/
  2. Click on v3 Admin Console at the navigation bar
  3. Give your Label a meaningful name (e.g. recaptcha_test)

  4. For the reCAPTCHA Type, select reCAPTCHA v2 > Invisible reCAPTCHA badge

  5. Under Domains, put the domain name that your Joget DX instance is hosted on.

    Info
    titleSetting a domain name

    If you are using Joget DX on a local computer for development purposes, you can put "localhost" as your domain name.

  6. Tick Accept the reCAPTCHA Terms of Service
  7. Click Submit

Image Modified

Copy the generated reCAPTCHA site keys and reCAPTCHA secret keys, and paste them into their respective fields in the Edit Invisible reCAPTCHA configuration.

Image Modified

Remember to click Apply Change and save the form.

...

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 Plugin Error Troubleshooting if the Invisible reCAPTCHA plugin is not working as intended.

...

Plugin Error Troubleshooting

There are two types of error that may occur when using the Invisible reCAPTCHA plugin:

...

What is a reCAPTCHA widget error?

...

reCAPTCHA widget error occurs when the widget on the frontend is unable to function properly.

Image Added

For example, you may have chosen the v2 tickbox option instead of the v2 invisible option.

...

Because of this error, the "Form Submitted" message is not shown on the top left corner of the Formform will not be submitted.

What is a Plugin validation error?

This section explains what causes Plugin validation error to occur by demonstrating how an error as such can be replicatederror occurs when the reCAPTCHA plugin is unable to perform backend validation to verify the user that has submitted the form.

To For example, to simply replicate a Plugin validation error is very simpleerror, you only have to provide an invalid reCAPTCHA secret key.

...

But note that if Debug mode is enabled, you will see neither default error text or Custom error text (even if you have added it).

...

To demonstrate what the Custom error text and Debug mode are used for, once again the reCAPTCHA secret key is made invalid to replicate the Plugin validation error.

...

Info
titleAbout custom and default error text

Some app designers may want to come out with their own error text instead of using the default error text "reCAPTCHA error".

They may also think that the default error text is not explaining enough on what the validation problem is, therefore they feel the need to make up a meaningful oneFeel free to provide a meaningful error text message.

With Custom error text, app designers can decide what content messagethey want their error message to containto display to end users.

What is Debug mode for?

With the same invalid reCAPTCHA secret key and Custom error text, but this time the Debug mode is enabled.

Remember to click Apply Change and save the form.

...

  • "[reCAPTCHA DEBUG MODE ENABLED!]" states that Debug mode is enabled, to warn app designers that additional error info are available in the server log
  • "reCAPTCHA error: invalid-input-secret" states that the reCAPTCHA secret key is invalid

...

The Invisible reCAPTCHA plugin can or cannot work as intended will only work in some situations.
See table below:

Normal Form

Only a singleplugin can exist and work as intended.

Multiple plugins can be loaded into a single Normal Form, but only the first plugin can work as intendedwill be functioning.

Sub-Form

A plugin cannot work as intended in a Sub-Form, but it can work in the Base Form.

CRUD Datalist "New"

Has identical performance and outcomes with the Normal Form and Sub-Form:

  • The Normal Form that CRUD Datalist represents only allows a single plugin to work in it, even though multiple plugins can still be loaded into it
  • The Sub-Form that CRUD Datalist represents only allows the plugin to work in its Base Form

CRUD Datalist "Edit"

...