Why won't my UserCreationForm render in chronological order?

Question

I want the form to show

1. Username
2. Email
3. Password
4. Password(2)

At the moment, it is showing

1. Username
2. Password
3. Password (2)
4. Email

I am trying to follow this tutorial https://www.youtube.com/watch?v=q4jPR-M0TAQ.

I have looked at the creators notes on Github but that has not helped.

I have double checked my code and cannot see any daft typos.

Can anyone provide any insight?

from django import forms 
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm

class UserRegisterForm(UserCreationForm):
    email = forms.EmailField()

class Meta:
    model = User
    fields = ['username', 'email', 'password1', 'password2']


from django.shortcuts import render, redirect 
from django.contrib import messages 
from .forms import UserRegisterForm

def register(request):
    if request.method == 'POST':
        form = UserRegisterForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            messages.success(request, f'Account created for {username}!')
            return redirect ('blog-home')
    else:
        form = UserRegisterForm()
    return render(request, 'users/register.html', {'form':form})


{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Join Today</legend>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Sign Up</button>
            </div>
        </form>
        <div class="border-top pt-3">
            <small class="text-muted">
                Already Have An Account? <a class="ml-2" href="#">Sign In</a>
            </small>
        </div>
    </div>
{% endblock content %}

Answer 1

you can customize the look and order of the form by this method, create a new template in the account/ template directory, name it register.html, and make it look as follows:

{% extends "base.html" %}

{% block title %}Create an account{% endblock %}

{% block content %}
  <h1>Create an account</h1>
  <p>Please, sign up using the following form:</p>
  <form action="." method="post">{% csrf_token %}
    {{ form.username }}
    {{ form.other_fields_as_you_like }}
    <p><input type="submit" value="Create my account"></p>
  </form>
{% endblock %}