module hCaptcha spam protection for ProcessWire forms

[MoritzLost]

This module allows you to integrate hCaptcha bot / spam protection into ProcessWire forms. hCaptcha is a great alternative to Google ReCaptcha, especially if you are in the EU and need to comply with privacy regulations.

The development of this module is sponsored by schwarzdesign.

The module is built as an Inputfield, allowing you to integrate it into any ProcessWire form you want. It's primarily intended for frontend forms and can be added to Form Builder forms for automatic spam protection. There's a step-by-step guide for adding the hCaptcha widget to Form Builder forms in the README, as well as instructions for API usage.

Features

• Inputfield that displays an hCaptcha widget in ProcessWire forms.
• The inputfield verifies the hCaptcha response upon submission, and adds a field error if it is invalid.
• All hCaptcha configuration options for the widget (theme, display size etc) can be changed through the inputfield configuration, as well as programmatically.
• hCaptcha script options can be changed through a hook.
• Error messages can be translated through ProcessWire's site translations.
• hCaptcha secret keys and site-keys can be set for each individual inputfield or globally in your config.php.
• Error codes and failures are logged to help you find configuration errors.

Please check the README for setup instructions.

Links

• Github Repository and documentation
• InputfieldHCaptcha in the module directory

Screenshots (configuration)

Screenshots (hCaptcha widget)

 

 

 

[teppo]

2 hours ago, MoritzLost said:

This module allows you to integrate hCaptcha bot / spam protection into ProcessWire forms. hCaptcha is a great alternative to Google ReCaptcha, especially if you are in the EU and need to comply with privacy regulations.

Literally heard about hCaptcha for the first time earlier today when someone recommended it as a ReCaptcha replacement. Great to have this available as an option! 🙂

[aComAdi]

Hi Moritz,

We would lek to start working with hCaptcha for our Processwire client sites using Form Builder. Ran into the following issue.

Hiding the field label causes 500 Internal Error. I've attached the the error as a screenshot. The environment is:

• PW 3.0.123
• Formbuilder 0.3.9
• PHP Version 7.3.16

Not a biggie, but might be an issue on some implementations.

 

 

[MoritzLost]

@aComAdi Thanks for letting me know! I'm using a constant there that is only available in ProcessWire 3.0.139 and above. I can certainly fix that!

In the meantime, if it's possible for you you can update ProcessWire to the new master version, which should fix the problem as well. But I'll update the module to work with your ProcessWire version as well, hopefully later today 🙂

[MoritzLost]

Release 1.0.1 is now live! It fixes the errors on ProcessWire versions below 3.0.139.

Background: The module uses Inputfield::skipLabelMarkup to remove the label markup if the inputfield is configured to not display a label. This constant was introduced in ProcessWire 3.0.139. On older versions, the module now falls back to Inputfield::skipLabelHeader, which renders the label but hides it with CSS (instead of skipping the label markup completely).

@aComAdi Let me know if the release isn't working for you, or if you have any more problems with the module!

[aComAdi]

The error has disappeared, but the actual label is still displaying. 😉

https://www.garage-fischer.ch/kontakt/kontakt/

[MoritzLost]

6 minutes ago, aComAdi said:

The error has disappeared, but the actual label is still displaying. 😉

Hm, that's curious. The way it's supposed to work is that the label gets the class InputfieldHeaderHidden, and the span inside the label is then hidden with CSS. In your form the class is generated correctly, but for some reason the corresponding CSS is missing. In my test installation, the CSS code that hides the label comes from /site/modules/FormBuilder/FormBuilder.css, which isn't included on your site. Maybe you're missing one of the core CSS files in your FormBuilder output?

If you can't or don't want to include this CSS file, you could just add the required rule manually to any of your stylesheets. This should do the trick:

.InputfieldForm .Inputfield:not(.InputfieldStateCollapsed) > .InputfieldHeaderHidden > span {
  display: none;
}

 

[aComAdi]

Sorry for late replay. It's solved now.

[MoritzLost]

InputfieldHCaptcha 1.0.2

I've just released a bugfix update to this module which should fix an issue with malformed API requests when using cURL. This should help if you had the following problems with the module:

• Captcha validation always fails with error codes missing-input-response and/or missing-input-secret (error codes are logged to the hcaptcha log file).
• General network / API request errors.

The new version 1.0.2 uses cURL only if it's supported on your system and the ProcessWire version is 3.0.167 or above (see this post for an explanation). Otherwise, it uses fopen with a fallback to sockets. If you're having trouble with the updated module, please let me know which ProcessWire version you're running and if your system supports cURL so I can try to replicate the problem.

Update: v1.0.2 contained a small error that prevented fallback to socket if fopen is unavailable (on systems that don't support cURL or below ProcessWire 3.0.167). Fix is live as version 1.0.3

Next steps

I'm planning to implement a couple of additional options for this module soon. In particular:

• An optional permission allowing users to bypass captcha validation.
• A global 'kill-switch' for the module – i.e. a option in the module config or a $config value that disables hCaptcha validation globally, passing all requests.

Let me know if those features would be useful to you or if you have other suggestions to improve this module!

[MoritzLost]

Quick tip: Displaying hCaptcha in the correct language

By default, hCaptcha displays its interface in the visitor's browser language, which means it may differ from the current language of your site. You might want to change that to always use your site's language, or the current language if you have a multi-language site. You can use the hook InputfieldHCaptcha::getScriptOptions to adjust the language of the hCaptcha interface dynamically. Here's a  snippet with a couple of options for setting the language:

// site/ready.php
wire()->addHookAfter('InputfieldHCaptcha::getScriptOptions', function (HookEvent $e) {
    $options = $e->return;

    // option 1: for single-language sites, you can just hardcode a specific language
    $options['hl'] = 'de';

    // option 2: for multi-language sites, you can use the translation api
    $options['hl'] = _x('de', 'hCaptcha Language');

    // option 3: you can also add a custom field to your language template to hold the language code
    $options['hl'] = wire('user')->language->language_code;

    $e->return = $options;
});

For option 2, make sure to add a translation for the language code in every language.

For option 3, first set $config->advanced = true in your config.php so you can edit the language template. You have to create the language_code field yourself and add it to the template, then set the language code in each of your languages.

For all options, make sure to use the correct language code as listed here.