Learn Wagtail CMS Course

Adding Recaptcha to Your Contact Forms

Most websites need a contact form so users can get in touch with the people who run, maintain and operate a website. But there's a lurking danger around the corner: bots. These annoying, automated, and sometimes very sophisticated programs will scrape your website and try to submit forms. If it's a login form, it'll try to guess common login credentials. If it's a contact form, it'll spam you annoying messages about various adult subjects.

In this tutorial, we install a package called wagtail-django-recaptcha. This allows us to add a Google Recaptcha to our contact form and reduce the number of fake form submissions.

It won't remove 100% of all spam submissions, but it will drastically reduce them to a manageable state. And if you're building websites for clients, this will make them much happier.

In total, this should take you less than 10 minutes to install.

First things first, install the package.

pip install wagtail-django-recaptcha

Next you'll need to enable the app in your Django application.

# base.py 

INSTALLED_APPS = [
    # ...
    'captcha',
    'wagtailcaptcha',
]

At this point, you have the recaptcha package installed in your Django. Next, head on over to google.com/recaptcha and get some API keys. If you're uncertain about how to do that, I cover all of it in the video.

After you've gotten your API credentials from Google, apply them to your base.py settings file. And disable NOCAPTCHA.

RECAPTCHA_PUBLIC_KEY = "{public_key_here}"
RECAPTCHA_PRIVATE_KEY = "{secret_key_here}"
NOCAPTCHA = True

Lastly, you'll need to change your Contact Page model. If you don't have a Contact Form Page yet, see this tutorial: Contact Forms. Below is the full code to get up and running with a Contact Form that uses a Recaptcha.

from django.db import models

from modelcluster.fields import ParentalKey
from wagtail.admin.edit_handlers import (
    FieldPanel,
    FieldRowPanel,
    InlinePanel,
    MultiFieldPanel
)
from wagtail.core.fields import RichTextField
from wagtail.contrib.forms.models import AbstractFormField, AbstractEmailForm

from wagtailcaptcha.models import WagtailCaptchaEmailForm


class FormField(AbstractFormField):
    page = ParentalKey(
        'ContactPage',
        on_delete=models.CASCADE,
        related_name='form_fields',
    )


class ContactPage(WagtailCaptchaEmailForm):

    template = "contact/contact_page.html"
    # This is the default path.
    # If ignored, Wagtail adds _landing.html to your template name
    landing_page_template = "contact/contact_page_landing.html"

    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

    content_panels = AbstractEmailForm.content_panels + [
        FieldPanel('intro'),
        InlinePanel('form_fields', label='Form Fields'),
        FieldPanel('thank_you_text'),
        MultiFieldPanel([
            FieldRowPanel([
                FieldPanel('from_address', classname="col6"),
                FieldPanel('to_address', classname="col6"),
            ]),
            FieldPanel("subject"),
        ], heading="Email Settings"),
    ]

Create a new Contact Page and view it in your browser, and you should see this image

Recaptcha Box

This is a Google V2 Recaptcha

The Package Repo

This package and repo, the one for wagtail-django-recaptcha, is maintained by Springload. They do great things with Wagtail so make sure you check out their entire GitHub organization.

The Git Commit

If you just want to git commit, you can find it here: https://github.com/CodingForEverybody/learn-wagtail/commit/49a73bea1c2505f408b39c2ba0cc097af4bc91d1

And if you need a refresher on how to add a Wagtail Contact Form, you can find the tutorial here and the git commit here.