Django custom registration form html - django

Question

New to Django and I am attempting to create a customer registration form and was successful. However the tutorial I followed showed me how to iterate through a loop, the contents of my registration_form which doesn't really give me much flexibility from a UI perspective, or so it seems. Can someone tell me how to customize this form based on the code I've got?
HTML:
<h1>This is the register.html</h1>
<div class="col-md-4 offset-md-4">
<form method="post">
{% csrf_token %}
{% for field in registration_form %}
<p>
{{field.label_tag}}
{{field}}
{% if field.help_text %}
<small style="color: grey;">{{field.help_text}}</small>
{% endif %}
{% for error in field.errors %}
<p style="color: grey;">{{error}}</p>
{% endfor %}
</p>
{% endfor %}
<button type="submit">Register</button>
</form>
</div>
views.py
def registration_view(request):
context = {}
if request.POST:
form = RegistrationForm(request.POST)
if form.is_valid():
form.save()
email = form.cleaned_data.get('email')
raw_password = form.cleaned_data.get('password1')
account = authenticate(email=email, password=raw_password)
login(request, account)
return redirect('home')
else:
context['registration_form'] = form
else:
form = RegistrationForm()
context['registration_form'] = form
print(context)
return render(request, 'accounts/register.html', context)
forms.py
class RegistrationForm(UserCreationForm):
email = forms.EmailField(max_length=100, help_text='Required. Add a valid email address')
class Meta:
model = Account
fields = ('email', 'username', 'password1', 'password2', 'first_name', 'last_name')
the form renders and works fine with registration, just looks kinda crappy. thanks!

Answer 1

You could render each field individually and take advantage of bootstrap styling as well. For example for the email field, you could have something like below
<div class="form-group">
{{ registration_form.email.label_tag }}
{{ registration_form.email }}
</div>
You can also have a div below it to display its errors on post
<div class="errors">
{% if registration_form.email.errors %}
{% for error in registration_form.email.errors %}
<strong>{{ error|escape }}</strong>
{% endfor %}
{% endif %}
</div>