Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Jinja2 macro to render WTForms fields with Twitter Bootstrap
{% macro form_field(field) -%}
{% set with_label = kwargs.pop('with_label', False) %}
{% set placeholder = '' %}
{% if not with_label %}
{% set placeholder = field.label.text %}
{% endif %}
<div class="control-group {% if field.errors %}error{% endif %}">
{% if with_label %}
<label for="{{ field.id }}" class="control-label">
{{ field.label.text }}{% if field.flags.required %} *{% endif %}:
</label>
{% endif %}
<div class="controls">
{% set class_ = kwargs.pop('class_', '') %}
{% if field.flags.required %}
{% set class_ = class_ + ' required' %}
{% endif %}
{% if field.type == 'BooleanField' %}
<label class="checkbox">
{{ field(class_=class_, **kwargs) }}
{{ field.label.text|safe }}
</label>
{% else %}
{% if field.type in ('TextField', 'TextAreaField', 'PasswordField') %}
{% set class_ = class_ + ' input-xlarge' %}
{% elif field.type == 'FileField' %}
{% set class_ = class_ + ' input-file' %}
{% endif %}
{{ field(class_=class_, placeholder=placeholder, **kwargs) }}
{% endif %}
{% if field.errors %}
<span class="error help-inline">{{ field.errors|join(', ') }}</span>
{% endif %}
{% if field.description %}
<p class="help-block">{{ field.description|safe }}</p>
{% endif %}
</div>
</div>
{%- endmacro %}
@cloud-eagle

This comment has been minimized.

Copy link

commented Apr 18, 2013

Thank you very much. I think your macro is the best among others! It is so automaticly and updated newest TwitterBoostrap style. ^_^ Awesome!

@cloud-eagle

This comment has been minimized.

Copy link

commented Apr 18, 2013

I have a question. In this macro there is this line: {{ field(class_=class_, *_kwargs) }}
I wonder where the is field() macro. I think it is not provided here. Please provide it. And can you explain me the *_kwargs what it mean and how to use it. Thank you very much.

@cloud-eagle

This comment has been minimized.

Copy link

commented Apr 18, 2013

Now I understand that I am wrong about field() macro. No need to provide that macro. But I have not understand the **kwargs.Thank you for great code!

@rawrgulmuffins

This comment has been minimized.

Copy link

commented Jul 16, 2013

This has been very helpful for me. Thank you very much.

I forked and added an if statement to this macro. If you're using a select field then this macro will put a placehold attribute on that select field which is invalid html. I just added an if statement to check for select fields.

@LordChocoBlizzBallz

This comment has been minimized.

Copy link

commented Oct 7, 2013

Thanks.

I created a fork that renders the field properly with bootstrap 3.0.0

@dasfaha

This comment has been minimized.

Copy link

commented Oct 26, 2013

How do I use this macro, where do I add this code?

@vicngtor

This comment has been minimized.

Copy link

commented Jun 18, 2014

Can you update this to the latest bootstrap3?

@wassname

This comment has been minimized.

Copy link

commented Dec 4, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.