How Would I Style A Contact Form With Jinja2 and HTML

I am using Jinja2 with Flask-WTF to make a contact form as a part of my website, and for the inputs I am using Jinja2 syntax. How would I be able to style my Jinja and HTML so that it looks nice and pleasing for the viewer. Currently, if I were to try and add my own created classes for the inputs, they would not work with the jinja2 syntax in the "contact.html" file. Thank You For Your Help.

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 (just the contact part)

@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)

Solution

you can use bootstrap 4 classes in your jinja2 code. but for that you have to add bootstrap's CSS in your html template.

here's how i do this:

<!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>

For full fetured contact form with flash messages check out my github repository: https://github.com/kvatsalay/Flask-Contact-form