Как я могу использовать свое поле modelForm внутри поля формы начальной загрузки?

Question

my forms.py выглядит так

class UserRegistration(UserCreationForm):
    def __int__(self, *args, **kwargs):
        super(UserRegistration, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_id = 'id-registrationForm'
        self.helper.form_class = 'u-form--modern'
        self.helper.form_method = 'post'
        self.helper.form_action = 'submit_form'

        self.helper.add_input(Submit('submit', 'Submit'))

    class Meta:
        model = User

        fields = ['first_name',
                  'username',
                  'last_name',
                  'email',
                  'password1',
                  'password2']

и мои шаблоны выглядят так (я отображаю только 1 поле, потому что они более или менее похожи)

<form class="js-validate mt-5" id="id-registrationForm" method="post">
 <div class="js-form-message mb-4">
                        <label class="h6 small d-block text-uppercase "> Email address</label>
                        <div class="js-focus-state input-group u-form">
                            <input type="email" class="form-control u-form__input" name="email"
                                   placeholder="your@email.com">
                        </div>
                    </div>

К сожалению, моинавыки переднего плана близки к 0, и я не мог понять, как использовать мой {{form.email}} внутри предварительно созданной формы загрузчика.Мне нужно это, чтобы отправить свою ModelForm и зарегистрировать пользователя.
Просто чтобы прояснить это, я хочу, чтобы моя форма django выглядела так же, как та, что внизу

Answer 1

Я на самом деле придумал решение, с помощью django-widget-tweaks

{% load widget_tweaks %}
<div class="js-form-message mb-4">
     <div class="js-focus-state input-group u-form u-form">
           <label class="h6 small d-block text-uppercase "> Email address</label>
                 <div class="js-focus-state input-group u-form">
                    {{ form.email|add_class:"form-control u-form__input u-form" }}
                            </div>
                        </div>

По крайней мере для меня, настройки виджетов django были намного более интуитивными в том, как добавитьмой пользовательский css к форме

мой forms.py

class UserRegistration(UserCreationForm):
    email = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'email@email.com'}))

class Meta:
    model = User

    fields = ['first_name',
              'username',
              'last_name',
              'email',
              'password1',
              'password2']

Answer 2

Это просто!Сначала установите bootstrap4:

pip install django-bootstrap4

Затем в ваш html-файл загрузите bootstrap4 и форму:

{% load bootstrap4 %}
<form method="post">
  {% csrf_token %}
  {% bootstrap_form form %}
  <input type="submit" class="btn btn-primary" value="submit">
</form>

Я рекомендуючтобы изменить форму, чтобы она выглядела так:

from django.contrib.auth import get_user_model
from django.contrib.auth.forms import UserCreationForm
from django import forms


class UserCreateForm(UserCreationForm):

    class Meta():
        fields = ['username', 'email', 'password1', 'password2']
        model = get_user_model()
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)