WTF_forms and Bootstrap-Flask render form

Question

I saw that while using WTF_Forms we can render a form in basic way as: render form in basic way

<form method="POST" action="{{ url_for('login') }}"> 
  {{ form.csrf_token }}
  {{ form.email.label }} {{ form.email(size=30) }}
  {{ form.password.label }} {{ form.password(size=30) }} 
  <input type="submit" value="Log In">
</form>

I also saw that by using bootstrap-flask, we can render a form quickly as: shown here

{% extends "base.html" %}
{% from 'bootstrap5/form.html' import render_form %}
{% block title %}Login{% endblock %}
{% block content %}
    <div class="container">
    <h1>Login</h1>
        {{ render_form(form) }}
    </div>
{% endblock %}

But when using render_form(form), I cannot control size of the input to display (example in earlier code: size=30
Is there any way to control size with render_form() ?

I expect to control size while using render_form(form)

Answer 1

To add some constraints to your form and then render your form by using bootstrap macro (render_form) you have to create a class of your form inside your python file.

WTForms quick start

1. First of all you have to import form, fields and something called "validators" from wtforms module

from wtforms import form, StringField, validators

2. Once you have this you have to create a class which takes form as argument. This class should contain fields which you would like to add inside your form. For simplicity let's focus just on StringField

class MyOwnForm(form):
    login = StringField("LOGIN")

3. From now on you can create an instance of this form class and pass it into <render_template> method inside Flask route. That first argument with value "LOGIN" is just a name/ label of your field.

But still the question is:

"How can add some limits of my input?"

in other words...

"How can I validate values provided by the user?"

Now the validators comes in handy.

WTForms - Validators

Validators is an object which contains many helpfull methods that will make your life easier. From setting a length of characters inside your input to checking if the value is proper e-mail adress or a weblink etc...

Let's use previous class and add that functionality:

class MyOwnForm(form):
    login = StringField("LOGIN", validators=[validators.length(max=30)])

So simple pseudo code is:

• Create your form by using class,
• Create your fields inside the class,
• Add to fields validators to check conditions
• Create an instance of class
• Pass that as argument in render_template method
• Receive that and render inside your template by using Boostrap macro (in this case render_form())
• Read documentation for more

Answer 2

I'm having the same code (from 100 Days of Code: The Complete Python Pro Bootcamp course) and the same issue here, so hellooooo brother-learner

I found that you can pass parameters to the render_form() macros, for example form_type='horizontal' and horizontal_columns=('lg', 2, 2) so you can manipulate the size of controls by changing the grid layout.

Try this:

{% extends "base.html" %}
{% from 'bootstrap5/form.html' import render_form %}
{% block title %}Login{% endblock %}
{% block content %}
    <div class="container">
    <h1>Login</h1>
        {{ render_form(form, form_type='horizontal', horizontal_columns=('lg', 2, 2)) }}
    </div>
{% endblock %}