Flask_wtf自定义 field样式（Placeholder, Style）、wtf.html、匹配 Bootstrap4、jinja2 quick_form

Flask-wtf + Flask-bootstrap

简简单单用一条语句就能让 jinja2 渲染出 form：wtf.quick_form(form)

但如果要实现自定义的表单样式，如下图，怎么做呢？

Live Demo: http://tianya.heroku.com/wtf

自定义错误提示：

很简单，修改3个地方就行：

forms.py

class CommentForm(Form):
    name = StringField('', validators=[Length(0, 64)], render_kw={
 "placeholder": "Your name",
                                                                  "style": "background: url(/static/login-locked-icon.png) no-repeat 15px center;text-indent: 28px"})
    email = StringField('', description='* We\'ll never share your email with anyone else.', validators= \
        [DataRequired(), Length(4, 64), Email(message=u"邮件格式有误")], render_kw={
 "placeholder": "E-mail: yourname@example.com"})
    comment = TextAreaField('', description=u"请提出宝贵意见和建议", validators=[DataRequired()],
                            render_kw = {
 "placeholder": "Input your comments here"})
    submit = SubmitField(u'提交')

复制 c:\git\tianya\venv\Lib\site-packages\flask_bootstrap\templates\bootstrap\wtf.html 

to: c:\git\tianya\app\templates\_wtf4.html

_wtf4.html

修改成 Bootstrap4 的告警样式

  {%- if field.errors %}
    {%- for error in field.errors %}
     <small class="form-text text-warning">{
 {error}}</small>
     {%- endfor %}
  {%- elif field.description -%}
<small class="form-text text-muted">{
 {field.description|safe}}</small>
   {%- endif %}
{%- endif %}

about.html

{% extends "