Permalink
Fetching contributors…
Cannot retrieve contributors at this time
78 lines (59 sloc) 3.35 KB

Layout example with Bootstrap

If you use Floppyforms with Bootstrap you might be interested in using a bootstrap layout for your form.

What you have to do is to create those two templates:

floppyforms/templates/floppyforms/layouts/bootstrap.html:

{% load floppyforms %}{% block formconfig %}{% formconfig row using "floppyforms/rows/bootstrap.html" %}{% endblock %}

{% block forms %}{% for form in forms %}
{% block errors %}
    {% for error in form.non_field_errors %}
        <div class="alert alert-error">
            <a class="close" href="#" data-dismiss="alert">×</a>
            {{ error }}
        </div><!--- .alert.alert-error -->
    {% endfor %}
    {% for error in form|hidden_field_errors %}
        <div class="alert alert-error">
            <a class="close" href="#" data-dismiss="alert">×</a>
            {{ error }}
        </div><!--- .alert.alert-error -->
    {% endfor %}
{% endblock errors %}
{% block rows %}
        {% for field in form.visible_fields %}
            {% if forloop.last %}{% formconfig row with hidden_fields=form.hidden_fields %}{% endif %}
            {% block row %}{% formrow field %}{% endblock %}
        {% endfor %}
        {% if not form.visible_fields %}{% for field in form.hidden_fields %}{% formfield field %}{% endfor %}{% endif %}
{% endblock %}
{% endfor %}{% endblock %}

floppyforms/templates/floppyforms/rows/bootstrap.html:

{% load floppyforms %}{% block row %}{% for field in fields %}
<div class="control-group{% if field.errors %} error{% endif %}">
    {% with classes=field.css_classes label=label|default:field.label help_text=help_text|default:field.help_text %}
    {% block label %}{% if field|id %}<label class="control-label" for="{{ field|id }}">{% endif %}{{ label }}{% if field.field.required %} <span class="required">*</span>{% endif %}{% if label|last not in ".:!?" %}:{% endif %}{% if field|id %}</label>{% endif %}{% endblock %}
    {% block field %}
        <div class="controls {{ classes }} field-{{ field.name }}">
            {% block widget %}{% formfield field %}{% endblock %}
            {% block errors %}{% include "floppyforms/errors.html" with errors=field.errors %}{% endblock %}
            {% block help_text %}{% if field.help_text %}
                <p class="help-block">{{ field.help_text }}</p>
            {% endif %}{% endblock %}
            {% block hidden_fields %}{% for field in hidden_fields %}{{ field.as_hidden }}{% endfor %}{% endblock %}
        </div><!--- .controls -->
    {% endblock %}
    {% endwith %}
</div><!--- .control-group{% if field.errors %}.error{% endif %} -->
{% endfor %}{% endblock %}

You can also define this layout by default:

floppyforms/templates/floppyforms/layouts/default.html:

{% extends "floppyforms/layouts/bootstrap.html" %}

You can also make a change to the error display:

floppyforms/templates/floppyforms/errors.html:

{% if errors %}<span class="help-inline">{% for error in errors %}{{ error }}{% if not forloop.last %}<br />{% endif %}{% endfor %}</span>{% endif %}

And that's it, you now have a perfect display for your form with bootstrap.