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. Using the answer I found here, I've attempted to use a custom widget to add this functionality. It is implemented in almost the exact same way as the answer on that question:

class ClassedWidgetMixin(object):
  """Adds the field's name as a class.

  (when subclassed with any WTForms Field type).
  """

  def __init__(self, *args, **kwargs):
    print 'got to classed widget'
    super(ClassedWidgetMixin, self).__init__(*args, **kwargs)

  def __call__(self, field, **kwargs):
    print 'got to call'
    c = kwargs.pop('class', '') or kwargs.pop('class_', '')
    # kwargs['class'] = u'%s %s' % (field.name, c)
    kwargs['class'] = u'%s %s' % ('testclass', c)
    return super(ClassedWidgetMixin, self).__call__(field, **kwargs)


class ClassedTextField(TextField, ClassedWidgetMixin):
  print 'got to classed text field'

In the View, I do this to create the field (ClassedTextField is imported from forms, and f is an instance of the base form):

  f.test_field = forms.ClassedTextField('Test Name')

The rest of the form is created correctly, but this jinja:

{{f.test_field}}

produces this output (no class):

<input id="test_field" name="test_field" type="text" value="">

Any tips would be great, thanks.

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

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>

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

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!