DEV Community

loading...
Cover image for UserCreationForm with Multiple fields In Django.

UserCreationForm with Multiple fields In Django.

yahaya_hk profile image Yahaya Kehinde ・2 min read

User creation forms in Django provide a very easy and secure way of creating a sign-up form by drawing upon the concept of models. Similarly, using it is also quite straight forward.

First create a forms.py file within your app which we will name 'my_app' and at the top, make the following imports

from django import forms
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm
Enter fullscreen mode Exit fullscreen mode

We are importing the following dependencies from Django. They include the Django forms, the default User model and the UserCreation form.

Next create a class that inherits from the UserCreationForm. We will name our class UserForm.

Note that the default UserCreationForm provides just three parameters, the username, password1 and password2. However we can modify this to include more fields.

To do this, let's assume we want to add three new fields. A first name, last name and an email address which do not originally come included. All we need to do is to add more form fields, which bear similar attributes to the model fields.


class UserForm(UserCreationForm):
    first_name = forms.CharField()
    last_name = forms.CharField()
    email = forms.EmailField()

Enter fullscreen mode Exit fullscreen mode

Next, we add a Meta class to which has two functions:
1) To indicate which model we are using which in this case is the default user model
2) To show which fields we want to include in our final form and what order they should be rendered on our page.

After which we then include the default three(3) fields that come with the user creation form which are named as 'username', 'password1' and 'password2'


class UserForm(UserCreationForm):
    first_name = forms.CharField()
    last_name = forms.CharField()
    email = forms.EmailField()

    class Meta:
        model = User
        fields = ('first_name','last_name', 'username', 'email', 'password1' ,'password2' )

Enter fullscreen mode Exit fullscreen mode

In order to use our newly created UserForm, we need to import it in our views.py file

from my_app.forms import UserForm
Enter fullscreen mode Exit fullscreen mode

Within our register view, first, we check if the form method is a POST request. If it is, we then create an instance of the imported UserForm, pass it the values inputted into the form and store it in a variable called form. Next, we check if the form is valid. If it is, we then save the form and redirect to the Home page.

However, if the request is not a POST request, we just create an instance of the empty UserForm.

Finally, we pass in the form variable as a context dictionary in order to render our UserForm within our template.

def register(request):
    if request.method == 'POST':
        form = UserForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('home')
    else:
        form = UserForm()


    return render(request, 'register.html', {'form': form})

Enter fullscreen mode Exit fullscreen mode

In our register.html template; we create a <form/> tag, add our POST request and include our csrf_token and pass in our context form

<form method="POST">
    {% csrf_token %} 
    {{form.as_p}}
    <br>
    <input type="submit" value ="Register"/> 
  </form>
Enter fullscreen mode Exit fullscreen mode

This would render out nicely a form with our six(6) fields and the POST request would be handled and stored in our database. This method displays the power of the UserCreationForm and takes away the need to manually create a raw HTML form with all the applicable fields.

Discussion

pic
Editor guide
Collapse
itxdeeni profile image
Deen Muaz

This is awesone Kenny

Collapse
yahaya_hk profile image
Collapse
viallymboma profile image
vially

is it possible to be able to access those supplementary fields we added to the form from the html template side and manipulate them with javascript? is that possible? How possible can it be?

Collapse
markchukwuebuka profile image
Mark Chukwuebuka

this was really helpful, thanks man

Collapse
yahaya_hk profile image
Yahaya Kehinde Author

I’m so glad to hear this ☺️☺️