After I enabled this module, I always get recaptcha module working when I am logged out of my site. But whenever I submit the form, I get the error:
"There was an error during validation of your form submission, please try to reload the page and submit form again."
Is it because I am not logged in and the key is not verified from the configuration or is it something else? I have tried multiple time and yes I have inserted the keys correctly.

Comments

jestinijames created an issue. See original summary.

sandboxpl’s picture

Hi @jestinijames ,
the module provide a permission called "bypass simple_recaptcha" :
https://git.drupalcode.org/project/simple_recaptcha/blob/8.x-1.x/simple_...
Could you check that permission? In most cases you can just set that permission for all authenticated roles, so reCAPTCHA code won't execute fore logged in user.
If this won't solve the problem could you give me following info?
- what type of reCAPTCHA do you use: v2 or v3?
- which form do you want to secure? user login / node form / webform?

sandboxpl’s picture

Status: Active » Postponed (maintainer needs more info)
jestinijames’s picture

Status: Postponed (maintainer needs more info) » Needs work

HI sandboxpl, the main issue is that it is not working on forms, I attach the recaptcha.

When I inspected the element, I see that the recaptcha elements are attached to the form I require. (It is a modal popup form)
But the value for 'simple_recaptcha_token' is empty. So I am wondering if it is not able to fetch key values because the user is not logged in. Else I am not sure why I keep getting the above error.

To answer your questions:
- what type of reCAPTCHA do you use: v2 or v3?
I used v3 invisible and added the keys.
- which form do you want to secure? user login / node form / webform?
It is a modal form or a popup form that opens up on a button click. I noticed that the recaptcha tokens are attached. Just not sure if the key exchange is happening or now.

Update: I just checked the js (simple_recaptcha_v3.js) which is being called for the form. and the token value is not getting filled.

I also checked to see if grecaptcha.ready(function() {}); is working and I get that function doesn't exist.

sandboxpl’s picture

@jestinijames I saw your comment on my email , but for some reason it's not showing up here (I'll try to figure out what's happening later),
anyway, here's validation callback for all reCAPTCHA secured forms:
https://git.drupalcode.org/project/simple_recaptcha/blob/8.x-1.x/src/Sim...
as you can see in code, form error is being set after the key exchange is happening, so you should be able to see some api response in dblog report, dblog entry should contain error from API response which you can compare with:
https://developers.google.com/recaptcha/docs/verify#error_code_reference

jestinijames’s picture

Hi @sandboxpl. I have made some progress. I realized that the error
"There was an error during validation of your form submission, please try to reload the page and submit form again"
is appearing because the recaptcha.js is not being loaded at the beginning. When I inspected the element, I saw the below error.

Refused to load the script 'https://www.gstatic.com/recaptcha/releases/75nbHAdFrusJCwoMVGTXoHoM/reca...' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'

Do you know how to correct or fix it?

sandboxpl’s picture

StatusFileSize
new321.43 KB

Hey @jestinijames ,
this looks like reCAPTCHA script is violating CSP policy on your website, are you using CSP module maybe? https://www.drupal.org/project/csp
I've been able to reproduce the error with that module enabled, to fix this I had to follow this doc:
https://developers.google.com/recaptcha/docs/faq#im-getting-an-uncaught-...

So in CSP settings I've configured additional sources recommended by recaptcha docs , see attached screenshot

jestinijames’s picture

Hi @sandboxpl. Thank you for your solution. It has helped me move forward. Unfortunately, the key I used for the domain does not work. When I submit, I get:

Error: Invalid site key or not loaded in api.js: CORRECT_SITE_KEY (This has the correct site key)

priya sundharam’s picture

Hi Sandboxpl,

I was searching for reCaptcha v3 module for Drupal 8. Unfortunately, its not there for drupal 8. But Simple reCaptcha module provides the feature to implement v2(invisible recaptcha), so i have enabled and configured by reviewing the following article.

https://www.drupal.org/project/simple_recaptcha

1. Installed using composer
2. Generated api keys(Site and Secret key) & configured same in the following url admin/config/services/simple_recaptcha
3. Configured webform id in the following url
admin/config/services/simple_recaptcha

Tried by adding recaptcha handler to the webform in the following url
/admin/structure/webform/manage/{webform}/handlers

Invisible captcha widget is rendering in the form, but always getting the following error while submitting the form,
There was an error during validation of your form submission, please try to reload the page and submit form again.

Did i miss anything here?

Clarification Needed: When I configure for invisible captcha, score value configuration is appearing. Here, what is the connection between score value and invisible captcha. Can you please clarify me here?
Score value configuration is for V3 google reCaptcha and Invisible captcha will come under V2 google recaptcha

sandboxpl’s picture

Re #8:
@jestinijames this is usually happening when keys are in conflict, f.e. trying to call reCAPTCHA v3 functions with v2 keys or other way around, please make sure that you're reCAPTCHA type in settings (admin/config/services/simple_recaptcha) is matching with used keys, then clear the cache. This is quite important as library is dynamic and for v3 the required "?render" part is being added on cache rebuild:
https://git.drupalcode.org/project/simple_recaptcha/blob/8.x-1.x/simple_...

If your configuration is fine, please provide me steps to reproduce configuration of your modal forms and I'll try to debug it on my side

Re #9:
@Priya Sundharam when you configure protection for webform, there's no need to configure it twice. Please remove webform form ID from admin/config/services/simple_recaptcha and leave webform handler configured only. Then test out the form again, if it fails, please check what's going on in browser's console and dblog page, every failed submission leaves dblog entry with error code.

Regarding reCAPTCHA score, this is needed for reCAPTCHA v3 (invisible), you configure desired score from 0 to 100, which will be compared with reCATPCHA response. If reCAPTCHA response contains lower score, form submission will be blocked, plese check following page:
https://developers.google.com/recaptcha/docs/v3#interpreting_the_score

priya sundharam’s picture

Hi Sandboxpl,

Thanks for the message.

As you said I have configured for reCaptcha v3 (invisible). Invisible capcha widget is rendering but still getting the same error.
In browser's console, I'm not getting any error related to captcha and in dblog page i'm getting the following error message.
reCAPTCHA validation failed, error codes: missing-input-response

Apart from configuration, do i need to do anything to make this work?

Thanks,
Priya Sundharam

sandboxpl’s picture

Hi @Priya Sundharam,
can you provide me an YAML export of your webform so I can try it out ?
You can do it at /admin/config/development/configuration/single/export

priya sundharam’s picture

Hi Sandboxpl,
Thanks for your message.
below is the yaml export of my webform.

uuid: 0e4fe372-22cc-4394-88ea-2499b522340f
langcode: en
status: open
dependencies:
  module:
    - lions_payment
    - simple_recaptcha_webform
    - stripe_webform
open: null
close: null
weight: 0
uid: 1
template: false
archive: false
id: donation
title: Donation
description: ''
category: ''
elements: "markup_02:\n  '#type': webform_markup\n  '#markup': '<span class=\"number\">1</span> What cause would you like to support?'\nmarkup:\n  '#type': webform_markup\n  '#markup': |\n    <div class=\"banner-flag bg-secondary-d9-tangerine\">Empowering Service Fund</div>\n    \n    <p>A donation to LCIF&#39;s Campaign 100, and all of the causes the foundation supports.</p>\n    \nmarkup_01:\n  '#type': webform_markup\n  '#markup': |\n    <div class=\"banner-flag bg-secondary-d7-violet\">Disaster Relief Fund</div>\n    \n    <p>A donation to LCIF&#39;s Campaign 100, specifically reserved for disaster relief.</p>\n    \ncampaign:\n  '#type': radios\n  '#title': Campaign\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    1: 'Give to Empowering Service Fund'\n    2: 'Give to Disaster Relief Fund'\n  '#options_display': two_columns\n  '#required': true\nmarkup_03:\n  '#type': webform_markup\n  '#markup': '<span class=\"number\">2</span>How much would you like to donate?'\nhow_much_would_you_like_to_donate_:\n  '#type': radios\n  '#title': 'How much would you like to donate?'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    20: $20\n    50: $50\n    100: $100\n    500: $500\n    1000: $1000\n    other_amount: 'Enter Amount'\n  '#options_display': three_columns\n  '#other__option_label': 'Enter Amount'\n  '#required': true\n  '#required_error': 'Amount you would like to donate is required.'\n  '#wrapper_attributes':\n    class:\n      - col-md-2\n  '#format': raw\ndonate_amount:\n  '#type': textfield\n  '#title': 'Enter Amount'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Enter Amount*'\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"how_much_would_you_like_to_donate_\"]':\n        value: other_amount\nmarkup_08:\n  '#type': webform_markup\n  '#markup': 'Select the frequency of your gift'\nis_this_a_recurring_gift_:\n  '#type': radios\n  '#title': 'Is this a recurring gift?'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    One-Time-Gift: One-Time-Gift\n    Monthly: 'Every Month'\n    Yearly: 'Every Year'\n  '#options_display': side_by_side\n  '#attributes':\n    disabled: ''\nemail_notice:\n  '#type': webform_markup\n  '#markup': '* You will receive a donation receipt via email.'\ngift_monthly:\n  '#type': webform_markup\n  '#markup': 'Your donation of $XXX will repeat every month on today&#39;s date and will continue until you cancel payment.&nbsp;If today&rsquo;s date does not exist for a given month (for example, the 31st) your donation will repeat on the last day of that month.'\ngift_quarterly:\n  '#type': webform_markup\n  '#markup': |\n    Your donation of $XXX will repeat every 3 month on the DDth.<br />\n    <br /><br />\n    Your next donation will occur on MM-DD-YYYY and will continue each quarter until you cancel payment.\n    \ngift_yearly:\n  '#type': webform_markup\n  '#markup': 'Your donation of $XXX will repeat every year on today&#39;s date and will continue until you cancel payment.'\nmarkup_04:\n  '#type': webform_markup\n  '#markup': '<span class=\"number\">3</span>Who is the donor?'\nwho_is_this_gift_from_:\n  '#type': radios\n  '#title': 'Who is this gift from?'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#attributes':\n    disabled: ''\n  '#options':\n    a-member: 'A Member'\n    non-member: 'Non Member'\n    club-district: 'Club or District'\n    business: Business\n  '#options_display': side_by_side\n  '#required': true\nfirst_name:\n  '#type': textfield\n  '#title': 'First Name'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'First Name*'\n  '#required': true\n  '#states':\n    visible:\n      - ':input[name=\"who_is_this_gift_from_\"]':\n          value: a-member\n      - or\n      - ':input[name=\"who_is_this_gift_from_\"]':\n          value: non-member\n  '#attributes':\n    disabled: ''\nlast_name:\n  '#type': textfield\n  '#title': 'Last Name'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Last Name*'\n  '#required': true\n  '#states':\n    visible:\n      - ':input[name=\"who_is_this_gift_from_\"]':\n          value: a-member\n      - or\n      - ':input[name=\"who_is_this_gift_from_\"]':\n          value: non-member\n  '#attributes':\n    disabled: ''\n  '#format_items': comma\nclub_or_district_name:\n  '#type': textfield\n  '#title': 'Club or District Name'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Club or District Name*'\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"who_is_this_gift_from_\"]':\n        value: club-district\nbusiness_name:\n  '#type': textfield\n  '#title': 'Business Name'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Business Name*'\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"who_is_this_gift_from_\"]':\n        value: business\nemail_address_2:\n  '#type': email\n  '#title': 'Email Address'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Email Address*'\n  '#required': true\nphone_number_optional:\n  '#type': textfield\n  '#title': 'Phone Number (Optional)'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Phone Number (Optional)'\nconsent_email:\n  '#type': checkbox\n  '#title': 'I consent to receiving occasional email newsletters and updates from Lions Clubs.'\n  '#title_display': inline\n  '#description_display': invisible\naddress:\n  '#type': webform_address\n  '#title': Address\n  '#description_display': invisible\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"who_is_this_gift_from_\"]':\n        '!value': club-district\n  '#wrapper_attributes':\n    class:\n      - col-md-3\n  '#attributes':\n    disabled: ''\n  '#address__placeholder': 'Address*'\n  '#address__required': true\n  '#address_2__placeholder': 'Address 2'\n  '#city__placeholder': 'City/Town*'\n  '#city__required': true\n  '#state_province__placeholder': 'State/Province*'\n  '#postal_code__placeholder': 'Zip/Postal Code*'\n  '#postal_code__required': true\n  '#country__placeholder': 'Country*'\n  '#country__required': true\naddress_provinces_canada:\n  '#type': select\n  '#title': 'Address Provinces in Canada'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    Alberta: Alberta\n    'British Columbia': 'British Columbia'\n    Manitoba: Manitoba\n    'New Brunswick': 'New Brunswick'\n    'Newfoundland and Labrador': 'Newfoundland and Labrador'\n    'Nova Scotia': 'Nova Scotia'\n    Ontario: Ontario\n    'Prince Edward Island': 'Prince Edward Island'\n    Quebec: Quebec\n    Saskatchewan: Saskatchewan\n    'Northwest Territories': 'Northwest Territories'\n    Nunavut: Nunavut\n    Yukon: Yukon\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"address[country]\"]':\n        value: CANADA\naddress_states_india:\n  '#type': select\n  '#title': 'Address States in India'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    'Andhra Pradesh': 'Andhra Pradesh'\n    'Arunachal Pradesh': 'Arunachal Pradesh'\n    Assam: Assam\n    Bihar: Bihar\n    Chhattisgarh: Chhattisgarh\n    Goa: Goa\n    Gujarat: Gujarat\n    Haryana: Haryana\n    'Himachal Pradesh': 'Himachal Pradesh'\n    'Jammu and Kashmir': 'Jammu and Kashmir'\n    Jharkhand: Jharkhand\n    Karnataka: Karnataka\n    Kerala: Kerala\n    'Madhya Pradesh': 'Madhya Pradesh'\n    Maharashtra: Maharashtra\n    Manipur: Manipur\n    Meghalaya: Meghalaya\n    Mizoram: Mizoram\n    Nagaland: Nagaland\n    Odisha: Odisha\n    Punjab: Punjab\n    Rajasthan: Rajasthan\n    Sikkim: Sikkim\n    'Tamil Nadu': 'Tamil Nadu'\n    Telangana: Telangana\n    Tripura: Tripura\n    Uttarakhand: Uttarakhand\n    'Uttar Pradesh': 'Uttar Pradesh'\n    'West Bengal': 'West Bengal'\n    'Andaman and Nicobar Islands': 'Andaman and Nicobar Islands'\n    Chandigarh: Chandigarh\n    'Dadra and Nagar Haveli': 'Dadra and Nagar Haveli'\n    'Daman and Diu': 'Daman and Diu'\n    Delhi: Delhi\n    Lakshadweep: Lakshadweep\n    Puducherry: Puducherry\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"address[country]\"]':\n        value: INDIA\nclub_name:\n  '#type': textfield\n  '#title': 'Club Name'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Club Name'\n  '#autocomplete': 'off'\nmember_id_optional_:\n  '#type': textfield\n  '#title': 'Member ID (Optional)'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Member ID (Optional)'\n  '#pattern': \\d+\nlions_share_pin_text:\n  '#type': webform_markup\n  '#markup': '<p>Your donation qualifies you for a Lions Share pin! Would you like a pin shipped to the address above?</p>'\nlions_share_pin:\n  '#type': radios\n  '#title': 'Lions Share Pin'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    'no': 'No'\n    'yes': 'Yes'\n  '#options_display': two_columns\nmarkup_05:\n  '#type': webform_markup\n  '#markup': 'Is this an anonymous gift?'\nis_this_an_anonymous_gift_:\n  '#type': radios\n  '#title': 'Is this an anonymous gift?'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#attributes':\n    disabled: ''\n  '#options':\n    'no': 'No'\n    'yes': 'Yes'\n  '#options_display': two_columns\nmarkup_06:\n  '#type': webform_markup\n  '#markup': '<span class=\"number\">4</span>Is recognition requested for this donation?'\nrecognition_request:\n  '#type': select\n  '#title': 'Requesting Recognition'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    'no recognition': 'No recognition requested at this time'\n    'special occasion': 'Yes, for a special occasion'\n    memorial: 'Yes, for a memorial'\n    'melvin jones fellowship': 'Yes, for a Melvin Jones Fellows/Progressive Melvin Jones Fellows Program'\n  '#empty_option': 'Make a selection'\n  '#required': true\nrecognition_no_recogn_msg:\n  '#type': webform_markup\n  '#states':\n    visible:\n      ':input[name=\"recognition_request\"]':\n        value: 'no recognition'\n  '#markup': 'I want to support LCIF&#39;s humanitarian efforts without receiving any recognition. An acknowledgement letter will be sent to the donor for all gifts.'\nrecognition_send_card_msg:\n  '#type': webform_markup\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n  '#markup': 'Is your donation intended as a gift to someone special? LCIF can send a card on your behalf.'\nrecognition_melvin_jones_msg:\n  '#type': webform_markup\n  '#states':\n    visible:\n      ':input[name=\"recognition_request\"]':\n        value: 'melvin jones fellowship'\n  '#markup': |\n    You may receive fellowship recognition credit for yourself or choose to recognize someone else. <strong>This option may be used for full MJF/PMJF donations or fellowship installments.</strong><br />\n    &nbsp;\n    \nrecognition_name:\n  '#type': textfield\n  '#title': 'Recipient''s Name'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Recipient''s Name*'\n  '#required': true\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\nrecognition_plaque_display:\n  '#type': textfield\n  '#title': 'Name to be displayed on plaque'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Name to be displayed on plaque (for MJF only)*'\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"recognition_request\"]':\n        value: 'melvin jones fellowship'\nrecognition_club_name:\n  '#type': textfield\n  '#title': 'Recipient''s Club Name'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Recipient''s Club Name*'\n  '#required': true\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\nrecognition_member_id:\n  '#type': textfield\n  '#title': 'Recipient''s Member ID (Optional)'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Recipient''s Member ID (Optional)'\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\nrecognition_message:\n  '#type': textarea\n  '#title': 'Recognition Message (Optional)'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Recognition Message (Optional)'\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\nrecognition_where_ship_msg:\n  '#type': webform_markup\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\n  '#markup': 'Where will the recognition items be shipped?'\nrecognition_shipping_address_donor:\n  '#type': checkbox\n  '#title': 'Shipping address is the same as donor address (LCIF cannot ship to a PO Box).'\n  '#title_display': inline\n  '#description_display': invisible\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\nrecognition_shipping_first_name:\n  '#type': textfield\n  '#title': 'Shipping First Name'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Shipping First Name*'\n  '#required': true\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\nrecognition_shipping_last_name:\n  '#type': textfield\n  '#title': 'Shipping Last Name'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Shipping Last Name*'\n  '#required': true\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\nrecognition_shipping_phone:\n  '#type': textfield\n  '#title': 'Phone Number'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Phone Number*'\n  '#required': true\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\nrecognition_shipping_address:\n  '#type': webform_address\n  '#title': 'Recognition Shipping Address'\n  '#description_display': invisible\n  '#required': true\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\n  '#wrapper_attributes':\n    class:\n      - col-md-3\n  '#attributes':\n    disabled: ''\n  '#address__placeholder': 'Address*'\n  '#address__required': true\n  '#address_2__placeholder': 'Address 2'\n  '#city__placeholder': City/Town\n  '#city__required': true\n  '#state_province__placeholder': State/Province\n  '#postal_code__placeholder': 'Zip/Postal Code*'\n  '#postal_code__required': true\n  '#country__placeholder': 'Country*'\n  '#country__required': true\nshipping_address_provinces_in_canada:\n  '#type': select\n  '#title': 'Shipping Address Provinces in Canada'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    Alberta: Alberta\n    'British Columbia': 'British Columbia'\n    Manitoba: Manitoba\n    'New Brunswick': 'New Brunswick'\n    'Newfoundland and Labrador': 'Newfoundland and Labrador'\n    'Nova Scotia': 'Nova Scotia'\n    Ontario: Ontario\n    'Prince Edward Island': 'Prince Edward Island'\n    Quebec: Quebec\n    Saskatchewan: Saskatchewan\n    'Northwest Territories': 'Northwest Territories'\n    Nunavut: Nunavut\n    Yukon: Yukon\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"recognition_shipping_address[country]\"]':\n        value: CANADA\nshipping_address_states_india:\n  '#type': select\n  '#title': 'Shipping Address States in India'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    'Andhra Pradesh': 'Andhra Pradesh'\n    'Arunachal Pradesh': 'Arunachal Pradesh'\n    Assam: Assam\n    Chhattisgarh: Chhattisgarh\n    Goa: Goa\n    Gujarat: Gujarat\n    Haryana: Haryana\n    'Himachal Pradesh': 'Himachal Pradesh'\n    'Jammu and Kashmir': 'Jammu and Kashmir'\n    Jharkhand: Jharkhand\n    Karnataka: Karnataka\n    Kerala: Kerala\n    'Madhya Pradesh': 'Madhya Pradesh'\n    Maharashtra: Maharashtra\n    Manipur: Manipur\n    Meghalaya: Meghalaya\n    Mizoram: Mizoram\n    Nagaland: Nagaland\n    Odisha: Odisha\n    Punjab: Punjab\n    Rajasthan: Rajasthan\n    Sikkim: Sikkim\n    'Tamil Nadu': 'Tamil Nadu'\n    Telangana: Telangana\n    Tripura: Tripura\n    Uttarakhand: Uttarakhand\n    'Uttar Pradesh': 'Uttar Pradesh'\n    'West Bengal': 'West Bengal'\n    'Andaman and Nicobar Islands': 'Andaman and Nicobar Islands'\n    Chandigarh: Chandigarh\n    'Dadra and Nagar Haveli': 'Dadra and Nagar Haveli'\n    'Daman and Diu': 'Daman and Diu'\n    Delhi: Delhi\n    Lakshadweep: Lakshadweep\n    Puducherry: Puducherry\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"recognition_shipping_address[country]\"]':\n        value: INDIA\nrecognition_shipping_comments:\n  '#type': textarea\n  '#title': 'Shipping Comments (Optional)'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Shipping Comments (Optional)'\n  '#states':\n    visible:\n      - ':input[name=\"recognition_request\"]':\n          value: 'special occasion'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: memorial\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'honor roll certificate'\n      - or\n      - ':input[name=\"recognition_request\"]':\n          value: 'melvin jones fellowship'\nmarkup_07:\n  '#type': webform_markup\n  '#markup': '<span class=\"number\">5</span>How would you like to pay?'\nhow_would_you_like_to_pay_:\n  '#type': radios\n  '#title': 'How would you like to pay?'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#options':\n    credit-card: 'Credit Card'\n    paypal: PayPal\n  '#options_display': two_columns\n  '#required': true\nname_on_card:\n  '#type': textfield\n  '#title': 'Name on Card'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#placeholder': 'Name on Card*'\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"how_would_you_like_to_pay_\"]':\n        value: credit-card\nstripe_card:\n  '#type': stripe\n  '#title': 'Stripe Card'\n  '#title_display': invisible\n  '#description_display': invisible\n  '#required': true\n  '#states':\n    visible:\n      ':input[name=\"how_would_you_like_to_pay_\"]':\n        value: credit-card\n    disabled:\n      ':input[name=\"how_would_you_like_to_pay_\"]':\n        value: paypal\n  '#stripe_selectors_name': ':input[name=\"name[name_on_card]\"]'\nsimple_recaptcha_message:\n  '#type': textfield\n  '#title': simple_recaptcha_message\nactions:\n  '#type': webform_actions\n  '#title': 'Submit button(s)'\n  '#states':\n    enabled:\n      - ':input[name=\"how_would_you_like_to_pay_\"]':\n          value: credit-card\n      - or\n      - ':input[name=\"how_would_you_like_to_pay_\"]':\n          value: paypal\n  '#submit__attributes':\n    class:\n      - 'btn bg-secondary-d4-cornflower'"
css: ''
javascript: "$(document).ready(function(){\r\n    $('body').append($('<script type=\"text/javascript\" src=\"//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5aebaf66316347ba\"></script>'));\r\n});"
settings:
  ajax: false
  ajax_scroll_top: form
  ajax_progress_type: ''
  ajax_effect: ''
  ajax_speed: null
  page: true
  page_submit_path: ''
  page_confirm_path: ''
  page_admin_theme: false
  form_title: both
  form_submit_once: false
  form_exception_message: ''
  form_open_message: ''
  form_close_message: ''
  form_previous_submissions: true
  form_confidential: false
  form_confidential_message: ''
  form_remote_addr: true
  form_convert_anonymous: false
  form_prepopulate: false
  form_prepopulate_source_entity: false
  form_prepopulate_source_entity_required: false
  form_prepopulate_source_entity_type: ''
  form_reset: false
  form_disable_autocomplete: false
  form_novalidate: false
  form_disable_inline_errors: false
  form_required: true
  form_unsaved: false
  form_disable_back: false
  form_submit_back: false
  form_autofocus: false
  form_details_toggle: false
  form_access_denied: default
  form_access_denied_title: ''
  form_access_denied_message: ''
  form_access_denied_attributes: {  }
  form_file_limit: ''
  submission_label: ''
  submission_log: false
  submission_views: {  }
  submission_views_replace: {  }
  submission_user_columns: {  }
  submission_user_duplicate: false
  submission_access_denied: default
  submission_access_denied_title: ''
  submission_access_denied_message: ''
  submission_access_denied_attributes: {  }
  submission_exception_message: ''
  submission_locked_message: ''
  submission_excluded_elements: {  }
  submission_exclude_empty: false
  submission_exclude_empty_checkbox: false
  previous_submission_message: ''
  previous_submissions_message: ''
  autofill: false
  autofill_message: ''
  autofill_excluded_elements: {  }
  wizard_progress_bar: true
  wizard_progress_pages: false
  wizard_progress_percentage: false
  wizard_progress_link: false
  wizard_start_label: ''
  wizard_preview_link: false
  wizard_confirmation: true
  wizard_confirmation_label: ''
  wizard_track: ''
  preview: 0
  preview_label: ''
  preview_title: ''
  preview_message: ''
  preview_attributes: {  }
  preview_excluded_elements: {  }
  preview_exclude_empty: true
  preview_exclude_empty_checkbox: false
  draft: none
  draft_multiple: false
  draft_auto_save: false
  draft_saved_message: ''
  draft_loaded_message: ''
  draft_pending_single_message: ''
  draft_pending_multiple_message: ''
  confirmation_type: page
  confirmation_title: 'Thank You!'
  confirmation_message: "<section class=\"component-page-header no-print\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-7 offset-md-1\">\r\n<h1>Thank you for your generosity!</h1>\r\n\r\n<div class=\"body\">100% of your donation to Campaign 100 will empower Lions to address global needs&mdash;one community at a time. You will receive an email confirmation shortly.</div>\r\n</div>\r\n</div>\r\n</div>\r\n</section>\r\n\r\n<section class=\"component-article-banner no-print\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-10 offset-md-1\"><img alt=\"\" height=\"341\" src=\"/sites/default/files/inline-images/donation-thank-you.png\" width=\"1039\" /></div>\r\n</div>\r\n</div>\r\n</section>\r\n\r\n<section class=\"component-donation-receipt\">\r\n<div class=\"container\">\r\n<div class=\"row no-print\">\r\n<div class=\"col-md-7 offset-md-1\">\r\n<h2>&nbsp;</h2>\r\n</div>\r\n</div>\r\n\r\n<div class=\"row no-print\">\r\n<div class=\"col-md-10 col-lg-4 offset-lg-1\">\r\n<section class=\"component-text-lock-up\">\r\n<div class=\"block\">\r\n<div class=\"block-text\">\r\n<h3>Share your impact with friends and family</h3>\r\n\r\n<div class=\"separator\">&nbsp;</div>\r\n\r\n<div class=\"tile-body\">You made a big difference today. Let everyone know!</div>\r\n</div>\r\n</div>\r\n</section>\r\n</div>\r\n\r\n<div class=\"col-md-10 col-lg-5 offset-md-1\">\r\n<div class=\"social-media\">\r\n<div class=\"addthis_inline_share_toolbox\" data-description=\"The Lions Clubs International Foundation is only as strong as those who support it. Every donation made helps Lions around the world provide greater service to those who need it the most. And 100% of your donations go to the support of our grants and programs.\" data-title=\"Make A Donation\" data-url=\"[site:url]/donate\">&nbsp;</div>\r\n</div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n<div class=\"col-md-10 offset-md-1\">\r\n<div class=\"receipt\">\r\n<div class=\"row header\">\r\n<div class=\"col-md-6\">\r\n<h3>Donation Receipt</h3>\r\n</div>\r\n\r\n<div class=\"col-md-6 no-print\">\r\n<div class=\"print-receipt\"><a href=\"#\" id=\"btn\">Print Receipt </a></div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"row details\">\r\n<div class=\"col-md-4\">\r\n<div class=\"donation-block\">\r\n<div class=\"title\">Donation Amount</div>\r\n\r\n<div class=\"category-header choice [webform_submission:values:how_much_would_you_like_to_donate_:raw]\">$[webform_submission:values:how_much_would_you_like_to_donate_] USD</div>\r\n\r\n<div class=\"category-header input [webform_submission:values:how_much_would_you_like_to_donate_:raw]\">$[webform_submission:values:donate_amount] USD</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:is_this_a_recurring_gift_:format]</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:campaign]</div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"col-md-4\">\r\n<div class=\"donation-block payment\">\r\n<div class=\"title\">Payment Method</div>\r\n\r\n<div class=\"[webform_submission:values:how_would_you_like_to_pay_:raw]\"><img alt=\"\" class=\"paypal\" src=\"/themes/lionsclubs/images/brand/paypal.png\" /> <img alt=\"\" class=\"visa\" src=\"/themes/lionsclubs/images/brand/visa.png\" /></div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"col-md-4\">\r\n<div class=\"donation-block\">\r\n<div class=\"title\">Email address for receipt</div>\r\n\r\n<div class=\"email-address\">[webform_submission:values:email_address_2]</div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"col-md-4\">\r\n<div class=\"donation-block [webform_submission:values:who_is_this_gift_from_:raw]\">\r\n<div class=\"title\">From</div>\r\n\r\n<div class=\"category-header\">[webform_submission:values:first_name] [webform_submission:values:last_name]</div>\r\n\r\n<div class=\"detail club-or-district\">[webform_submission:values:club_or_district_name]</div>\r\n\r\n<div class=\"detail club-name\">[webform_submission:values:club_name]</div>\r\n\r\n<div class=\"detail member-id\"><span class=\"mem-id\">[webform_submission:values:member_id_optional_]</span><span class=\"mem-label\">(Member ID)</span></div>\r\n\r\n<div class=\"detail business-name\">[webform_submission:values:business_name]</div>\r\n\r\n<div class=\"detail address1\">[webform_submission:values:address:address]</div>\r\n\r\n<div class=\"detail address2\">[webform_submission:values:address:address_2]</div>\r\n\r\n<div class=\"detail city\">[webform_submission:values:address:city], [webform_submission:values:address:state_province][webform_submission:values:address_provinces_canada][webform_submission:values:address_states_india] [webform_submission:values:address:postal_code]</div>\r\n\r\n<div class=\"detail country\">[webform_submission:values:address:country]</div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"col-md-4\">\r\n<div class=\"donation-block [webform_submission:values:recognition_request:raw]\">\r\n<div class=\"title\">In honor of</div>\r\n\r\n<div class=\"category-header\">[webform_submission:values:recognition_name]</div>\r\n\r\n<div class=\"detail honor-message\">[webform_submission:values:recognition_message]</div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"col-md-4\">\r\n<div class=\"donation-block [webform_submission:values:recognition_request:raw]\">\r\n<div class=\"title\">Recognition Shipping Address</div>\r\n\r\n<div class=\"category-header\">[webform_submission:values:recognition_shipping_first_name] [webform_submission:values:recognition_shipping_last_name]</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:recognition_shipping_address:address]</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:recognition_shipping_address:address_2]</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:recognition_shipping_address:city], [webform_submission:values:recognition_shipping_address:state_province] [webform_submission:values:recognition_shipping_address:postal_code]</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:recognition_shipping_address:country]</div>\r\n</div>\r\n\r\n<div class=\"donation-block pin [webform_submission:values:lions_share_pin:raw]\">\r\n<div class=\"title\">PIN Shipping Address</div>\r\n\r\n<div class=\"category-header\">[webform_submission:values:first_name] [webform_submission:values:last_name]</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:address:address]</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:address:address_2]</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:address:city], [webform_submission:values:address:state_province] [webform_submission:values:address:postal_code]</div>\r\n\r\n<div class=\"detail\">[webform_submission:values:address:country]</div>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n</section>"
  confirmation_url: ''
  confirmation_attributes: {  }
  confirmation_back: false
  confirmation_back_label: ''
  confirmation_back_attributes: {  }
  confirmation_exclude_query: false
  confirmation_exclude_token: false
  confirmation_update: false
  limit_total: null
  limit_total_interval: null
  limit_total_message: ''
  limit_total_unique: false
  limit_user: null
  limit_user_interval: null
  limit_user_message: ''
  limit_user_unique: false
  entity_limit_total: null
  entity_limit_total_interval: null
  entity_limit_user: null
  entity_limit_user_interval: null
  purge: none
  purge_days: null
  results_disabled: false
  results_disabled_ignore: false
  token_update: false
access:
  create:
    roles:
      - anonymous
      - authenticated
    users: {  }
    permissions: {  }
  view_any:
    roles: {  }
    users: {  }
    permissions: {  }
  update_any:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_any:
    roles: {  }
    users: {  }
    permissions: {  }
  purge_any:
    roles: {  }
    users: {  }
    permissions: {  }
  view_own:
    roles: {  }
    users: {  }
    permissions: {  }
  update_own:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_own:
    roles: {  }
    users: {  }
    permissions: {  }
  administer:
    roles:
      - administrator
    users: {  }
    permissions: {  }
  test:
    roles: {  }
    users: {  }
    permissions: {  }
  configuration:
    roles: {  }
    users: {  }
    permissions: {  }
handlers:
  stripe:
    id: stripe
    label: Stripe
    handler_id: stripe
    status: true
    conditions:
      enabled:
        ':input[name="how_would_you_like_to_pay_"]':
          value: credit-card
    weight: 0
    settings:
      amount: '[webform_submission:values:how_much_would_you_like_to_donate_]'
      stripe_element: stripe_card
      plan_id: ''
      quantity: ''
      currency: usd
      description: ''
      email: ''
      metadata: ''
      stripe_customer_create: ''
      stripe_charge_create: ''
      stripe_subscription_create: ''
  paypal:
    id: paypal
    label: Paypal
    handler_id: paypal
    status: true
    conditions:
      enabled:
        ':input[name="how_would_you_like_to_pay_"]':
          value: paypal
    weight: 0
    settings: {  }
  recaptcha:
    id: simple_recaptcha
    label: reCAPTCHA
    handler_id: recaptcha
    status: true
    conditions: {  }
    weight: 0
    settings:
      recaptcha_type: v3
      v3_score: '80'
      v3_error_message: 'custom error message'
sandboxpl’s picture

@Priya Sundharam , it works for me, please check following screenshots and make sure that you've got same settings:

1. Key settings in google reCAPTCHA admin (https://www.google.com/recaptcha/admin/) should like like this: https://imgur.com/fhQ7eUW
please pay attention to reCAPTCHA type and Domains
2. Simple reCAPTCHA config (/admin/config/services/simple_recaptcha): https://imgur.com/gjfQUWd
3. Webform handler (/admin/structure/webform/manage/donation/handlers): https://imgur.com/EkYbYzH

Also, please check for any erros in browser's console when you submit your webform,
missing-input-response error is occurring when validation is trying to verify empty response ( https://developers.google.com/recaptcha/docs/verify )
This is handled with JS so any JS-ish error can have impact on that

priya sundharam’s picture

StatusFileSize
new46.59 KB
new46.9 KB
new36.97 KB
new905.02 KB
new417.7 KB

Hi Sandboxpl,

I am also having the same configuration settings but always getting the same error. I've also reviewd all the links which you have shared. Please find screenshots of my recaptcha v3 configuration settings and let me know if anything needs to be done.

sokru’s picture

Version: 8.x-1.0-alpha10 » 8.x-1.x-dev
Category: Support request » Bug report
Status: Needs work » Needs review
StatusFileSize
new1.05 KB

I also had this on V2, found out it works on Seven and Bartik, but not on a custom theme. This is because simple_recaptcha javascript assumes that form submit button is not wrapped on a div element. I attached an a patch that gives more flexibility to template structure, should work with both V2 and V3.

Please review.

  • sandboxpl committed d7e5897 on 8.x-1.x authored by sokru
    Issue #3092703 by sokru, Priya Sundharam, sandboxpl: Error during...
sandboxpl’s picture

@sokru nice catch! This indeed could break the flow, and leave hidden token element empty resulting with validation error.
I've tested the patch with one of my custom project where I've got webforms themed a little, and I was able to reproduce same issue and fix it with your patch, I've committed fix to dev already.

@Priya Sundharam could you retest your webforms with patch #16 or dev version of the module? I would be nice to see it this fixes your problem as well

usmanjutt84’s picture

I just disable ajax submission from webform then it works fine.

sandboxpl’s picture

@usmanjutt84
this issue is active in #3083022

  • sandboxpl committed a0b5735 on 8.x-1.x authored by sokru
    Issue #3092703 Priya Sundharam, sandboxpl: Error during validation of...
sandboxpl’s picture

Status: Needs review » Fixed

I've added info about CSP policy to the troubleshooting guide in README file: https://git.drupalcode.org/project/simple_recaptcha
In #3083022 I've added support for AJAX forms and bunch of fixes and improvements.
I'm closing this issue for now, please check new code , or new release of the module which will arrive soon.
Thanks for the feedback every1 !

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

harshitas’s picture

Hi Sandboxpl,

i am getting this issue "reCAPTCHA validation failed, error codes: invalid-input-response" in error-log when submitting webform. i am verifying captcha code, but sitll form is not submitting.
i added simple_recaptcha_webform in handler.

joshua.boltz’s picture

I am seeing the same issue as @harshita1490. I have a form that submits via Ajax, does some things with the form data, and that all works. But after it does it's thing, if I go to another page or reload the current page, I see the "reCAPTCHA validation failed, error codes: invalid-input-response" error.