我如何使用 Jinja2 和 HTML 设置联系表单的样式答案

【问题标题】：How Would I Style A Contact Form With Jinja2 and HTML我如何使用 Jinja2 和 HTML 设置联系表单的样式
【发布时间】：2020-03-18 12:43:45
【问题描述】：

我正在使用 Jinja2 和 Flask-WTF 来制作联系表单作为我网站的一部分，对于输入我使用 Jinja2 语法。我将如何设置我的 Jinja 和 HTML 的样式，使其看起来美观且令观众满意。目前，如果我尝试为输入添加自己创建的类，它们将无法使用“contact.html”文件中的 jinja2 语法。感谢您的帮助。

contact.py

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

class contactForm(FlaskForm):
    name = StringField('Name')
    email = StringField('Email')
    message = StringField('Message')
    submit = SubmitField('Send')

contact.html


{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/contact.css') }}">

{% endblock %}


{% block body %}
<br><br>
<h1><center>Get In Touch With Us!</center></h1>
<br><br>

      <form action="" method="POST">
        {{form.name.label}}
        {{form.name(size=40)}}
        {{form.email.label}}
        {{form.email(size=60)}}
        {{form.message.label}}
        {{form.message()}}
        {{form.submit()}}
    </form>


{% endblock %}

app.py（只是联系人部分）

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    form = contactForm()
    if form.is_submitted():
        result = request.form
        return render_template('sent.html', result=result)
    return render_template('contact.html', form=form)

【问题讨论】：

标签： html flask jinja2 flask-wtforms

【解决方案1】：

您可以在您的 jinja2 代码中使用 bootstrap 4 类。但为此，您必须在 html 模板中添加引导程序的 CSS。

我是这样做的：

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
</head>
<body>
    <style type="text/css">
        body{
            font-family: 'Montserrat', sans-serif;
        }
    </style>
       <form action="your route fucntion" method="POST">
            {{ form.hidden_tag() }}

            {{ form.name.label() }}
            {{ form.name(class="form-control pt-4") }}

            {{ form.email.label(class="pt-4") }}
            {{ form.email(class="form-control pt-4") }}

            {{ form.message.label(class="pt-4") }}
            {{ form.message(class="form-control pt-4") }}

            {{ form.submit(class="btn btn-outline-success ml-1 mt-5") }}
        </form>
    </div>
    <p class="text-info ml-5 pt-4">**All fields are required.</p>

</body>
</html>

有关带有 Flash 消息的完整联系表，请查看我的 github 存储库：https://github.com/kvatsalay/Flask-Contact-form

【讨论】：