Wagtail教程：创建专业联系表单页面-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00550/article/details/148374543

Wagtail教程：创建专业联系表单页面

wagtail wagtail/wagtail: Wagtail 是一个基于 Django 构建的强大的内容管理系统（CMS），提供了丰富的页面构建和内容编辑功能，具有高度可定制性和用户友好的后台界面。项目地址: https://gitcode.com/gh_mirrors/wa/wagtail

前言

在构建个人作品集网站时，一个功能完善的"联系我们"页面至关重要。本文将详细介绍如何使用Wagtail框架创建专业的联系表单页面，帮助开发者轻松实现用户联系功能。

准备工作

在开始之前，请确保您已经：

完成了Wagtail的基本安装和配置
创建了基础的项目结构
熟悉Django模型和模板系统的基本概念

核心模型构建

表单字段模型

首先我们需要定义表单字段模型，继承自Wagtail提供的AbstractFormField基类：

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

这个模型的关键点在于：

使用ParentalKey建立与表单页面的父子关系
继承AbstractFormField获得所有标准表单字段类型支持
通过related_name指定反向查询名称

表单页面模型

接下来创建表单页面模型，继承自AbstractEmailForm：

class FormPage(AbstractEmailForm):
    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

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

这个模型的特点包括：

内置富文本字段用于介绍和感谢信息
使用InlinePanel管理动态表单字段
配置邮件发送相关参数
继承AbstractEmailForm获得表单提交邮件功能

模板系统设计

表单页面模板

创建form_page.html模板：

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

{% block content %}
    <h1>{{ page.title }}</h1>
    <div>{{ page.intro|richtext }}</div>

    <form class="page-form" action="{% pageurl page %}" method="POST">
        {% csrf_token %}
        {{ form.as_div }}
        <button type="Submit">Submit</button>
    </form>
{% endblock content %}

模板关键点：

继承基础模板保持站点一致性
使用as_div方法渲染表单字段
包含CSRF保护令牌
保持简洁的表单结构

提交成功页面模板

创建form_page_landing.html模板：

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

{% block content %}
    <h1>{{ page.title }}</h1>
    <div>{{ page.thank_you_text|richtext }}</div>
{% endblock content %}

这个模板特点：

显示感谢信息
保持与表单页一致的布局
提供良好的用户反馈体验

数据库迁移

完成模型定义后，执行以下命令更新数据库：

python manage.py makemigrations
python manage.py migrate

管理后台配置

在Wagtail后台创建联系表单页面的步骤：

重启开发服务器
访问管理后台
导航至页面管理界面
在首页下添加子页面
选择"Form page"类型
填写必要信息并发布

样式优化

为提升用户体验，添加以下CSS样式：

.page-form label {
    display: block;
    margin: 10px 0 5px;
}

.page-form :is(textarea, input, select) {
    width: 100%;
    max-width: 500px;
    min-height: 40px;
    margin: 5px 0 10px;
}

.page-form .helptext {
    font-style: italic;
}

这些样式规则实现了：