Missing catcha error does not integrate with Jetpack form errors

[JPry]

Description

The integration with Jetpack forms doesn't show errors the same way native form fields show errors. This makes it easy for the user filling out the form to miss that the captcha is required.

Details

When a captcha field is shown as part of a Jetpack contact form, there are 2 issues:

1. The error display isn't obvious. There's no styling of the error message, so the error is easy to miss.
2. When the form submission is blocked, the fields that were filled out already are cleared.

Steps to reproduce

1. Activate the Jetpack plugin, and enable contact forms.
2. Activate the hCaptcha plugin, fill in site key & secret, and enable the Jetpack forms integration.
3. Create and publish a Jetpack form on a post or page.
4. Fill out the form and submit, but do not complete the captcha. An error will be displayed, but it is not styled appropriately for an error. Any additional fields that were filled in are now cleared.
5. Fill out the form and submit, but omit a required field. A more obvious error will be displayed, and the other fields will retain their data.

Here's a short video illustrating the issue:

https://github.com/hCaptcha/hcaptcha-wordpress-plugin/assets/871924/a49a26d7-919a-4198-8431-313e8213c7df

[kagg-design]

Hi, @JPry,

Thank you for a detailed problem description; it is always appreciated.

Unfortunately, a problem here relates to the bad design of JetPack forms. It does not use Ajax to send a form. Therefore, all fields are cleared upon POST submission. Due to security reasons, however, any verifications must be done on the backend, and hCaptcha is not an exclusion. The errors you see in red in your video are produced on the JS side in the client browser, even before form submission.

To see the example, please do the following. Deactivate our plugin and use a pure standard JetPack contact form. Fill out the name field and put a@a (without the domain name). This wrong email address passes verification on the JS side, and you can send the form. However, this wrong email address does not pass JetPack verification on the backend, and here is what you will have after sending the form:

As you can see, the error messaging is poor, and, what is more critical, fields are cleared. This is by JetPack Forms design - after sending the form to the backend, the page is updated with empty fields. There is no solution for it except sending forms by Ajax, but I do not see any controls in the admin allowing sending a form via Ajax.

I make hCaptcha error messaging more stylish. Will report below.

[kagg-design]

I have improved the styling of hCaptcha errors. But mostly, you won't see them as from now. I have added the Force hCaptcha Check Before the Submit feature, which forces the hCaptcha challenge on clicking the submit button. It prevents form submit if hCaptcha was not solved and eliminates issues with clearing form fields.

Please see the video below.

https://github.com/hCaptcha/hcaptcha-wordpress-plugin/assets/28291450/60678008-fc69-4d26-9edf-5c37f21b5afa

The feature will be released with v3.10.0 in the beginning of March.