Add a css class to a field in wtform

Question

I\'m generating a dynamic form using wtforms (and flask). I\'d like to add some custom css classes to the fields I\'m generating, but so far I\'ve been unable to do so. Usin

Answer 1

You actually don't need to go to the widget level to attach an HTML class attribute to the rendering of the field. You can simply specify it using the class_ parameter in the jinja template.

e.g.

    {{ form.email(class_="form-control") }}

will result in the following HTML::

    <input class="form-control" id="email" name="email" type="text" value="">

to do this dynamically, say, using the name of the form as the value of the HTML class attribute, you can do the following:

Jinja:

    {{ form.email(class_="form-style-"+form.email.name) }}

Output:

    <input class="form-style-email" id="email" name="email" type="text" value="">

For more information about injecting HTML attributes, check out the official documentation.

Answer 2

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!

Answer 3

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.

Answer 4

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>