Flask wtforms own style

Question

I want to make a registration with flask:

@app.route('/register/', methods=['GET','POST'])
def register():
    form = RegistrationForm(request.form)
    if request.method == 'POST' and form.validate():
        username = form.username.data
        mail = form.mail.data
        password = sha256_crypt.encrypt((str(form.password.data)))
        c, conn = dbconnect.conn()
        x = c.execute("SELECT * FROM users WHERE username = (%s)", (thwart(username)))
        if int(x) > 0:
            flash("This username is already taken. Please choose another!")
            return render_template("register.html", form=form, nav=8)
        else:
            c.execute("INSERT INTO users (username, password, mail, credits, settings, rank, items) VALUES (%s, %s, %s, %s, %s, %s, %s)",
                thwart(username), thwart(password), thwart(mail), thwart(100), thwart(""), thwart(1), thwart(""))
            conn.commit()
            flash("You are successfully registered!")
            c.close()
            conn.close()
            gc.collect()
            session['logged_in'] = True
            session['username'] = username
            return redirect(url_for('dashboard'))
    return render_template("register.html", form=form, nav=8)

I'm using wtforms like you could see. The problem is, that my registration page is:

{% extends "default.html" %}

{% block body %}

<h4>Register</h4>
<form action="" method="post">
    {% from "_formhelpers.html" import render_field %}
    {{ render_field(form.username) }}
    {{ render_field(form.mail) }}
    {{ render_field(form.password) }}
    <p><input class="btn btn-primary form-control" type="submit" value="Register"></p>
</form>

{% endblock %}

So the render_field is defined as following:

{% macro render_field(field) %}
{{ field(**kwargs)|safe }}
{% endmacro %}

But the textboxes are just default style, so no placeholder and no style. I'm using bootstrap and want that they are formated like:

<p><input type="text" class="form-control" placeholder="{{ field.label }}" name="{{ field.label }}" value=""></p>

How to style them?

Answer 1

Here is how we can write it

{% macro render_field(name, class='class-name', value='', type='text') -%}
<input type="{{ type }}" name="{{ name }}" class="{{ class }}"
value="{{ value }}"/>
{%- endmacro %}

Your case

{% macro render_field(name, class='form-control', type='text') %}
{{ field(**kwargs | safe) }}
{% endmacro %}

You can always apply the own style while rendering the field.

Answer 2

You can pass in a class_ kwargs into the field() call in render_field.

{% macro render_field(field) %}
{{ field(class_="form-control", **kwargs) }}
{% endmacro %}

Answer 3

Just as an aside as this question omits 'render_template' in the title, you can pass the formatting directly ...

<div class="input-group input-group-sm">    
{{ form.username.label(for='username', class="input-group-addon") }}
{{ form.username(class="form-control", id="username", placeholder="Username...") }}
</div>

You can provide style etc as well. If you are just displaying a couple of fields this is very convenient. However it does not work with render_template, or at least it didn't work for me.