reCAPTCHA not valid when part of a modular page on Agency theme

Support Plugins
,
1

I can confirm that my form works with Captcha disabled.

I am using the Agency theme, with a modular one-page site. When I set up the form for reCaptcha, I get the following error in grav.log:

Form reCAPTCHA Errors: [/home] ["missing-input-response"] [] []

I created a separate, non-modular page with the same code, and the CAPTCHA succeeds. Here is the code:

title: 'Contact Form'
form:
    action: '/home#contact'
    name: contact
    fields:
        name:
            name: name
            label: Name
            classes: form-control
            placeholder: 'Enter your name'
            autocomplete: 'on'
            type: text
            position: left
            validate:
                required: true
        email:
            name: email
            label: Email
            classes: form-control
            placeholder: 'Enter your email address'
            type: email
            position: left
            validate:
                required: true
        message:
            name: message
            label: Message
            classes: form-control
            placeholder: 'Enter your message'
            type: textarea
            position: right
            validate:
                required: true
        g-recaptcha-response:
            name: g-recaptcha-response
            label: Captcha
            type: captcha
            recaptcha_site_key: 6xxxxxxxxxxxxxxxG9
            recaptcha_not_validated: 'Captcha not valid!'
    buttons:
        submit:
            type: submit
            classes: 'btn btn-primary btn-lg'
            value: Submit
    process:
        captcha: true
        message: 'Captcha passed...'
        save:
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
            body: '{% include ''forms/data.txt.twig'' %}'
        email:
            subject: '[Site Contact Form] {{ form.value.name|e }}'
            body: '{% include ''forms/data.html.twig'' %}'
        display: null

the form.yaml is:

enabled: true
built_in_css: true
inline_css: true
refresh_prevention: false
client_side_validation: true
inline_errors: false
files:
  multiple: false
  limit: 10
  destination: self@
  avoid_overwriting: true
  random_name: false
  filesize: 0
  accept:
    - 'image/*'
recaptcha:
  version: '3'
  theme: dark
  site_key: 6LxxxxxxxxxxG9
  secret_key: 6LxxxxxxxxxxZhQ
2

Both forms are currently live here:

Modular: https://freakypeople.ca/home#contact
Standalone: https://freakypeople.ca/contactus (not formatted)

3

@rcdncn, The only thing I can see at the front-end is that the modular page does not load the reCaptcha javascript files. And hence, no token will be send to the server which expects to receive one. The server then starts whining…

Haven’t looked at your setup yet.

4

I couldn’t make v3 work with async form. Also, try disabling cache for that module and see if it helps

5

@rcdncn, The following setup seems to be working fine using a default install of the latest Grav and Quark, but fails to work using Agency.

Folder structure:

user/pages
├── 01.home
│   └── default.md
├── 02.typography
│   └── default.md
└── 03.contact
    ├── _contact
    │   └── form.md
    └── modular.md

Content of ‘modular.md’:

---
content:
  items: '@self.modular'

form:
  action: /contact
  name: my-nice-form
  fields:
    name:
      name: name
      type: text

    g-recaptcha-response:
      name: g-recaptcha-response
      type: captcha
      recaptcha_site_key: 'my site key'
      recaptcha_not_validated: 'Captcha not valid!'

  buttons:
    submit:
      type: submit

  process:
    captcha: true
    message: 'Thank you for your feedback!'
---

Content of ‘form.md’:

---
cache_enable: false
---

Content of ‘/user/config/plugins/form.yaml’:

recaptcha:
  version: '3'
  site_key: 'my site key'
  secret_key: 'my secret key'

As said, this setup is working fine using Quark.

When switching to Agency:

  • The input fields are not being shown. Only the buttons.
  • Javascript for reCaptcha is not loaded
  • An error is logged by plugin Form:

    [2021-06-23 09:45:15] grav.WARNING: Form reCAPTCHA Errors: [/contact] [“missing-input-response”]

  • Fix (partly): Theme Agency comes with its own form.html.twig template for modular pages. When disabling (renaming) that template, the reCaptche scripts are being loaded correctly and reCaptcha is working properly.
    Although the layout of the form is no longer in the Agency style…

So, it seems it’s not a Form issue, but rather an Agency issue.

6

But your example is with form setup on modular page itself, not on a module. I think that’s a huge drawback overall of using modular pages. There’s simply no way to make them work without any workarounds if you want just a tiny bit more complex module.

In this case, if you decide not to use the module with form anymore, it would not be enough to delete that page, but you’d also have to remember to remove form config from modular too.

7

@rcdncn, Downloaded the Agency skeleton and inspected its ‘/templates/modular/form.html.twig’ template further.

It appears form fields require a value for ‘position’. Fields without the ‘position’ value are being ignored by the template.

Adding the following to field ‘g-recaptcha-response’ solves the issue:

position: left  # or right

Added an issue for the theme to fix this.

2 Likes
8

:man_facepalming: They should implement the default

9

@Karmalakas, There is more to it then adding a default position. Not all fields require a position because some are not intended to being displayed, like: hidden, captcha, honeypot. You don’t want to add extra divs that require space for these fields.

10

Didn’t dig into their code, but it sounds like, if hidden field doesn’t have a position, then it’s also ignored :slight_smile: Anyway, IMO missing position should not remove the field completely.

11

Thank you @pamtbaau, and @Karmalakas for the quick analysis! I added a position statement to g-recaptcha-response: and it works, though I agree that is pretty unexpected behaviour.

:+1: