[Django] 15 - Email Contact Form & reCaptcha of Wagtail

为外界提供了交互式的窗口。比较好看，开发快，且动态修改，赞！

Ref: https://github.com/CodingForEverybody/learn-wagtail/commit/d67bc5659ca023c21d8a9f01d30604f6d67cd2d6

代码注意这里，应该是“submit”类型。

 

 

一、模型

class ContactPage(AbstractEmailForm):

    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'),  # <---- Contact Page
        FieldPanel('thank_you_text'),

        MultiFieldPanel([
            FieldRowPanel([
                FieldPanel('from_address', classname="col6"),
                FieldPanel('to_address', classname="col6"),
            ]),
            FieldPanel("subject"),
        ], heading="Email Settings"),
    ]

Orderable 的 投票各种类型的控件。

# 默认是 orderable的一个控件
# Why CASCADE?
# https://stackoverflow.com/questions/38388423/what-does-on-delete-do-on-django-models
# This is the behaviour to adopt when the referenced object is deleted. 
# It is not specific to Django; this is an SQL standard. 
# Although Django has its own implementation on top of SQL.
class FormField(AbstractFormField):
    page = ParentalKey(
        'ContactPage',
        on_delete=models.CASCADE,
        related_name='form_fields',
    )

 

[ 效果图 ]

 

 

二、模板

为何是两个？点击提交之后 --> 自动跳转到 landing page。

是 URL 不变的 “页面切换”。切换后，自定义想要显示的部分内容。

 

• 新增文件：contact_page.html

{% extends 'base.html' %}
{% load wagtailcore_tags %}

{% block content %}

    <style>
        .contact-form {
            list-style-type: none;
            padding-left: 0;
        }
        .contact-form li {
            margin-bottom: 1.5rem;
        }
        .contact-form label {
            display: block;
            font-weight: bold;
        }
        .contact-form .helptext {
            display: block;
            font-size: 80%;
        }
    </style>

    <div class="container mt-5 mb-5">
        <h1>{{ page.title }}</h1>
        <p>
            {{ self.intro|richtext }}
        </p>

        <form action="{% pageurl page %}" method="POST">
            {% csrf_token %}
            <ul class="contact-form">{{ form.as_ul }}  # 固定的写法 .as_p 也可以</ul>

            <button type="submit" class="btn btn-success">
                Submit Form
            </button>
        </form>
    </div>

{% endblock %}

 

• 新增文件：contact_page_landing.html

{% extends 'base.html' %}
{% load wagtailcore_tags %}

{% block content %}

    <div class="container mt-5 mb-5 text-center">
        <h1>{{ page.title }}</h1>
        <p>
            {{ self.thank_you_text|richtext }}
        </p>
    </div>

{% endblock %}

 

 

三、升级到 Captcha

• 添加默认 APP

'captcha',
'wagtailcaptcha',

需要google key 或类似的key，否则报错。

mysite$ python manage.py makemigrations
SystemCheckError: System check identified some issues:

ERRORS:
?: (captcha.recaptcha_test_key_error) RECAPTCHA_PRIVATE_KEY or RECAPTCHA_PUBLIC_KEY is making use of the Google test keys and will not behave as expected in a production environment
        HINT: Update settings.RECAPTCHA_PRIVATE_KEY and/or settings.RECAPTCHA_PUBLIC_KEY. Alternatively this check can be ignored by adding `SILENCED_SYSTEM_CHECKS = ['captcha.recaptcha_test_key_error']` to your settings file.

 

• 申请 key

Ref: https://www.google.com/u/1/recaptcha/admin/create

# Recaptcha settings
# This key only allows localhost. For production, you'll want your own API keys.
# You can get Recaptcha API key from google.com/recaptcha
RECAPTCHA_PUBLIC_KEY  = "6LcNrZcUAAAAAADyWEJTIOXKr6x-8POg3Iqp1234"
RECAPTCHA_PRIVATE_KEY = "6LcNrZcUAAAAAPISF06kecWBC4EJPXy2uo_p1234"
NOCAPTCHA = True

 

• 添加 功能

class ContactPage(AbstractEmailForm):

又上述改为下面的样子，即可出现验证 reCaptcha。

from wagtailcaptcha.models import WagtailCaptchaEmailForm

class ContactPage(WagtailCaptchaEmailForm):

 

End.