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
@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.
@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.
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.
@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.
pamtbaau:
Fields without the ‘position’ value are being ignored by the form template of Agency
They should implement the default