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 Added

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

Drag and drop this element into your Form.Image Removed

Click on the element in your form and the Edit Invisible reCAPTCHA panel appears (on the right hand side).

...

  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 Added

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

Image RemovedImage Added

Remember to click Apply Change and save the form.

Image Removed

Info
titleImportant reCAPTCHA keys
  • Site keys can actually be shown publicly, but it is censored in this example.
  • Secret keys must never be shown or shared with anyone, because the server uses it to verify reCAPTCHA responses upon form submission.

Testing out the plugin

Image Added

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.Image Removed

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?

Image Added

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.

Image RemovedImage Added

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.

Image Removed

What is a Plugin validation error? incomplete

We will explain how Plugin validation error can occur by demonstrating how an error as such can be replicated.

Image Added

To replicate an error as suchTo replicate plugin validation error is very simple, you only have to provide an invalid reCAPTCHA secret key(e.g. changing .

You can change a letter to a different letter ).or simply make up a reCAPTCHA secret key that does not exist.

For now, 

Image Addedimage 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.Image Removed

Info
titleEdit Invisible reCAPTCHA: Other configurations
  • Custom error text is returned when there is a Plugin validation error
  • Debug mode can be enabled to help app designers indicate what the problem or error is

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.

...