如何在Flask主布局模板中使用Flask-WTF表单避免重复编写代码

你可以通过以下两种常用方案避免在每个路由重复编写表单实例化和提交处理逻辑：

方案1：单独提交路由+全局上下文注入（更推荐） #

该方案完全解耦普通路由和联系表单逻辑，无需修改原有路由的请求方法和业务代码。

步骤1：修改前端表单提交地址 #

将页脚内表单的action属性指向专门的处理路由，避免提交到当前页面路由：

<form method="POST" action="{{ url_for('handle_contact_form') }}">
    <!-- 原有表单内容保持不变，仅修改开头的form标签即可 -->
</form>

步骤2：添加全局上下文处理器 #

通过上下文处理器自动将联系表单实例注入到所有模板中，无需每个路由手动传递：

@app.context_processor
def inject_contact_form():
    # 变量名用contact_form避免和页面自有表单（如登录、注册表单）重名冲突
    return dict(contact_form=ContactForm())

注意：模板中原有的form.email、form.content等调用要同步改成contact_form.email、contact_form.content。

步骤3：编写独立的表单处理路由 #

所有联系表单的提交请求都统一走该路由处理：

@app.route("/handle-contact-form", methods=["POST"])
def handle_contact_form():
    form = ContactForm()
    if form.validate_on_submit():
        # 此处写发送邮件的业务逻辑
        flash("留言提交成功，我会尽快回复", "success")
    else:
        # 校验失败时抛出错误提示
        for err in form.errors.values():
            flash(f"提交失败：{err[0]}", "danger")
    # 处理完成后跳转回用户之前浏览的页面
    return redirect(request.referrer or url_for("index"))

完成以上步骤后，原有所有普通路由都不需要修改，不用加POST请求方法，也不用实例化表单和处理提交逻辑。

方案2：before_request全局钩子处理 #

如果你不想修改表单的提交地址，可以通过请求前钩子统一处理所有页面的联系表单提交逻辑：

步骤1：给表单提交按钮加唯一标识 #

修改ContactForm定义，给提交按钮加name属性区分其他表单的提交请求：

class ContactForm(FlaskForm):
    email = StringField("", validators=[DataRequired(), Email()])
    content = TextAreaField("", validators=[DataRequired(), length(min=2, max=500)])
    # 加name属性作为唯一标识
    submit = SubmitField("Submit", name="contact_submit")

步骤2：添加全局请求前钩子 #

from flask import g

@app.before_request
def process_contact_form():
    # 判断是否为联系表单的提交请求
    if request.method == "POST" and "contact_submit" in request.form:
        form = ContactForm()
        if form.validate_on_submit():
            # 此处写发送邮件的业务逻辑
            flash("留言提交成功，我会尽快回复", "success")
        # 将带校验结果的表单存入全局g对象
        g.contact_form = form
    else:
        # 非提交请求时存入空表单
        g.contact_form = ContactForm()

该方案下模板直接调用g.contact_form渲染即可，所有路由无需做任何适配。

内容的提问来源于stack exchange，提问作者William Stuart