Create a gist now

Instantly share code, notes, and snippets.

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

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

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

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 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.

@cancerballs

Thanks.

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

@dasfaha
dasfaha commented Oct 26, 2013

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

@vicngtor

Can you update this to the latest bootstrap3?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment