Add a css class to a field in wtform

If you would like to programatically include the css class (or indeed, any other attributes) to the form field, then you can use the render_kw argument.

eg:

r_field = RadioField(
    'Label', 
    choices=[(1,'Enabled'),(0,'Disabled')], 
    render_kw={'class':'myclass','style':'font-size:150%'}
)

will render as:

<ul class="myclass" id="r_field" style="font-size:150%">
    <li><input id="r_field-0" name="r_field" type="radio" value="1"> <label for="r_field-0">Enabled</label></li>
    <li><input id="r_field-1" name="r_field" type="radio" value="0"> <label for="r_field-1">Disabled</label></li>
</ul>

In WTForms 2.1 I using extra_classes, like the line bellow:

1. The first way

{{ f.render_form_field(form.email, extra_classes='ourClasses') }}

We can also use @John Go-Soco answers to use render_kw attribute on our form field, like this way.

2. The second way

style={'class': 'ourClasses', 'style': 'width:50%;'}
email = EmailField('Email', 
                   validators=[InputRequired(), Length(1, 64), Email()],
                   render_kw=style)

But I would like more prefer to use the first way.

Pretty late though, but here is what I found. While rendering a template you can pass any key-value pairs inside the parenthesis, and it just puts those key values while rendering. For example, if you had to put a class along with some placeholder text you can do it like below:

{{ form.email(class='custom-class' placeholder='email here') }}

will actually render like below:

<input class="custom-class" id="email" name="email" placeholder="email here" type="text" value="">

Basically, you can even try experimenting by adding some non-existent HTML attribute with some value and it gets rendered.

To make it a less of pain its good to have helper functions as macros and render them instead of actual fields directly. Let's say you have common classes and error-classes. You can have a helper macro like this:

{% macro render_field(field,cls,errcls) %}

  {% if field.errors %}
  <div class="form-group">
    <label for="{{ field.id}}">{{ field.label.text }}</label>
    
    {{ field(class = cls + " " + errcls,**kwargs) | safe}}
    <div class="invalid-feedback">
      {% for error in field.errors %}
      <span> {{error}}</span>
      {% endfor %}
    </div>
  </div>

  {% else %}

  <div class="form-group">
    <label for="{{ field.id}}">{{ field.label.text }}</label>
    {{ field(class = cls,**kwargs) | safe}}
  </div>
  
  {% endif %}
{% endmacro %}

Now while rendering a field you can call like this with additional attributes like this in the template:

{{render_field(form.email,cls="formcontrol",errcls="isinvalid",placeholder="Your Email") }}

Here I have used bootstrap classes, just modify the helper function to your needs!

Hope that helps! Happy coding!

There are at least 5 ways to do it, depending on what you want to do:

1. in your template:

   {{ field(class="form-control") }}
   

2. in the field definition:

   class MyForm(Form):
     name = StringField("name", render_kw={"class":"form-control"})
   

3. sub-classing fields:

   class MyStringField(StringField):
      def __call__(self, **kwargs):
         kwargs.setdefault("class", "form-control")
         return super().__call__(**kwargs)
   
   class MyForm(Form):
      name = MyStringField("name")
   

4. using Meta (applies to all field):

   class MyMeta(wtforms.meta.DefaultMeta):
      def render_field(self, field, render_kw):
         render_kw.setdefault("class", "form-control")
         return super().render_field(field, render_kw)
   
   class MyForm(Form):
      name = StringField("name")
   
      class Meta(MyMeta):
         ...
   

5. using Widgets:

   class MyTextInput(wtforms.widgets.TextInput):
      def __call__(self, field, **kwargs):
         kwargs.setdefault("class", "form-control")
         return super().__call__(field, **kwargs)
   
   class MyForm(Form):
      name = StringField("name", widget=MyTextInput())