Django UserCreationForm and Bootstrap Forms Layouts

Question

I am trying to extend the UserCreationForm using a Bootstrap layout style for the field username . After the input tag in the registration form, I would like to add a div element like an example that I have readapted from the Bootstrap page: ie suggesting the user to enter the same username as the company domain.

Let's focus to the bare minimum. The form readapted from Bootstrap is:

<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
  <div class="col-auto">
    <div class="input-group">
      <input type="text" name="username" class="form-control" placeholder="your.username" id="id_username">
      <div class="input-group-text">@company.domain.com</div>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Which produces the following:

For the moment, I am using only {{form.as_p}} in my html template file:

<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
  {{form.as_p}}
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

And I don't know how to add the <div class="input-group-text">@company.domain.com</div> part embedded in a <div class="input-group">...</div> block.

My actual forms.py is a bit more complex, but readapted for this minimum example it contains the widget attributes as follows:

class SignupForm(UserCreationForm):    
    username = forms.CharField(label="",
        widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'your.username'}))
    
    class Meta:
        model = User
        fields = (
            'username',
        )

Without additional libraries, is there a way to extend the widget attributes? Is it even possible to use {{form.as_p}} as I am currently doing or should I use another method?

Answer 1

If you want to use only {{ form.as_p }} with bootstrap then you need to install django-bootstrap .

Install it using pip:

pip install django-bootstrap4

After installation, add it in INSTALLED_APPS in settings.py file.

INSTALLED_APPS = [
   'bootstrap4',
]

And in templates, you need to load it.

{% load bootstrap4 %}
{% bootstrap_messages %}
<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">

  {% csrf_token %}
  
  {% bootstrap_form form %} # added `form` here. we don't need to use with as_p.

  <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

This is the way you can use bootstrap along with {{ form.as_p }}

OR

Try another way:

Simply you can use {{ form.username }} inside an input tag in template.

For Example:

<input type="text" value="{{ form.username }}">


<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
  <div class="col-auto">
    <div class="input-group">
      <input type="text" name="username" class="form-control" placeholder="your.username" id="id_username" value="{{ form.username }}"> #Added here
      <div class="input-group-text">@company.domain.com</div>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>