Comment personnaliser le rendu de ses formulaires Django avec django-crispy-form ?

 

WePynaire

Discussion et questions

Objectifs

  • Découvrir django-crispy-forms
  • Approfondir la mise en forme des formulaires
  • Séparer le form et la forme

Liens utiles

Le dépôt du WePynaire

Diapositives du WePynaire

$ mkdir .venv
$ pipenv install django
$ pipenv run django-admin startproject config .
$ pipenv run python manage.py startapp wepynaire

Création du projet

Configuration de Bootstrap 5 à l'aide de python-webpack-boilerplate

$ pipenv install python-webpack-boilerplate
$ pipenv shell # active l'environnement virtuel
$ python manage.py webpack_init
$ cd frontend
$ npm install # installer node.js au préalable depuis le site officiel
$ npm run build

Installation et config de python-webpack-boilerplate

nouveau

Configuration du répertoire des templates

Création d'un base.html

1. feuilles de style

2. scripts javascript

3. blocs standards

Créaction des modèles

from django.db import models
from django.conf import settings
from django.contrib.auth.models import AbstractUser


class User(AbstractUser):
  """Exemple d'utilisateur."""

  
class UserAddress(models.Model):
  """Modèle de liaison entre utilisateur et adresse."""


class Address(models.Model):
  """Représente une adresse postale."""
  
from django.db import models
from django.conf import settings
from django.contrib.auth.models import AbstractUser


class User(AbstractUser):
    """Exemple d'utilisateur."""

    first_name = None
    last_name = None
    name = models.CharField(max_length=255, blank=True)
    addresses = models.ManyToManyField(
        "Address",
        related_name="users",
        through="UserAddress",
    )


class UserAddress(models.Model):
    """Modèle de liaison entre utilisateur et adresse."""

    class AdresseRoles(models.TextChoices):
        HOME = "home", "Adresse de domicile"
        INVOICE = "invoice", "Adresse de facturation"
        DELIVERY = "delivery", "Adresse de livraison principale"

    user = models.ForeignKey(
        settings.AUTH_USER_MODEL, on_delete=models.CASCADE
    )
    address = models.ForeignKey("Address", on_delete=models.CASCADE)
    address_role = models.CharField(
        "role de l'adresse",
        max_length=255,
        choices=AdresseRoles.choices,
        default=AdresseRoles.HOME,
    )
    created = models.DateTimeField(
      "date de création", auto_now_add=True
    )
    updated = models.DateTimeField(
      "date de mise à jour", auto_now=True
    )


class Address(models.Models):
    """Représente une adresse postale."""

    class Countries(models.TextChoices):
        SWITZERLAND = "CH", "Suisse"
        FRANCE = "F", "France"
        BELGIUM = "B", "Belgique"
        CANADA = "CAN", "Canada"

    street = models.CharField("rue", max_length=255, blank=True)
    street_number = models.CharField(
        "numéro de la rue", max_length=6, blank=True
    )
    address_complement = models.CharField(
        "complément d'adresse", max_length=255, blank=True
    )
    city = models.CharField("ville", max_length=100)
    zip_code = models.CharField("numéro postal", max_length=6)
    country = models.CharField(
        "pays",
        max_length=4,
        choices=Countries.choices,
        default=Countries.SWITZERLAND,
    )
$ python manage.py makemigrations
$ python manage.py migrate
$ python manage.py makemigrations
$ python manage.py migrate

Créaction des formulaires

from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    address_type = forms.ChoiceField(label="type de l'adresse")

    class Meta:
        model = Address
        fields = (
            "street",
            "street_number",
            "address_complement",
            "city",
            "zip_code",
            "country",
        )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

Pour UserAddress

Les vues

from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    
    ...
    
    def get(self, request, *args, **kwargs):
        """Réponds à l'affichage du formulaire."""
        self.forms = self.get_forms()
        return self.render_to_response(forms=self.forms)

    def post(self, request, *args, **kwargs):
        """Réponds à la soumission du formulaire."""
        self.forms = self.get_forms()
        if self.all_valid():
            return self.form_valid()
        else:
            return self.form_invalid()
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    
    ...
    
    form_classes = None

    def get_forms(self):
        return [
            form(self.request.POST or None) 
            for form in self.form_classes
        ]
      
    ...
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    
    ...
    
    def all_valid(self):
        """Retourne True si tous les formulaires sont valides."""
        if all(form.is_valid() for form in self.forms):
            return True
        return False
      
    ...
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    
    ...
    
    def form_valid(self):
        """Actions à entreprendre si tous les formulaires sont valides."""
        return redirect(str(self.success_url))

    def form_invalid(self):
        """Actions à entreprendre si un formulaire est invalide."""
        return self.render_to_response(forms=self.forms)
      
    ...
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


    template_name = "wepynaire/home.html"
    form_classes = [UserCreationForm, AddressCreationForm]
    success_url = "wepynaire:home"

    def form_valid(self):
        user_form, address_form = self.forms
        user = user_form.save()
        address = address_form.save()
        address_type = address_form.cleaned_data.get("address_type")
        UserAddress.objects.create(
            user=user,
            address=address,
            address_role=address_type,
        )
        return super().form_valid()


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


    template_name = "wepynaire/home.html"
    form_classes = [UserCreationForm, AddressCreationForm]
    success_url = "wepynaire:home"

    def form_valid(self):
        user_form, address_form = self.forms
        user = user_form.save()
        address = address_form.save()
        address_type = address_form.cleaned_data.get("address_type")
        UserAddress.objects.create(
            user=user,
            address=address,
            address_role=address_type,
        )
        return super().form_valid()


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


    template_name = "wepynaire/home.html"
    form_classes = [UserCreationForm, AddressCreationForm]
    success_url = "wepynaire:home"

    def form_valid(self):
        user_form, address_form = self.forms
        user = user_form.save()
        address = address_form.save()
        address_type = address_form.cleaned_data.get("address_type")
        UserAddress.objects.create(
            user=user,
            address=address,
            address_role=address_type,
        )
        return super().form_valid()


home_view = HomeView.as_view()


















from django.shortcuts import render, redirect

from django.views.generic import View

from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress


# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
    """Vue générique simple gérant plusieurs formulaires."""
    

# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
    """Vue gérant la page d'accueil du site."""


    template_name = "wepynaire/home.html"
    form_classes = [UserCreationForm, AddressCreationForm]
    success_url = "wepynaire:home"

    def form_valid(self):
        user_form, address_form = self.forms
        user = user_form.save()
        address = address_form.save()
        address_type = address_form.cleaned_data.get("address_type")
        UserAddress.objects.create(
            user=user,
            address=address,
            address_role=address_type,
        )
        return super().form_valid()


home_view = HomeView.as_view()


















le template home.html

$ python manage.py runserver

Installation de django-crispy-forms pour Bootstrap 5

1. Visiter la documentation de crispy-bootstrap5

2. Installer crispy-bootstrap5

$ pipenv install crispy-bootstrap5

3. Enregistrer les crispy-forms et crispy-bootstrap5 dans INSTALLED_APPS

4. Définir les constantes de config de crispy-forms

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
<div class="container">
    <h1 class="row">Nouvelle inscription</h1>
    <form method="post" class="row">
        {% csrf_token %}
        {% for form in forms %}
            {{ form|crispy }}
        {% endfor %}
        <button type="submit" class="btn btn-primary">Soumettre</button>
    </form>
</div>
{% endblock content %}

home.html

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
<div class="container">
    <h1 class="row">Nouvelle inscription</h1>
    <form method="post" class="row">
        {% csrf_token %}
        {% for form in forms %}
            {{ form|crispy }}
        {% endfor %}
        <button type="submit" class="btn btn-primary">Soumettre</button>
    </form>
</div>
{% endblock content %}

home.html

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
<div class="container">
    <h1 class="row">Nouvelle inscription</h1>
    <form method="post" class="row">
        {% csrf_token %}
        {% for form in forms %}
            {{ form|crispy }}
        {% endfor %}
        <button type="submit" class="btn btn-primary">Soumettre</button>
    </form>
</div>
{% endblock content %}

home.html

  • L'ordre des champs est imposé
  • La mise en page est automatique mais rigide

Simple mais pas très flexible

Regardons plus loin !

Crispy FormHelper & Layouts

Lisons un peu de documentation

1. Instancier un FormHelper

2. Créer une mise en page (layout)

Instancions les FormHelper

from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""


    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    address_type = forms.ChoiceField(label="Type de l'adresse")

    class Meta:
        model = Address
        fields = (
            ...
        )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "street",
            "street_number",
            "address_complement",
            "city",
            "zip_code",
            "country",
        )


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    address_type = forms.ChoiceField(label="Type de l'adresse")

    class Meta:
        model = Address
        fields = (
            ...
        )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "street",
            "street_number",
            "address_complement",
            "city",
            "zip_code",
            "country",
        )


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    address_type = forms.ChoiceField(label="Type de l'adresse")

    class Meta:
        model = Address
        fields = (
            ...
        )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "street",
            "street_number",
            "address_complement",
            "city",
            "zip_code",
            "country",
        )


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    address_type = forms.ChoiceField(label="Type de l'adresse")

    class Meta:
        model = Address
        fields = (
            ...
        )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "street",
            "street_number",
            "address_complement",
            "city",
            "zip_code",
            "country",
        )


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column

from .models import UserAddress, Address

User = get_user_model()


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "name",
            "username",
            "password1",
            "password2",
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    address_type = forms.ChoiceField(label="Type de l'adresse")

    class Meta:
        model = Address
        fields = (
            ...
        )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            "street",
            "street_number",
            "address_complement",
            "city",
            "zip_code",
            "country",
        )


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
  
  
  
  
  
{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
<div class="container">
    <h1 class="row">Nouvelle inscription</h1>
    <form method="post" class="row">
        {% csrf_token %}
        {% for form in forms %}
            {% crispy form %}
        {% endfor %}
        <button 
            type="submit" 
            class="btn btn-primary"
        >Soumettre</button>
    </form>
</div>
{% endblock content %}

Personnalisons un peu ce formulaire

...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
            ),
        )
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column("name"),
                    Column("username"),
                ),
                Row(
                    Column("password1"),
                    Column("password2"),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
...

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset

...


class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.layout = Layout(
            Fieldset(
                "Données de connexion",
                Row(
                    Column(Field("name", placeholder="Votre nom")),
                    Column(Field("username", placeholder="Votre username")),
                ),
                Row(
                    Column(
                        Field("password1", placeholder="Votre mot de passe")
                    ),
                    Column(
                        Field(
                            "password2", placeholder="Répétez le mot de passe"
                        )
                    ),
                ),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset(
                "Adresse",
                Row(
                    Column("street", css_class="col-md-10"),
                    Column("street_number", css_class="col-md-2"),
                ),
                Row("address_complement"),
                Row(
                    Column("zip_code", css_class="col-md-4"),
                    Column("city"),
                ),
                Row("country"),
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

from crispy_forms.layout import Field

  • css_id

  • css_class

  • placeholder

  • hx_get

  • hx_target

  • ...

Séparer la structure du formulaire et sa mise en page

  • form_layouts.py: mise en forme des formulaires
  • forms.py: définition des formulaires

class UserCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'utisateur."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Données de connexion",
                Row(
                    Column(Field("name", placeholder="Votre nom")),
                    Column(Field("username", placeholder="Votre username")),
                ),
                Row(
                    Column(
                        Field("password1", placeholder="Votre mot de passe")
                    ),
                    Column(
                        Field(
                            "password2", placeholder="Répétez le mot de passe"
                        )
                    ),
                ),
                # Utilisez des classes css pour le style
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'adresse."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Adresse",
                Row(
                    Column(
                        Field("street", placeholder="Votre rue"),
                        css_class="col-md-10",
                    ),
                    Column(
                        Field("street_number", placeholder="N°"),
                        css_class="col-md-2",
                    ),
                ),
                Row(
                    Field(
                        "address_complement",
                        placeholder="Votre complément d'adresse",
                    ),
                ),
                Row(
                    Column(
                        Field("zip_code", placeholder="Code postal"),
                        css_class="col-md-4",
                    ),
                    Column(Field("city", placeholder="Votre ville")),
                ),
                Row("country", placeholder="Votre pays"),
                # Utilisez des classes css pour le style
                style="""
                        border: 1px black solid; 
                        border-radius: 10px; 
                        margin-bottom: 1rem;
                    """,
            ),
        )
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

class UserCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'utisateur."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Données de connexion",
                Row(
                    Column(Field("name", placeholder="Votre nom")),
                    Column(Field("username", placeholder="Votre username")),
                ),
                Row(
                    Column(
                        Field("password1", placeholder="Votre mot de passe")
                    ),
                    Column(
                        Field(
                            "password2", placeholder="Répétez le mot de passe"
                        )
                    ),
                ),
                # Utilisez des classes css pour le style
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'adresse."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Adresse",
                Row(
                    Column(
                        Field("street", placeholder="Votre rue"),
                        css_class="col-md-10",
                    ),
                    Column(
                        Field("street_number", placeholder="N°"),
                        css_class="col-md-2",
                    ),
                ),
                Row(
                    Field(
                        "address_complement",
                        placeholder="Votre complément d'adresse",
                    ),
                ),
                Row(
                    Column(
                        Field("zip_code", placeholder="Code postal"),
                        css_class="col-md-4",
                    ),
                    Column(Field("city", placeholder="Votre ville")),
                ),
                Row("country", placeholder="Votre pays"),
                # Utilisez des classes css pour le style
                style="""
                        border: 1px black solid; 
                        border-radius: 10px; 
                        margin-bottom: 1rem;
                    """,
            ),
        )
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

class UserCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'utisateur."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Données de connexion",
                Row(
                    Column(Field("name", placeholder="Votre nom")),
                    Column(Field("username", placeholder="Votre username")),
                ),
                Row(
                    Column(
                        Field("password1", placeholder="Votre mot de passe")
                    ),
                    Column(
                        Field(
                            "password2", placeholder="Répétez le mot de passe"
                        )
                    ),
                ),
                # Utilisez des classes css pour le style
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'adresse."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Adresse",
                Row(
                    Column(
                        Field("street", placeholder="Votre rue"),
                        css_class="col-md-10",
                    ),
                    Column(
                        Field("street_number", placeholder="N°"),
                        css_class="col-md-2",
                    ),
                ),
                Row(
                    Field(
                        "address_complement",
                        placeholder="Votre complément d'adresse",
                    ),
                ),
                Row(
                    Column(
                        Field("zip_code", placeholder="Code postal"),
                        css_class="col-md-4",
                    ),
                    Column(Field("city", placeholder="Votre ville")),
                ),
                Row("country", placeholder="Votre pays"),
                # Utilisez des classes css pour le style
                style="""
                        border: 1px black solid; 
                        border-radius: 10px; 
                        margin-bottom: 1rem;
                    """,
            ),
        )
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

class UserCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'utisateur."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Données de connexion",
                Row(
                    Column(Field("name", placeholder="Votre nom")),
                    Column(Field("username", placeholder="Votre username")),
                ),
                Row(
                    Column(
                        Field("password1", placeholder="Votre mot de passe")
                    ),
                    Column(
                        Field(
                            "password2", placeholder="Répétez le mot de passe"
                        )
                    ),
                ),
                # Utilisez des classes css pour le style
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'adresse."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Adresse",
                Row(
                    Column(
                        Field("street", placeholder="Votre rue"),
                        css_class="col-md-10",
                    ),
                    Column(
                        Field("street_number", placeholder="N°"),
                        css_class="col-md-2",
                    ),
                ),
                Row(
                    Field(
                        "address_complement",
                        placeholder="Votre complément d'adresse",
                    ),
                ),
                Row(
                    Column(
                        Field("zip_code", placeholder="Code postal"),
                        css_class="col-md-4",
                    ),
                    Column(Field("city", placeholder="Votre ville")),
                ),
                Row("country", placeholder="Votre pays"),
                # Utilisez des classes css pour le style
                style="""
                        border: 1px black solid; 
                        border-radius: 10px; 
                        margin-bottom: 1rem;
                    """,
            ),
        )
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

class UserCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'utisateur."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Données de connexion",
                Row(
                    Column(Field("name", placeholder="Votre nom")),
                    Column(Field("username", placeholder="Votre username")),
                ),
                Row(
                    Column(
                        Field("password1", placeholder="Votre mot de passe")
                    ),
                    Column(
                        Field(
                            "password2", placeholder="Répétez le mot de passe"
                        )
                    ),
                ),
                # Utilisez des classes css pour le style
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'adresse."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Adresse",
                Row(
                    Column(
                        Field("street", placeholder="Votre rue"),
                        css_class="col-md-10",
                    ),
                    Column(
                        Field("street_number", placeholder="N°"),
                        css_class="col-md-2",
                    ),
                ),
                Row(
                    Field(
                        "address_complement",
                        placeholder="Votre complément d'adresse",
                    ),
                ),
                Row(
                    Column(
                        Field("zip_code", placeholder="Code postal"),
                        css_class="col-md-4",
                    ),
                    Column(Field("city", placeholder="Votre ville")),
                ),
                Row("country", placeholder="Votre pays"),
                # Utilisez des classes css pour le style
                style="""
                        border: 1px black solid; 
                        border-radius: 10px; 
                        margin-bottom: 1rem;
                    """,
            ),
        )
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

class UserCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'utisateur."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Données de connexion",
                Row(
                    Column(Field("name", placeholder="Votre nom")),
                    Column(Field("username", placeholder="Votre username")),
                ),
                Row(
                    Column(
                        Field("password1", placeholder="Votre mot de passe")
                    ),
                    Column(
                        Field(
                            "password2", placeholder="Répétez le mot de passe"
                        )
                    ),
                ),
                # Utilisez des classes css pour le style
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'adresse."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Adresse",
                Row(
                    Column(
                        Field("street", placeholder="Votre rue"),
                        css_class="col-md-10",
                    ),
                    Column(
                        Field("street_number", placeholder="N°"),
                        css_class="col-md-2",
                    ),
                ),
                Row(
                    Field(
                        "address_complement",
                        placeholder="Votre complément d'adresse",
                    ),
                ),
                Row(
                    Column(
                        Field("zip_code", placeholder="Code postal"),
                        css_class="col-md-4",
                    ),
                    Column(Field("city", placeholder="Votre ville")),
                ),
                Row("country", placeholder="Votre pays"),
                # Utilisez des classes css pour le style
                style="""
                        border: 1px black solid; 
                        border-radius: 10px; 
                        margin-bottom: 1rem;
                    """,
            ),
        )
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

class UserCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'utisateur."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Données de connexion",
                Row(
                    Column(Field("name", placeholder="Votre nom")),
                    Column(Field("username", placeholder="Votre username")),
                ),
                Row(
                    Column(
                        Field("password1", placeholder="Votre mot de passe")
                    ),
                    Column(
                        Field(
                            "password2", placeholder="Répétez le mot de passe"
                        )
                    ),
                ),
                # Utilisez des classes css pour le style
                style="""
                    border: 1px black solid; 
                    border-radius: 10px; 
                    margin-bottom: 1rem;
                """,
            ),
        )


class AddressCreationLayout(Layout):
    """Mise en page pour le formulaire de création
    d'adresse."""

    def __init__(self):
        super().__init__(
            Fieldset(
                "Adresse",
                Row(
                    Column(
                        Field("street", placeholder="Votre rue"),
                        css_class="col-md-10",
                    ),
                    Column(
                        Field("street_number", placeholder="N°"),
                        css_class="col-md-2",
                    ),
                ),
                Row(
                    Field(
                        "address_complement",
                        placeholder="Votre complément d'adresse",
                    ),
                ),
                Row(
                    Column(
                        Field("zip_code", placeholder="Code postal"),
                        css_class="col-md-4",
                    ),
                    Column(Field("city", placeholder="Votre ville")),
                ),
                Row("country", placeholder="Votre pays"),
                # Utilisez des classes css pour le style
                style="""
                        border: 1px black solid; 
                        border-radius: 10px; 
                        margin-bottom: 1rem;
                    """,
            ),
        )
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = UserCreationLayout()

        
class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = AddressCreationLayout()
class UserCreationForm(auth_forms.UserCreationForm):
    """Formulaire de souscription pour les utilisateurs."""

    class Meta(auth_forms.UserCreationForm):
        model = User
        fields = ("name", "username")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = UserCreationLayout()

        
class AddressCreationForm(forms.ModelForm):
    """Formulaire de création pour une adresse."""

    ...

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["address_type"].choices = UserAddress.AdresseRoles.choices

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = AddressCreationLayout()

Des éléments de mise en page avancés

Différents frameworks CSS

La documentation de crispy-forms

https://django-crispy-forms.readthedocs.io/

WePynaire "Comment personnaliser le rendu de ses formulaires Django de manière poussée avec django-crispy-form ?"

By Thierry Chappuis

WePynaire "Comment personnaliser le rendu de ses formulaires Django de manière poussée avec django-crispy-form ?"

  • 172