django-formset

django-formset delivers modern form handling for Django projects, combining the framework’s familiar server-side patterns with polished client-side experiences. It renders individual forms, formsets, and nested collections, wrapping them in a web component that keeps user interactions fast, accessible, and consistent across devices.

Why It Matters

• Present forms with layouts tailored to popular CSS frameworks without rewriting templates.
• Validate inputs immediately in the browser using the same rules declared on the Python side.
• Offload heavy interactions—file uploads, large select lists, nested collections—to purpose-built widgets.
• Keep Django admin users and public-facing visitors on the same UX foundation.
• Ship a single TypeScript-powered bundle, no external JavaScript dependencies required.

Installation

pip install django-formset

Activate the renderer and the app:

# settings.py
INSTALLED_APPS = [
    # ...
    "django_formset",
]

FORM_RENDERER = "formset.renderers.FormsetRenderer"

Collect static assets before deployment:

python manage.py collectstatic

First Form

# forms.py
from django import forms
from formset.widgets import UploadedFileInput

class ContactForm(forms.Form):
    name = forms.CharField(label="Full name")
    email = forms.EmailField()
    resume = forms.FileField(widget=UploadedFileInput(), required=False)
    message = forms.CharField(widget=forms.Textarea)

# views.py
from django.views.generic import FormView
from formset.views import FormSetMixin
from .forms import ContactForm

class ContactView(FormSetMixin, FormView):
    template_name = "contact/form.html"
    form_class = ContactForm
    success_url = "/contact/thanks/"

<!-- templates/contact/form.html -->
{% load formsetify %}
<django-formset endpoint="{% url 'contact' %}">
  {% render_form form "bootstrap" %}
  <button type="submit" df-action="submit disable show-spinner">Send</button>
</django-formset>

The web component serializes the form into JSON, talks to the Django view via fetch, and streams back validation errors or success actions without a full-page reload.

Feature Tour

• Renderer library for Bootstrap, Tailwind, Bulma, Foundation, and UIkit with matching HTML structure and classes.
• Widget suite covering asynchronous uploads, autocomplete selects, dual-list selectors, date pickers, phone numbers with flags, and rich text editing.
• Action chains to configure submit buttons with behaviors like disabling, showing spinners, redirecting, or broadcasting events.
• Nested collections that let you add, remove, sort, and validate repeated form groups with undo/redo support.
• JSONField mapping to persist an entire hierarchy of form data inside a relational model without custom serialization.
• Conditional visibility using df-show, df-hide, and df-disable attributes that react instantly to field values.

Working in Django Admin

Reuse your public-facing forms inside the admin by wrapping them in FormCollection classes and enabling the provided admin mixins. Editors gain the same asynchronous uploads, validation messaging, and layout consistency without bespoke admin templates.

Extending the Library

• Create tailored renderers by subclassing the base renderer and overriding template fragments.
• Compose additional button actions to hook into custom analytics, notifications, or navigation flows.
• Augment the web component with lightweight JavaScript modules that tap into lifecycle callbacks while keeping the main bundle intact.

Testing Tips

• Run python manage.py test as usual; formset views and mixins integrate with Django’s test client.
• In browser dev tools, inspect the datasets attached to form elements to debug live validation or dependency expressions.
• For large data sources, wire autocomplete widgets to search endpoints that reuse your view’s permission logic.

Resources

Interactive documentation, API references, and upgrade guides live at https://django-formset.fly.dev/.