Jump to content

hCaptcha spam protection for ProcessWire forms


MoritzLost
 Share

Recommended Posts

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.

schwarzdesign - Webdesign und Internet-Agentur aus Köln
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

Screenshots (configuration)

config-1.thumb.png.585279d95f7aca049fec5b3c20a51de3.pngconfig-2.thumb.png.4abb86e183dea2446e73c4dc6a06596e.png

Screenshots (hCaptcha widget)

widget-start.png.ea14e69f2ac333f24d87b638b8ffd665.png

 

 

widget-invalid.thumb.png.4991b1b4445af78a14827df9bfd6970b.png

 

  • Like 21
  • Thanks 2
Link to comment
Share on other sites

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! 🙂

  • Like 4
Link to comment
Share on other sites

  • 2 months later...

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.

 

 

Screenshot_2020-08-21 Error Undefined class constant 'skipLabelMarkup'.png

Link to comment
Share on other sites

@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 🙂

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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;
}

 

Link to comment
Share on other sites

  • 2 weeks later...
  • 5 months later...

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!

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

  • 4 months later...
  • 2 weeks later...

Hey @MoritzLost,

short question: Following scenario:

I'm using FormBuilder with the option "Submit to another URL (bypassing Form Builder processing)" (with "Form Submit Method" POST) to process the input of the form on a dedicated page with a separate template.

Is it possible to validate the hCaptcha field on this dedicated page to process only if hCaptcha field is valid.

I'm trying to avoid a scenario where visitors (or rather bots) visit the "processing" URL and causing high traffic.

Any thoughts are welcome... Many greets Jens alias DV-JF

  • Like 1
Link to comment
Share on other sites

@DV-JF Hm, good question. The module builds on the base Inputfield class provided by ProcessWire, so it's built around being used inside a ProcessWire form context. I'm not actually sure how to execute the input validation on itself. That said, all you need to do is create an instance of the module and then execute the ___processInput method. This method expects a WireInputData object that you can get from $input->post(). The method will validate the hCaptcha response and add errors to the module instance, if any. So something like this *might* work:

$InputfieldHCaptcha = $modules->get('InputfieldHCaptcha');
$WireInputData = $input->post();
$InputfieldHcaptcha->processInput($WireInputData);
$errors = $InputfieldHCaptcha->getErrors();
$hasErrors = !empty($errors);

But I can't test this code right now and I haven't done something like this before, so I'm not sure if it's the right approach. If it doesn't, maybe ask in the FormBuilder support area. Ryan knows way more about this ^^

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...