CODEWITHSUNDEEP
djangodjango-modelsdjango-viewsdjango-forms
Frank Castle
Frank Castle

Reputation: 345

Django custom registration form html

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!

enter image description here

Upvotes: 0

Views: 1095

Answers (1)

mr blu
mr blu

Reputation: 469

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>

Upvotes: 1

Related Questions