Django Forms Integration

Comprehensive forms integration with djust, featuring real-time validation, error handling, and seamless LiveView integration.

Demo Registration Form

User registration with password matching, username validation, and terms acceptance. Demonstrates field-level validation.

✓ Real-time field validation
✓ Password matching
✓ Custom clean methods
✓ Checkbox validation

Try Demo

Demo Contact Form

Contact form with dropdowns, radio buttons, and text areas. Shows various field types working together.

✓ Select dropdowns
✓ Radio buttons
✓ Text areas
✓ Spam detection

Try Demo

Demo Profile Form

Profile editing with dates, URLs, and optional fields. Demonstrates complex field types and validation.

✓ Date fields
✓ URL validation
✓ Phone validation
✓ Optional fields

Try Demo

NEW Auto-Rendered Forms

Automatic form rendering with framework-specific styling. Zero manual HTML - choose your CSS framework!

✓ Auto-rendered fields
✓ 3 CSS frameworks (Bootstrap, Tailwind, Plain)
✓ Built-in validation
✓ One method call

Compare Frameworks

Bootstrap Tailwind Plain

Features

Real-time Validation: Fields validate as you type
Django Forms: Uses actual Django forms on backend
LiveView Integration: Seamless reactive updates
Error Display: Clear, Bootstrap-styled errors
Form Helpers: Easy field rendering
Custom Validation: Field and form-level validation

Documentation

Using FormMixin in Your Views

from djust import LiveView, FormMixin
from django import forms

class MyForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()

class MyFormView(FormMixin, LiveView):
    form_class = MyForm

    def form_valid(self, form):
        # Handle valid form submission
        self.success_message = "Form submitted!"

    def form_invalid(self, form):
        # Handle errors
        self.error_message = "Please fix errors"

Template Usage

<form @submit="submit_form">
    <input name="name" @change="validate_field" data-field="name" />
    {% if field_errors.name %}
        <div class="error">{{ field_errors.name }}</div>
    {% endif %}
    <button type="submit">Submit</button>
</form>