How to create a Django form in 2mins using Alpine.js 🏔️

There will be 4 steps. Each takes under 30 seconds.

We'll assume that you've already setup your Django project and created an app (I'll be using one I named sim ). You don't need to know anything about Alpine.js. I'll walk you through.

My video follows the guide below. Let's get to it!

1. Create template

create a folder called templates in your sim app
add an html file, we'll call it example.html
add your form html to the template

<div>
    <form>

        <div>
            <input name="email" type="email" />
            <input name="codename" type="text" />
            <input name="dress_color" type="color" />
            <button>
                Submit
            </button>
        </div>

        <div>
            <p>
                Successfully submitted form ✅
            </p>
        </div>

        <div>
            <p>
                Error submitting your form ❌
            </p>
        </div>

    </form>
</div>

2. Add your Django view

Add your view, update your urls, and check that a template is rendered at the right url.

# views.py
from django.shortcuts import render
def example(request):
  return render(request, 'templates/example.html', context={})

def sample_post(request):
    data = request.POST
    print(f'{data = }')

    return JsonResponse({'status': 'success'})

# urls.py
from . import views
from django.urls import path

urlpatterns = [
    path('example', views.example, name='example'),
    path('sample-post/', views.sample_post, name='sample_post')
]

3. Add alpine js to template

Add Alpine js submit function
include the Django CSRF token
add your specific view url path
Add Alpine js syntax to control the form and manage the form's state
Add Alpine js loader script using a CDN (very fast and light)

<div>
    <form @submit.prevent="submit" x-data="{ status: 'normal', errors: {} }">
        <div x-show="status === 'normal'">
            <input name="email" type="email" />
            <input name="codename" type="text" />
            <input name="dress_color" type="color" />
            <button>
                Submit
            </button>
        </div>

        <div x-show="status === 'success'">
            <p>
                Successfully submitted form ✅
            </p>
        </div>

        <div x-show="status === 'error'">
            <p>
                Error submitting your form ❌
            </p>
        </div>
    </form>
</div>

<script>
    function submit(event) {
        event.preventDefault();
        const formData = new FormData(event.target);

        // Update the `endpointUrl` to your specific url below.
        const endpointUrl = "/sample-post/"
        fetch(endpointUrl, {
                method: "post",
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                },
            })
            .then(response => {
                this.status = response.ok ? 'success' : 'error';
                return response.json();
            })
            .then(data => {
                this.errors = data.errors || {};
            });
    }
</script>
<script defer="" src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js">
</script>

4. Check that the view works as expected

Submit something.
Check in the Django run console that you see something like: data = {"email": ..., "codename": ..., "dress_color":...}

Bonus: Prevent form flickering due to alpine loading

Add x-cloak to the form. This will hide the form until it's finished loading (avoiding flicker).
Add x-cloak into the style tag (or add a similar line to any stylesheet that you are using)

<div>
    <form x-cloak @submit.prevent="submit" x-data="{ status: 'normal', errors: {} }">
        <div x-show="status === 'normal'">
            <input name="email" type="email" />
            <input name="codename" type="text" />
            <input name="dress_color" type="color" />
            <button>
                Submit
            </button>
        </div>

        <div x-show="status === 'success'">
            <p>
                Successfully submitted form ✅
            </p>
        </div>

        <div x-show="status === 'error'">
            <p>
                Error submitting your form ❌
            </p>
        </div>
    </form>
</div>

<script>
    function submit(event) {
        event.preventDefault();
        const formData = new FormData(event.target);

        // Update the `endpointUrl` to your specific url below.
        const endpointUrl = "/sample-post/"
        fetch(endpointUrl, {
                method: "post",
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                },
            })
            .then(response => {
                this.status = response.ok ? 'success' : 'error';
                return response.json();
            })
            .then(data => {
                this.errors = data.errors || {};
            });
    }
</script>
<script defer="" src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js">
</script>

<style>
    [x-cloak] {
        display: none !important;
    }
</style>

Congratulations! Using Alpine.js is a neat, clean way to add simple JavaScript, including managing state, to your Django templates.