Use wtfroms without using flask-bootstrap

Question

I'm starting to create a login-signup web page for a project and for that I would like to use "wtforms" but I can't find any examples without using the flask-bootstrap library. Can I use wtform without flask-bootstrap?

I did some experiments but it doesn't seem to work.

This is my code: HTML:

<div class="login-form">
        <form action="/registration" method="POST">
            <h2 class="text-center">Registrazione</h2>
            <div class="form-group has-error">
                <input type="text" class="form-control" name="nome" placeholder="Nome" required="required">
            </div>
            <div class="form-group has-error">
                <input type="text" class="form-control" name="cognome" placeholder="Cognome" required="required">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" name="email" placeholder="E-mail" required="required">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" name="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="la password deve contenere almeno un numero, una lettera maiuscola, una minuscola e deve essere almeno di 8 carateri" required="required">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" name="confermaPsw" placeholder="Conferma password"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="la password deve contenere almeno un numero, una lettera maiuscola, una minuscola e deve essere almeno di 8 carateri" required="required">
            </div>
            <div class="form-group">
                <select class="form-control" name="ruolo" id="sel1" required="required">
                   <option>SW</option>
                   <option>PM</option>
                   <option>PE</option>
                </select>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-lg btn-block">Registrati</button>
            </div>
        </form>

Python:

class RegisterForm(FlaskForm):
    name = StringField('name', validators=[InputRequired(), Length(min=4, max=15)])
    surname = StringField('surname', validators=[InputRequired(), Length(min=4, max=15)])
    email = StringField('email', validators=[InputRequired(), Length(max=50)])
    password = PasswordField('password', validators=[InputRequired(), Length(min=8, max=80)])
    ruolo = StringField('urole', validators=[InputRequired()])

@app.route('/registration', methods=['POST', 'GET'])
def registration():
    # se tutti gli input rispettano i prerequisiti di validazione, aggiungi utente
    form = RegisterForm()
    if request.method == 'POST':
        if form.validate_on_submit():
            hashed_password = generate_password_hash(form.password.data, method='sha256')
            new_user = User(name=form.nome.data, surname=form.cognome.data, email=form.email.data, password=hashed_password, urole=form.ruolo.data)
            db.session.add(new_user)
            db.session.commit()

            return '<h1>New user has been created!</h1>'
        return '<h1>post send but no validate!</h1>'

    return render_template("registration.html", form=form)


EDIT: I need to have the same formatting I had before using WTForms
 

Answer 1

I'm looking for a solution for this exact question too, but all use flask-bootstrap and that is exactly what I don't want to use.

I've tried the following:

{{ form.firstname(class='form-control bg-white border-left-0 border-md', placeholder='Firstname') }}

outputs

<input class="form-control bg-white border-left-0 border-md" id="firstname" name="firstname" placeholder="Firstname" required type="text" value="">

This seems to work, well visually it seems to do what I want.