Making Django messages appear in a specific place on the page

Question

I have a registration form, and I want my errors to appear under my submit button. How could I make that work? +i'd like to add custom classes to my messages.

My forms.py

from django import forms
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Submit, Row, Column



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

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

    #Custom classok
    self.fields['username'].widget.attrs['class'] = 'input'
    self.fields['email'].widget.attrs['class'] = 'input'
    self.fields['password1'].widget.attrs['class'] = 'input'
    self.fields['password2'].widget.attrs['class'] = 'input'

    #Custom label
    self.fields['username'].label = ""
    self.fields['email'].label = ""
    self.fields['password1'].label = ""
    self.fields['password2'].label = ""

    #Custom placeholder
    self.fields['username'].widget.attrs['placeholder'] = 'Username'
    self.fields['email'].widget.attrs['placeholder'] = 'Email address'
    self.fields['password1'].widget.attrs['placeholder'] = 'Password'
    self.fields['password2'].widget.attrs['placeholder'] = 'Confirm Password'
    
    
    
    #Help text off
    for fieldname in ['username', 'password1', 'password2']:
        self.fields[fieldname].help_text = None

My views.py file:

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

# Create your views here.
def register(request):
if request.method == 'POST':
    form = UserRegisterForm(request.POST)
    if form.is_valid():
        form.save()
        messages.success(request, f'Your account has been created! You are now able to log in!')
        return redirect('landing-home')
else:
    form = UserRegisterForm()
    
return render(request, 'users/register.html',{'form':form})

I have my html code here aswell:

{%block content%}
<form class="form" method="POST">
    {% csrf_token %} 
    <fieldset class="form-group text-center text-uppercase">
        <h1 class="sign-up__header">Sign up</h1>
        {{form.as_p}}
    </fieldset>
    <div class="form-group">
        <button class="submit" type="submit">Sign up</button>
    </div>
   
    </div>
</form>

</div>




{%endblock content%}

Basically what I want to achive is that my error messages that are appearing all over my form, they would be organised under my submit button.

Answer 1

Maybe something like this will do the trick :

<form class="form" method="POST">
    {% csrf_token %} 
    <fieldset class="form-group text-center text-uppercase">
        <h1 class="sign-up__header">Sign up</h1>
        {% for field in form %}
            <p>
                {{ field.label_tag }}
                {{ field }}
                {{ field.help_text }}
            </p>
        {% endif %}
    </fieldset>
    <div class="form-group">
        <button class="submit" type="submit">Sign up</button>
    </div>
    {% for error in form.errors %}
        <div class="text-danger">{{ error }}</p>
    {% endfor %}
    </div>
</form>