Contrib.social

Captcha doesn't work on forms in blocks

Open on Drupal.org →
Created on 14 December 2020, over 3 years ago
Updated 4 December 2023, 7 months ago

Problem/Motivation

simple_recaptcha doesn't work with forms in blocks. It will stop the form from working. The recaptcha widget does not appear and server-side validation of the recaptcha token will fail because it's blank.

Error message: There was an error during validation of your form submission, please try to reload the page and submit form again.

This is caused by the Block module moving attributes from block content to the block itself, while simple_recaptcha.js looks for a form element with a data-recaptcha-id attribute. For forms in blocks, the data-recaptcha-id attribute has been lifted from the form's render array to the block's render array:

Here's an example of what that looks like (other classes and attributes removed for brevity):

<div class="contact-message-form block block-contact-block" data-recaptcha-id="contact_message_contact_us_form" ...>
  <div class="block__content" ...>
    <form id="contact-message-contact-us-form" ...>

Steps to reproduce

  1. Create a contact form with the core Contact module.
  2. Place the form in a block.
  3. Add the form's ID to simple_recaptcha's configuration.
  4. Attempt to submit the form.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Needs work

Version

1.0

Component

Code

Created by

🇨🇦Canada tbradbury

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 7 months ago →
    🇺🇸United States joshua.boltz

    This patch resolved the issue in my case where I have a subclass of the ZendeskSupportForm and a subclass of the ZendeskFormBlock, where I noticed the captcha was not loading up. When reviewing the JS, it seemed like the "form[data-recaptcha-id=" selector logic was wrong, because that attribute didn't exist on the
    , it exists on the

    wrapper I guess from the block's markup.

    The patch solved this. Was there a reason why it's still in "Needs work"?

  • Comment 7 months ago →
    🇦🇺Australia dpi Perth, Australia

    Thanks, patch works.

    fwiw we were seeing:

    simple_recaptcha.NOTICE: reCAPTCHA validation failed, error codes: invalid-input-response []

  • Comment 7 months ago →
    🇺🇸United States joshua.boltz

    @dpi Are you still seeing the "NOTICE: reCAPTCHA validation failed, error codes: invalid-input-response" errors? I thought I was past them, but after more tests, I am seeing them again.

    I am using the patch I created and submitted in https://www.drupal.org/project/simple_recaptcha/issues/3387780#comment-1... ✨ Explicitly render the reCAPTCHA widget Needs review
    Which includes the patch changes from this issue.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024