Skip to content

A very basic contact form with CAPTCHA module that protects you against spam.

Notifications You must be signed in to change notification settings

FilipWozniak/wagtail-contact-form

Repository files navigation

Wagtail Contact Form

For Wagtail 5.x and 6.x

Description

A very basic contact form with CAPTCHA module that protects you against spam based on two articles from LearnWagtail website ("Contact Forms" and "Adding Recaptcha to Your Contact Forms").



Note

reCAPTCHA V3 is now supported, while reCAPTCHA V2 is deprecated.

Installation and dependecies

  1. Install the package from GitHub.

    pip install git+https://github.com/FilipWozniak/wagtail-contact-form.git
  2. Add the application and its dependencies to the INSTALLED_APPS in your settings file.

    INSTALLED_APPS = [
        "contact_form",
         ### dependencies:
         "django_recaptcha",
         "widget_tweaks"
    ]

    Most systems will already have wagtail.contrib.forms in INSTALLED_APPS - if not, add it, too.

Installation (Development)

If you want install a Python application in editable mode, you can use the editable mode provided by pip.

  1. Clone the application's source code:

    git clone https://github.com/FilipWozniak/wagtail-contact-form .
  2. Navigate to the root directory of the application's source code in the terminal or command prompt.

  3. Install the application in editable mode.

    Use the pip install command with the -e or --editable flag followed by a period (.) to specify the current directory (where the application's setup.py file is located).

    pip install -e .

    Replace the . with the path to the directory if you're running the command from a different location.

  4. Add the application and its dependencies to the INSTALLED_APPS in the settings.py file.

    INSTALLED_APPS = [
        "contact_form",
         ### dependencies:
         "django_recaptcha",
         "widget_tweaks"
    ]

    Most systems will already have wagtail.contrib.forms in INSTALLED_APPS - if not, add it, too.

Configuration

  1. Register reCAPTCHA V3 keys in the reCAPTCHA Admin console.

    Register New Site

  2. Add the following entries to the settings.py file.

    RECAPTCHA_PUBLIC_KEY = ''
    RECAPTCHA_PRIVATE_KEY = ''
    
    RECAPTCHA_REQUIRED_SCORE = 0.85
    
    RECAPTCHA_DOMAIN = 'www.recaptcha.net'
  3. Configure your email settings (EMAIL_BACKEND, EMAIL_HOST etc.), as without these settings Django will most likely return ConnectionRefusedError while attempting to submit the form.

  4. Create a page of new type: "Contact Page". Add required fields to the contact form (see section "Form Fields" below.)

Common Issues

Note that if you are using MacOS you may stumble across URLError while trying to submit the form.

URLError at /contact-us/
<urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] Certificate Verify Failed: Unable to Get Local Issuer Certificate (_ssl.c:1122)>

As regards to "Scraping: SSL: CERTIFICATE_VERIFY_FAILED" issue on Stack Overflow, all you need to do is go to Macintosh HDApplicationsPython folder and double click on Install Certificates.command file.

URL Error

Screenshots

Contact Form

Contact Us

"Thank You" Page

"Thank You" Page

Form Fields

  • Full Name
  • E-Mail Address
  • Message
  • CAPTCHA

[!WARNING] As you can see from the code snippet below, form fields are not rendered dynamically, which means you need to name labels identically as mentioned above — Full Name, E-Mail Address, Message (the CAPTCHA field is generated automatically, you do not need to define it in the backend).

<div class="col-12 col-sm-6">
    <div class="form-group mb-3">
        <label for="full_name">Full Name</label>
        {% render_field form.full_name placeholder=form.full_name.label class="form-control" %}
        <small class="form-text text-muted">{{ form.full_name.field.help_text }}</small>
    </div>
</div>

[!NOTE] Please remember that if you have saved a form with different labels than those mentioned, you must delete the form page and create it again with the correct values.

Custom Form Fields

  • Intro Text
  • Thank You Text
  • E-Mail ("From" Address)
  • E-Mail ("To" Address)
  • E-Mail Subject

Testing

Pytest

cd "project"
pytest -s wagtail_contact_form/contact_form/tests/unit --disable-pytest-warnings

Pytest (testproject)

cd "project"
(cd "wagtail_contact_form/testproject" && DJANGO_SETTINGS_MODULE=testproject.settings.base pytest -s ../contact_form/tests/unit --disable-pytest-warnings)

pre-commit

cd "project"
(cd "wagtail_contact_form" && pre-commit run --files contact_form/tests/unit/*)

Authors

Filip Woźniak