Add css classes to Jinja template for form

Question

I'm copying an HTML template into a flask app. It comes with its own style sheet and I've made it work with the static elements on the page. My issue is that the contact us form that I'm trying to create with Jinja templates is looking very basic. I need to figure out how to add the existing style templates to the form fields.

In the original template, this is what the form fields looked like:

<div class="form-group">
              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
              <div class="validation"></div>
            </div>
            <div class="text-center"><button type="submit">Send Message</button></div>

In my new form, this is what I have:

<div class="form-group">
            {{ form.name(class="form-control") }}
            </div>

            <div class="form-group">
            {{ form.email.label }}
            {{ form.email }}
            </div>

            <div class="form-group">
            {{ form.subject.label }}
            {{ form.subject }}
            </div>


            <div class="form-group">
            {{ form.message.label }}
            {{ form.message }}
            </div>


            {{ form.submit }}

As you can see, I've been trying to add the original css classes to the Jinja template by adding class="form-control" to the form name. I haven't figured out how to add the rest. I'd appreciate your help with this.

Answer 1

<div class="form-group">
        {{ form.name(class="form-control") }}
        </div>

        <div class="form-group">
        {{ form.email.label(class="yourclass") }}
        {{ form.email(class="yourclass") }}
        </div>

        <div class="form-group">
        {{ form.subject.label(class="yourclass") }}
        {{ form.subject(class="yourclass") }}
        </div>


        <div class="form-group">
        {{ form.message.label(class="yourclass") }}
        {{ form.message(class="yourclass") }}
        </div>


        {{ form.submit(class="yourclass") }}

Try this