Quick start

Form

Viewflow offers advanced form rendering capabilities, including support for embedded formsets. To take advantage of these capabilities, you can inherit your form class from viewflow.forms.Form or viewflow.forms.ModelForm.

Here’s an example RegistrationForm class that inherits from viewflow.forms.Form:

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'
        )
    )

In this example, we’ve defined a form layout using the Layout, Row, and FieldSet classes. This layout specifies the relative location and size of each form field.

Template

Viewflow provides a custom {% render %} tag to render forms. The tag accepts a form instance as the first argument and, optionally, a form layout.

To enable AJAX submission of the form using Hotwire/Turbo, we wrap the form in the <vf-form/> web component.

Here’s an example of how to use the tag in a template:

{% 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>
    {% block form-actions %}
    <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>

To disable Turbo for a specific element, such as a button that submits a form and produces non-HTML output (e.g., a binary file), add data-turbo=”false” to that element.

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