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.