Captcha does not work in contact form

[bambita]

It is not possible to add captcha field properly to the form.

I tried both Turnstile cloudflare and google recaptcha following the guides on https://learn.getgrav.org/16/forms/forms/fields-available#turnstile-captcha-field-cloudflare

The form displays weird field in the browser:

And grav returns errors: For Cloudflare - Form Turnstile invalid: [/home] {"success":false,"error-codes":["missing-input-response"],"messages":[]} For reCaptcha - Form reCAPTCHA Errors: [/home] ["missing-input-response"]

[tranduyhung]

I don't use Cloudflare Turnstile so I can't reproduce the issue but for Recaptcha I don't see any problems with it: https://grav-theme-big-picture.flatfiledeveloper.com/. The theme doesn't touch anything in Grav's captcha validation. Do you get the errors with other Grav themes?

[bambita]

I don't use Cloudflare Turnstile so I can't reproduce the issue but for Recaptcha I don't see any problems with it: https://grav-theme-big-picture.flatfiledeveloper.com/. The theme doesn't touch anything in Grav's captcha validation. Do you get the errors with other Grav themes?

Thanks for quick response, I am only using Big Picture theme. Would you please send me your contact form config?

Thank you.

[tranduyhung]

The form is the same to the one in this skeleton plus Captcha config. Sure you need to add your Recaptcha keys in the Form plugin's configuration.

---
title: Contact
heading: Say Hello.

form:
    action: /home
    name: contact-form
    fields:
        - name: name
          label: Name
          placeholder: Name
          type: text
          validate:
            required: true
        - name: email
          label: Email
          placeholder: Email
          type: email
          validate:
            required: true
        - name: message
          label: Message
          placeholder: Message
          type: textarea
          rows: 6
          validate:
            required: true
        - name: g-recaptcha-response
          type: captcha
          label: Captcha
    buttons:
        - type: submit
          value: Send Message
    process:
        - captcha: true
        - email:
            from: "{{ config.plugins.email.from }}"
            to:
              - "{{ config.plugins.email.from }}"
            subject: "[Contact] Message from {{ form.value.name|e }}"
            body: "{% include 'forms/data.html.twig' %}"
        - save:
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
            body: "{% include 'forms/data.txt.twig' %}"
        - display: thank-you
---

[bambita]

With your config it works. I had some fields in different order. It is resolved, you can close the issue. Thanks for your support.