Wtforms, add a class to a form dynamically

Question

is there a way i could send a form's (css) class from python? For example:

class Company(Form):
    companyName = TextField('Company Name', [validators.Length(min=3, max = 60)])

This renders a simple text field, but i want that text field to have the css class of .companyName, is that possible directly from python?

I know that i can put a id="companyName" directly from python, but not class.

Help.

Update: I tried class_="companyName" and it did not work, i got:

__init__() got an unexpected keyword argument '_class'

score 55 · Answer 1 · answered Sep 28 '12 at 15:48

55

Alternatively you can add the class in your template like this for jinja2:

{{ form.name(size=20, class_='input-small') }}

answered Sep 28 '12 at 15:48

pors

3,856
36
33

Saved me as well :) This is a wonderful solution, not sure why an example along these lines isn't somewhere in the WTForm docs – sofly May 26 '15 at 04:09
2

I'd vote up ten times if it is possible, this is a much better solution. Now I can sit back and watch WTForms rock~~~ – benjaminz Jun 09 '15 at 20:09
Although the underscore after class doesn't seem to be necessary – benjaminz Jun 09 '15 at 20:21
This solution is much better than the one chosen as the correct answer. – renatov Jan 01 '16 at 16:34

Sean Vieira · Accepted Answer · 2014-02-28T03:51:13.377

WTForms does not allow you to set display options (such as class name) in the field initialization. However, there are several ways to get around this:

If all of your fields should include a class name as well as an ID then just pass in each field's short_name to it when you render it:
```
<dl>
{% for field in form %}
<dt>{{field.label}}</dt>
<dd>{{field(class_=field.short_name)}}</dd>
{% endfor %}
</dl>
```

Create a custom widget mixin that provides the class name:

from wtforms.fields import StringField
from wtforms.widgets import TextInput

class ClassedWidgetMixin(object):
    """Adds the field's name as a class 
    when subclassed with any WTForms Field type.

    Has not been tested - may not work."""
    def __init__(self, *args, **kwargs):
        super(ClassedWidgetMixin, self).__init__(*args, **kwargs)

    def __call__(self, field, **kwargs):
        c = kwargs.pop('class', '') or kwargs.pop('class_', '')
        kwargs['class'] = u'%s %s' % (field.short_name, c)
        return super(ClassedWidgetMixin, self).__call__(field, **kwargs)

# An example
class ClassedTextInput(ClassedWidgetMixin, TextInput):
    pass

class Company(Form):
    company_name = StringField('Company Name', widget=ClassedTextInput)

score 12 · Answer 3 · edited Jul 18 '18 at 12:27

12

Use render_kw if using WTForms >= 2.1 :

submit = SubmitField(u'Block Submit Buttom', render_kw={"class": "btn btn-primary btn-block"})

edited Jul 18 '18 at 12:27

Derlin

9,572
2
32
53

answered May 26 '16 at 11:20

imwilsonxu

2,942
24
25

1

It works for me many days age, but it just failed now. I don't remember what I did then, but almost just like your answer. After Ctrl+F5, the submit button also shows it class **btn btn-default**:-(... Any possible errors? `WTForms==2.1` and `Flask-WTF==0.14.2` – Tony Chou Feb 21 '18 at 15:57
It's perfectly what I need when I use parsley js for email validate. – Sukma Saputra Oct 08 '19 at 03:57
It look great, it should work but I have the same problem: WTForms is inserting ```btn-default``` class; don't work for some reason. Any clues? – Vilq Dec 30 '22 at 11:58

score 0 · Answer 4 · answered Feb 26 '15 at 07:26

0

In your template, try it

{{ form.companyName( **{'class': 'companyName'} ) }}

answered Feb 26 '15 at 07:26

KyungHoon Kim

2,859
2
23
26

3

In Python functions you can't use "class" as a named argument because it's a language keyword. For example, `myfunc(class='xyz')` results in a SyntaxError. Using the `myfunc(**{'class': 'xyz'})` like shown above gets around that problem. Thanks for your example! – David Oct 17 '15 at 13:30

Wtforms, add a class to a form dynamically

4 Answers4

Linked