Tutorial Wagtail Version: 2.x

Adding Recaptcha to Your Contact Forms

Contact forms are notorious for collecting spam from bots. In this tutorial we'll install a package to automatically add Google Recaptcha to our contact forms. We'll explore how to get the API keys, as well.

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

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

View On GitHub

Adding Recaptcha to Your Contact Forms

The Package Repo

The Git Commit

Related tutorials

The Ultimate Wagtail Developers Course