Quick Start

Form

Create a form class that inherits from viewflow.forms.Form or viewflow.forms.ModelForm. Add a layout attribute to control how fields appear.

from django import forms
from viewflow.forms import Layout, Row, FieldSet

class RegistrationForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={'leading-icon': 'account_box'})
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={'leading-icon': 'lock_open'})
    )

    ...

    layout = Layout(
        'username', 'email',
        Row('password', 'password_confirm'),
        FieldSet(
            'Personal details',
            Row('first_name', 'last_name'),
            'gender', 'receive_news', 'agree_toc'
        )
    )

The layout defines field order, which fields share a row, and how fields are grouped. Row('password', 'password_confirm') puts two fields side by side. FieldSet groups fields under a heading.

Template

Use the {% render %} tag to output the form. Wrap it in <vf-form/> for AJAX submission.

{% load viewflow %}
<vf-form>
    <form class="vf-form" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <section class="vf-card__form">
            {% render form form.layout %}
        </section>
        <section class="mdc-card__actions vf-card__actions">
            <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised" type="submit">
                {% trans "Save" %}
            </button>
        </section>
    </form>
</vf-form>

Disabling Turbo

Some buttons produce non-HTML output (like PDF downloads). Add data-turbo="false" to skip AJAX submission for that button.

<vf-form>
    <button type="submit" data-turbo="false">Generate PDF</button>
</vf-form>