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.

Inaugural

Try the updated code and see if that helps :-) – Holsinger

thanks so much for your quick response! I've updated my code, and am creating the field like this now: f.test_field = forms.TextInput('Company Name', widget=forms.ClassedTextInput). However, I am getting a TypeError: __init__() got an unexpected keyword argument 'widget' error unfortunately. – Inaugural

You should be using StringField not TextInput for your field definition :-) – Holsinger

Forgive me for continuing to ask what I think are pretty basic questions- I now get a TypeError: sequence item 7: expected string or Unicode, ClassedTextInput found. Does this mean I need to cast the return from the __call__ function into a string/unicode? Perhaps just wrapping in a call to str()? – Inaugural

You should specify the class of a HTML tag only when you're rendering your template. It's better to separate the logic from the presentation of the data. For this reason, I advise you to set a specific class using Jinja 2 in your template, not in your flask app code. – Lederman

Possible duplicate of Wtforms, add a class to a form dynamically – Anguilla

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.

Wheeler

No problem! Please accept this answer if it solves the question so that future viewers know it works. – Wheeler

Oh, sorry, visually scanned too quickly. Glad this could help. – Wheeler

@tristan BTW 'class' seems to work the same as 'class_', not sure if that's intentional or not since in most cases I've seen 'class_'. – Impressionism

@Impressionism cheers, thanks for the comment! if i remember, i'll try to find out if that's always been the case or if it turned up in some recent version. i assume that class_ was to purposefully avoid 'shadowing' class. – Wheeler

can you also set the style attribute? something like style_="width:25%" ? – Souffle

@Souffle I've posted a new answer for what you're asking. – Adscititious

When I add (class_=... I get TypeError: 'int' object is not callable. – Odaodab

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>

Adscititious

This is the solution one will have to use if they're using wtforms_appengine – Ci

This does work normally, but a class provided this way will be overridden by one provided in the template. Thought I'd mention this in case anyone else hits the issue I did. I was using wtforms as part of Flask-Admin & bootstrap. – Patella

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.

Ultramundane

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!

Unabridged

Answer 5

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())
   

Monamonachal