在 Flask 中使用 WTForms 创建联系我们

在网站中，联系我们页面经常用于收集访问者的反馈信息和建议。Flask 框架提供了 WTForms 来处理表单数据，可以轻松地在网站中创建联系我们页面。

安装和导入所需的包

使用 pip 安装 WTForms 和 Flask-WTF 包

pip install WTForms Flask-WTF

导入 Flask 和 WTForms 以及需要的表单字段类：

from flask_wtf import FlaskForm
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired, Email

创建表单类

定义 ContactForm 表单类，包含 name，email 和 message 字段：

class ContactForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    message = TextAreaField('Message', validators=[DataRequired()])
    submit = SubmitField('Submit')

这里使用了 StringField，TextAreaField 和 SubmitField 作为字段类，并使用 validators 参数来定义验证器。DataRequired 用于验证字段不能为空，Email 用于验证电子邮件格式是否正确。

添加联系我们页面

为了让访问者能够填写和提交表单，我们需要将 ContactForm 类实例化，并将其传递给模板中的联系我们表单。此外，我们还需要处理从表单中提交的数据。

from flask import Flask, render_template, redirect, url_for
from forms import ContactForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    form = ContactForm()
    if form.validate_on_submit():
        name = form.name.data
        email = form.email.data
        message = form.message.data
        # do something with the data
        return redirect(url_for('success'))
    return render_template('contact.html', form=form)

@app.route('/success')
def success():
    return 'Thank you for your message!'

if __name__ == '__main__':
    app.run(debug=True)

这里使用了 Flask 的 render_template 函数将 ContactForm 类传递给 contact.html 模板，从而显示表单。validate_on_submit() 方法用于验证提交的数据是否有效，如果有效则将数据保存到变量中，然后使用 Flask 的 redirect 函数重定向到 success 页面。

创建联系我们页面模板

在 templates 目录下创建一个名为 contact.html 的模板文件，包括以下代码：

{% extends 'base.html' %}

{% block content %}
  <h1>Contact Us</h1>
  <form method="post" action="{{ url_for('contact') }}">
    {{ form.hidden_tag() }}
    <div class="form-group">
      {{ form.name.label }} {{ form.name }}
    </div>
    <div class="form-group">
      {{ form.email.label }} {{ form.email }}
    </div>
    <div class="form-group">
      {{ form.message.label }} {{ form.message }}
    </div>
    <button type="submit" class="btn btn-primary">{{ form.submit.label }}</button>
  </form>
{% endblock %}

这里使用了 Flask 的模板继承功能，模板文件通过 extends 继承了 base.html 模板。 action 属性用于指定表单提交时向的 URL，此处使用 Flask 的 url_for 函数生成自动检测的 URL，这使得我们可以方便地更改路由视图函数的名称。form.hidden_tag() 用于生成 CSRF 令牌，防止跨站请求伪造攻击。提交按钮的标签使用 form.submit.label。

运行应用程序

最后，在项目的根目录中运行以下命令启动应用程序：

python app.py

在浏览器中访问 http://localhost:5000/contact，你将看到联系我们页面，填写表单并提交后，您将被重定向到一个新的页面，显示 “Thank you for your message!” 消息。

现在你已经了解了如何在 Flask 中使用 WTForms 创建联系我们页面，如果您想进一步定制表单，可以查看 WTForms 文档以获取更多信息。