Usage

Import crispy-forms-foundation then you can use the layout objects in your form :

from crispy_forms_foundation.layout import Layout, Fieldset, SplitDateTimeField, Row, Column, ButtonHolder, Submit

class YourForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.form_action = '.'
        self.helper.layout = Layout(
            Fieldset(
                'Content',
                'title',
                'content',
            ),
            Fieldset(
                'Display settings',
                Row(
                    Column('template', css_class='large-6'),
                    Column('order', css_class='large-3'),
                    Column('visible', css_class='large-3'),
                ),
            ),
            Fieldset(
                'Publish settings',
                'parent',
                Row(
                    Column(SplitDateTimeField('published'), css_class='large-6'),
                    Column('slug', css_class='large-6'),
                ),
            ),
            ButtonHolder(
                Submit('submit_and_continue', 'Save and continue'),
                Submit('submit', 'Save'),
            ),
        )

        super(YourForm, self).__init__(*args, **kwargs)

The embedded templates are in crispy_forms_foundation/templates/foundation-5.

Use Foundation Abide validation

You can use Abide validation in your form but note that there is no support within the layout objects. You will have to add the required attribute (and eventually its validation pattern) on your field widgets in your form like this:

title = forms.CharField(label=_('Title'), widget=forms.TextInput(attrs={'required':''}), required=True)

To enable Abide on your form, you’ll have to load its Javascript library (if you don’t load yet the whole Foundation library) then in your form helper you will have to add its attribute on the form like this :

class SampleForm(forms.Form):
    title = forms.CharField(label=_('Title'), widget=forms.TextInput(attrs={'required':''}), required=True)
    textarea_input = forms.CharField(label=_('Textarea'), widget=forms.Textarea(attrs={'required':''}), required=True)

    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()

        # Enable Abide validation on the form
        self.helper.attrs = {'data_abide': ''}

        self.helper.form_action = '.'
        self.helper.layout = Layout(
            ...
        )

        super(SampleForm, self).__init__(*args, **kwargs)

You can also set an Abide error message directly on the field like this :

class SampleForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super(SampleForm, self).__init__(*args, **kwargs)
        self.fields['textarea_input'].abide_msg = "This field is required !"

Support within tabs

Default Abide behavior is not aware of Tabs and so input errors can be hided when they are not in the active tab.

crispy-forms-foundation ships a jQuery plugin that add support for this usage, you will need to load it in your pages then initialize it on your form:

<script type="text/javascript" src="{{ STATIC_URL }}js/crispy_forms_foundation/plugins.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $('form').abide_support_for_tabs();
});
//]]>
</script>

This way, all input errors will be raised to their tab name that will display an error mark.

Support within accordions

Like with tabs, there is a jQuery plugin to add Abide support within accordions.

You will need to load it in your pages then initialize it on your form:

<script type="text/javascript" src="{{ STATIC_URL }}js/crispy_forms_foundation/plugins.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $('form').abide_support_for_accordions();
});
//]]>
</script>

Automatic form layout

There is some forms you can use to quickly and automatically create a Foundation layout for your forms. This is mostly for fast integration or prototyping because it will probably never totally fit to your design.

class crispy_forms_foundation.forms.FoundationForm(*args, **kwargs)

Bases: crispy_forms_foundation.forms.FoundationFormMixin, django.forms.forms.Form

A Django form that inherit from FoundationFormMixin to automatically build a form layout

Example:

from django import forms
from crispy_forms_foundation.forms import FoundationForm

class YourForm(FoundationForm):
    title = "Testing"
    action = 'test'
    layout = Layout(Fieldset("Section", "my_field", "my_field_2"))
    switches = False
    attrs = {'data_abide': ""}

    title = forms.CharField(label='Title', required=True)
    slug = forms.CharField(label='Slug', required=False)
class crispy_forms_foundation.forms.FoundationFormMixin

Bases: object

Mixin to implement the layout helper that will automatically build a form layout

Generally, you will prefer to use FoundationForm or FoundationModelForm instead.

If you still want to directly use this mixin you’ll just have to execute FoundationFormMixin.init_helper() in your form init.

Attributes

title
If set, defines the form’s title
layout
If set, override the default layout for the form
error_title
Defines the error title for non field errors
form_id
Defines the id of the form
classes
Defines the classes used on the form
action
Defines the action of the form. reverse will be called on the value. On failure the value will be assigned as is
method
Defines the method used for the action
attrs
Defines the attributes of the form
switches
If True, will replace all fields checkboxes with switches
submit
Adds a submit button on the form. Can be set to a Submit object or a string which will be used as the value of the submit button
title_templatestring
Template string used to display form title (if any)
class crispy_forms_foundation.forms.FoundationModelForm(*args, **kwargs)

Bases: crispy_forms_foundation.forms.FoundationFormMixin, django.forms.models.ModelForm

A Django Model form that inherit from FoundationFormMixin to automatically build a form layout

Example:

from crispy_forms_foundation.forms import FoundationModelForm

class YourForm(FoundationModelForm):
    title = "Testing"
    action = 'test'
    layout = Layout(Fieldset("Section", "my_field", "my_field_2"))
    switches = False
    attrs = {'data_abide': ""}

    class Meta:
        model = MyModel
        fields = ['my_field', 'my_field_2', 'my_field_3']