How to spread form fields on two column layout in django-crispy-forms?

Question

I have received a few recommendation to use django-crispy-forms for creating forms in Django.

I have been looking for a couple of hours into the documentation and can't figure out a way how to spread the form fields over two columns.

Looking at this example here

        helper = FormHelper()
        helper.form_class = 'form-horizontal'
        helper.layout = Layout(
            Field('text_input', css_class='input-xlarge'),
            Field('textarea', rows="3", css_class='input-xlarge'),
            'radio_buttons',
            ...
        )

I can see how the sequence of appearance can be setup. But the layout is still no different then a plain {{ form.as_p }}. I hope I am missing here something otherwise there is little use in using this add-on?

Answer 1

Make sure you have bootstrap css files included, the application added to INSTALLED_APPS.

Then you have to include django-crispy-forms tags doing {% load crispy_forms_tags %} in your template and finally do {% crispy form %} as in the example. All that is shown in the example you linked. This should produce a horizontal form.

Nothing close to as_p, this is a customizable layout, no need to write templates, which is very error prone. These slides might help you.

Answer 2

I've only used django-crispy-forms briefly, and I didn't use it with a form helper. The below is written using mako-templates, but you should be able to easily enough transpose that to django templating.

<form class="form-horizontal">
    <fieldset>
    %if form.non_field_errors():
        <div class='alert alert-error'>${form.non_field_errors()}</div>
    %endif
        ${form.as_crispy}
    <div class="form-actions">
        <button type="submit" class="btn btn-primary" id="some-id"> 
            Find
        </button>
        <button type="reset" class="btn" id="clear-filter">
            Clear
        </button>
    </div>
    </fieldset>
</form>

That rendered the form using fieldsets which is pretty much the default way to render forms with twitter-bootstrap. Only use helpers (I think..) if the default rendering is not working for you. I don't have