Jump to content
MoritzLost

hCaptcha spam protection for ProcessWire forms

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 20
  • Thanks 2

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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 🙂

Share this post


Link to post
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

Share this post


Link to post
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;
}

 

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By joshua
      ---
      Module Directory: https://modules.processwire.com/modules/privacy-wire/
      Github: https://github.com/blaueQuelle/privacywire/
      Packagist:https://packagist.org/packages/blauequelle/privacywire
      Module Class Name: PrivacyWire
      Changelog: https://github.com/blaueQuelle/privacywire/blob/master/Changelog.md
      ---
      This module is (yet another) way for implementing a cookie management solution.
      Of course there are several other possibilities:
      - https://processwire.com/talk/topic/22920-klaro-cookie-consent-manager/
      - https://github.com/webmanufaktur/CookieManagementBanner
      - https://github.com/johannesdachsel/cookiemonster
      - https://www.oiljs.org/
      - ... and so on ...
      In this module you can configure which kind of cookie categories you want to manage:

      You can also enable the support for respecting the Do-Not-Track (DNT) header to don't annoy users, who already decided for all their browsing experience.
      Currently there are four possible cookie groups:
      - Necessary (always enabled)
      - Functional
      - Statistics
      - Marketing
      - External Media
      All groups can be renamed, so feel free to use other cookie group names. I just haven't found a way to implement a "repeater like" field as configurable module field ...
      When you want to load specific scripts ( like Google Analytics, Google Maps, ...) only after the user's content to this specific category of cookies, just use the following script syntax:
      <script type="text/plain" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script> <script type="text/plain" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script> <script type="text/plain" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"></script> <script type="text/plain" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script> The data-attributes (data-type and data-category) are required to get recognized by PrivacyWire. the data-attributes are giving hints, how the script shall be loaded, if the data-category is within the cookie consents of the user. These scripts are loaded asynchronously after the user made the decision.
      If you want to give the users the possibility to change their consent, you can use the following Textformatter:
      [[privacywire-choose-cookies]] It's planned to add also other Textformatters to opt-out of specific cookie groups or delete the whole consent cookie.
      You can also add a custom link to output the banner again with a link / button with following class:
      <a href="#" class="privacywire-show-options">Show Cookie Options</a> <button class="privacywire-show-options">Show Cookie Options</button>  
      I would love to hear your feedback 🙂
      CHANGELOG
      You can find the always up-to-date changelog file here.
    • By joshua
      As we often use Matomo (former known as Piwik) instead of Google Analytics we wanted to embed Matomo not only in the template code but also via the ProcessWire backend.
      That's why I developed a tiny module for the implementation.
      The module provides the possibility to connect to an existing Matomo installation with the classical site tracking and also via the Matomo Tag Manager.
      If you have also PrivacyWire installed, you can tell MatomoWire to only load the script, if the user has accepted cookies via PrivacyWire.
      To offer an Opt-Out solution you can choose between the simple Opt-Out iFrame, delivered by your Matomo installation, or a button to choose cookies via PrivacyWire.
      You'll find the module both in the module directory and via github:
      ProcessWire Module Directory MatomoWire @ GitHub MatomoWire @ Packagist ->installable via composer require blauequelle/matomowire I'm looking forward to hear your feedback!


    • By Robin S
      If your module has a lot of config fields you might want to divide them into groups inside a tabbed interface. Here is a demonstration module showing how this can be done.
      https://github.com/Toutouwai/ModuleConfigTabs

      Thanks to @kixe for providing my starting point in this forum topic.
    • By theoretic
      Hi there! And thanks for Processwire!
      It appears there's a possible bug in Processwire 3.0.170 concerning file and/or image inputfield. Creating such a field results in the following error:

      Fatal Error: Uncaught Error: Call to a member function get() on null
      The inputfield is created however. The closer look reveals a problem at line 60 in wire\modules\Fieldtype\FieldtypeFile\config.php:
      if(!$value) $value = $fieldtype->get('defaultFileExtensions'); Commenting this line removes the problem, but the newly created inputfield requires 'Allowed file extensions' config option to be set (which is rather expectable since i commented the above-cited line of code). Never faced this problem before, hope it can be resolved.
    • By Lewis Newson
      Hi All,
      Im working on streamlining my email sending setup for SMTP. I have a page where the user of the website can input the SMTP host, port, connection type email and password etc but the password field has an additional box underneath it for 'Confirming' it as if it were a new password. The placeholder text also says 'New Password' but I want to be able to change that. I just need an input field where they can enter their SMTP password without it being plain text.
      Thanks for your help!
×
×
  • Create New...