Help with reCaptcha and Contact Form

I just started with GRAV this week, coming from many years with Joomla + Rockettheme. I’m using Gantry 5 with Helium. I’ve mostly figured things out, but I can’t solve an issue with getting a contact form to work with or without CAPTCHA. I started with pasting the basic form from learn GRAV in a form.md page. I only changed the name. I added the sendmail and CAPTCHA (v2 Invisible) site/secret info in Email and Form plugins.

---
title: Contact
form:
    name: contact
    fields:
        name:
            label: Name
            placeholder: 'Enter your name'
            autocomplete: 'on'
            type: text
            validate:
                required: true
        email:
            label: Email
            placeholder: 'Enter your email address'
            type: email
            validate:
                required: true
        message:
            label: Message
            placeholder: 'Enter your message'
            type: textarea
            validate:
                required: true
    buttons:
        submit:
            type: submit
            value: Submit
        reset:
            type: reset
            value: Reset
    process:
        save:
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
            body: '{% include ''forms/data.txt.twig'' %}'
        email:
            to: #######@knyghtlyarmes.com
            from: ######@knyghtlyarmes.com
            subject: '[Site Contact Form] {{ form.value.name|e }}'
            body: '{% include ''forms/data.html.twig'' %}'
        message: 'Thank you for getting in touch!'
---

# Send us an Email

Whenever I clicked the Send button, I received an error that “No Secret Provided” (below) even though the info was in the plugin.

I tried adding the site and secret keys directly in the form.md file just to see if it would work. I then got an error that the “to” and “from” emails were missing even though they were in the plugin. I added them directly into the form.md file and it appeared to work, but no email was actually sent. I stripped out the CAPTCHA portion of the script (as shown above) just to make sure that wasn’t the problem. It is still not sending an email. I then changed the email plugin from sendmail to SMTP and provided the account info in the plugin. It is still not sending an email. I have verified all the SMTP info is correct. I cannot figure out why the site is not sending emails. It seems like the site is not accessing the info entered into the appropriate plugins. The entire site is only a few days old and everything is up to date.

I have Native selected in the E-mail plugin, not SMTP/sendmail. I also use Basic Captcha. Everything works fine.

I switched it to Native. It acts like it works, but it is still not sending an email.

Cursor.ai and I had a long time to create a working feedback form in Gantry. As a result, the following instructions came out.


How to Set Up a Form with Basic Captcha in Grav

If you’re struggling to get the simple “Basic Captcha” working with the Grav Form plugin, especially with frameworks like Gantry 5, this guide will walk you through the necessary steps.


Step 1: Configure Your Form Page (form.md)

In your page’s .md file, you need to correctly define the form field and the processing action. The key is to name the field basic-captcha and enable its processing rule.

---
title: 'Contact Us'
form:
    name: contact-form
    
    fields:
        # ... your other fields like name, email ...

        basic-captcha:
            label: 'Please solve the math problem'
            type: captcha
            captcha_type: basic
            validate:
                required: true

    buttons:
        submit:
            type: submit
            value: 'Send Message'

    process:
        # This tells Grav to validate the basic-captcha field on submit
        basic-captcha: true
        
        # ... your other processes like save, email ...
        save:
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
        message: 'Thank you for your message!'
---

# Contact

Please fill out the form below.


Step 2: Create the Form Template (form.html.twig)

Your theme needs a template to render the form page. Create a file at user/themes/YOUR_THEME/templates/form.html.twig.

The content should be simple. It just needs to include the form’s content and the main form template from the plugin. The Form plugin automatically makes the form variable available, so you don’t need to pass it manually.

{% extends '@nucleus/page.html.twig' %} {# Or your theme's base template #}

{% block content %}
    {# This renders the markdown content from your page #}
    {{ page.content|raw }}

    {# This renders the form itself #}
    {% include "forms/form.html.twig" %}
{% endblock %}

Step 3: Make the Captcha Field Visible (The Template Fix)

This is the most common point of failure. The Form plugin looks for a template based on the field’s type. Since type: captcha, it searches for a file named captcha.html.twig. However, the logic for the basic captcha is in a different file.

You must copy the template from the plugin into your theme so it can be found.

  1. Create the destination directory if it doesn’t exist:
    user/themes/YOUR_THEME/templates/forms/fields/captcha/

  2. Copy the file:

    • Source File:
      user/plugins/form/templates/forms/fields/basic-captcha/basic-captcha.html.twig

    • Destination File (Note the new name):
      user/themes/YOUR_THEME/templates/forms/fields/captcha/captcha.html.twig

By doing this, you are telling Grav: “When you need to render a field of type: captcha, use the logic from the basic-captcha.html.twig file.”


After these steps, clear your Grav cache. Your form should now display and correctly validate the Basic Captcha.

Thanks for the very detailed response. Steps 2 and 3 mention a templates folder under my theme (helium 5), but no such folder exists. Perhaps things moved after an update? Any suggestion where I should place the files in those steps?

So, it is necessary to create such a folder.

Maybe you do not want to use Google reCaptcha since they will charge you for all assessments over 10.000 (first 10.000 are free).
Consider switching to hCaptcha instead. I am using it on my website.

I never managed to make invisible reCaptcha (v3) work. Normal v2 works fine. Basic captcha (which is different) is useless IMHO

Thanks for the help, Dima. I got the form working using the basic captcha. Unfortunately, I am already getting spam submissions that get around it. Is there not a way for v2 or v3 to work with GRAV?

I swapped out the code to use the v2 captcha. I have the invisible captcha logo showing up on the page; however, it once again gives a “no secret provided” error.

I also added the Honeypot line to hopefully reduce some spam.

Add honeypot field to your form. It helps quite a bit

Seems like reCaptcha v2 thinks no one is Human anymore. Tried multiple browsers, PCs, phones … and it always replies you’re not Human

Nothing changed on my end, someone just noticed this broke recently. So for now have to go back to mailto or disable recaptcha

Just checked on Android Chrome and seems to be working fine

Well maybe I need to renew my keys or something. But nothing changed on the 3 websites that I use recaptcha on and none seemed to pass the Human test on Win10, Win11, Chromebook, and an iPhone. Not sure if I tried and Android phone or not. Oh well it is always something…

No-one has mentioned Turnstile, the only Cloudflare product I actually like. Working a treat for me.

“I have the same problem here. Do you have a solution for this issue?

No I have not found a work around, I just disabled recaptcha for now.

Did you try Turnstile?

its lower priority than other things I am working on right now, so I will leave recaptcha off for now and won’t look at other options.

At some point in the past 2 weeks reCaptcha v2 stopped working for me too :man_facepalming:

It seems Google moved everything to GCloud and you need to upgrade your keys. Also, if I understand it right, the implementation changed, so I’ll need to look at it at some point
https://console.cloud.google.com/security/recaptcha (need to create a new project if there are none)

I guess I’ll disable it for now too

@Karmalakas, I have a difference perception of the migration process. If I understand reCAPTCHA migration overview  |  reCAPTCHA Enterprise  |  Google Cloud correctly:

  • If you don’t migrate yourself, Google will migrate your account for you.
  • Your keys and code do not need to be changed.
  • Only when you want to make use of the Enterprise features, you’ll need to change your code.