How can I use my modelForm field inside of a bootstrap form field?

Question

my forms.py look like this

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']

and my templates look like this( i display only 1 field cuz they are more or less similar)

<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>

Unfortunately my front-end skills are close to 0 and I could not really find out how to use my {{ form.email }} inside of a bootstrap's premade form. I need this to submit my modelForm and register a user.
Just to make it clear, i want my django form look like the one on the bottom

Possible duplicate of [Define css class in django Forms](https://stackoverflow.com/questions/401025/define-css-class-in-django-forms) — coderDude, Oct 28 '18 at 19:36
You can set like the coderDude answer, or you can use Django crispy Forms and make your life easier https://django-crispy-forms.readthedocs.io/en/latest/ — devdob, Oct 28 '18 at 20:50

score 0 · Answer 1 · answered Oct 29 '18 at 08:28

It is simple! First install the bootstrap4 :

pip install django-bootstrap4

Then in your html file load bootstrap4 and your form :

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

I recommend you to change your form to be look like this:

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)

score 0 · Answer 2 · answered Oct 29 '18 at 12:34

I actually came up with the solution, with the help of 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>

At least for me, django widget tweaks was a lot more intuitive in how to add my custom css to the form

my 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']

How can I use my modelForm field inside of a bootstrap form field?

2 Answers2