Use wtfroms without using flask-bootstrap - html

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.