Неправильное отображение полей при использовании Django UserCreation Form и AbstractUser

Я расширяю AbstractUser, просто добавляя некоторые новые поля, и расширяю UserCreationForm для отображения полей. Я не знаю, почему поля ввода выглядят так (некоторые поля больше других). Не могу найти решение этой проблемы.

Мой код:

models.py

from django.contrib.auth.models import AbstractUser
from django.db import models
from django.utils.translation import gettext_lazy as _


# Create your models here.
class CustomUser(AbstractUser):
    WOMAN = "female"
    MAN = "male"
    GENDER = [(WOMAN, "Female"), (MAN, "Male")]

    gender = models.CharField(verbose_name=_("Gender"), choices=GENDER, max_length=10, null=True, blank=False,)
    phone = models.CharField(verbose_name=_("Phone"), max_length=20, null=True, blank=True,)

form.py

from django.contrib.auth.forms import UserCreationForm, UserChangeForm
from django.utils.translation import gettext_lazy as _

from .models import CustomUser

class CustomUserCreationForm(UserCreationForm):
    class Meta(UserCreationForm):
        model = CustomUser
        fields = ['email', 'gender', 'phone', 'first_name', 'last_name']

views.py

class SignUpView(CreateView):
    """Signup View."""
    form_class = CustomUserCreationForm
    success_url = reverse_lazy("home")
    template_name = "registration/signup.html"

signup.html

{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block content %}
<section id="login" class="container secondary-page">
    <div class="general general-results players">
        <!-- LOGIN BOX -->
        <div class="top-score-title right-score col-md-6">
            <h3>Register<span> Now</span><span class="point-int"> !</span></h3>
            <div class="col-md-12 login-page">
                <form method="post" class="login-form">
                    {% csrf_token %}
                    {{ form|crispy }}
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</section>
{% endblock content %}

Вернуться на верх