Wagtail Honeypot

Helps to reduce form spam by tricking bots into submitting data in fields that should remain empty.

Wagtail Honeypot

The package provides validation that a hidden text field that should remain empty and checks a time interval between the form being displayed and submitted.

Source code: https://github.com/wagtail-packages/wagtail-honeypot

How it works

When the Wagtail Form is submitted and the honeypot protection is enabled, the honeypot fields & values are available in the POST data.

If the form is submitted with content in the hidden field or before the interval expires the submission is ignored.

  • No email is sent
  • No submission is stored
  • The thank you page is always shown if available.

Installation and setup

Add the package to your python environment.

pip install wagtail-honeypot
bash
note code Copy code

Add the package to your settings

INSTALLED_APPS = [
    ...
    "wagtail_honeypot",
    ...
]
python
note code Copy code

The HoneypotFormMixin & HoneypotFormSubmissionMixin

They will add a honeypot enable/disable field to your form page model and custom form submission method.

If you follow the official Wagtail docs for the Form Builder your form should look something like this...

from wagtail_honeypot.models import (
    HoneypotFormMixin, HoneypotFormSubmissionMixin
)

class FormField(AbstractFormField):
    page = ParentalKey("FormPage", related_name="form_fields")

class FormPage(HoneypotFormMixin, HoneypotFormSubmissionMixin):
    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

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

    honeypot_panels = [
        MultiFieldPanel(
            [FieldPanel("honeypot")],
            heading="Reduce Form Spam",
        )
    ]

    edit_handler = TabbedInterface(
        [
            ObjectList(content_panels, heading="Content"),
            ObjectList(honeypot_panels, heading="Honeypot"),
            ObjectList(Page.promote_panels, heading="Promote"),
            ObjectList(Page.settings_panels, heading="Settings", classname="settings"),
        ]
    )
python
note code Copy code

If you prefer you could add the honeypot field to the content_panels rather than a new Tab

# replace
edit_handler = TabbedInterface(
        [
            ObjectList(content_panels, heading="Content"),
            ObjectList(honeypot_panels, heading="Honeypot"),
            ObjectList(Page.promote_panels, heading="Promote"),
            ObjectList(Page.settings_panels, heading="Settings", classname="settings"),
        ]
    )

# with
content_panels = content_panels + honeypot_panels
python
note code Copy code

Run python manage.py makemigrations and python manage.py migrate here

Honeypot Template Tag

Add the following template tag loader to your form page.

{% load honeypot_tags %}

<!-- Add the Honeypot fields template tag anywhere inside the form -->
<form>
...
{% honeypot_fields page.honeypot %}
...
</form>
html
note code Copy code

In your Wagtail site you should now be able to add a new form page and enable the honeypot field.

Test that the honey pot field works

View the newly created form page. The honeypot field is visible and could be submitted with any value. Test it out by submitting the form with the honeypot field set to any value.

It won't save the form submission or send an email if you have enabled that in your form page.

Hide the Honeypot field

The honeypot field should be invisible when viewed in a browser.

Use CSS & JS to hide the honeypot field

The package has some basic css and javascript you can use to hide the field.

Example: add the following to your form template.

<!-- recommended: to add both but you can use one or the other -->

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/honeypot.css' %}">
{% endblock extra_css %}

<!-- alternative: but without the css above loaded first the field could be seen for a flash while the page loads -->

{% block extra_js %}
<script src="{% static 'js/honeypot.js' %}"></script>
{% endblock extra_js %}
html
note code Copy code

The field should be visibly hidden and not be available to receive any value from a site visitor.

When rendered, the fields will have the HTML attributes tabindex="-1" autocomplete="off" to prevent a site visitor from using the tab key to move to the field and disable any autocomplete browser functions.