How to create multistep form using Django and Django formtools

What is Multistep form?

Multistep forms are multiple forms used to collect the user's input. These forms are usually broken into multiple pages. Multistep forms are usually used to collect more details from the user without making the user bored.

Building a Multistep form with django and django-formtools.

The form is a three-step form. The first page will prompt the user to make a selection, after which the second page will be revealed until the final (third page). 

Django and django-formtools can be used to create multistep forms. The tools required for this project are as follows:

  • Django
  • Django-formtools
  • Django crispy form
  • Crispy_bootstrap

Before we start the project let's activate our virtualenv. Then let's start the project by installing the required tools

pip install django-crispy-forms
pip install django
pip install django-formtools
pip install crispy-bootstrap5

We have installed all the tools required for our project. Let's commence the project. 

Create your project: The name of my project is data. 

django-admin startproject data 

Then we go to our project directory and make a datacollector app. 

python manage.py startapp datacollector

Now let's create our model in the models.py file.

We created two models namely, CustomerInfo and CustomerDocument.

Let's create the form in form.py file. 

We extended the model using the ModelForm. The forms are three in number. The first form asks the user to make a choice. The remaining forms ask for the user's input. The three forms are CustomerTypeForm, CustomerInfoForm and CustomerDocumentForm. 

Now. let's create our views in the views.py file.

As we fill out the form, the information we enter is temporarily saved in cookies. To handle FileField within any step form of the wizard, you have to add a file_storage to your wizardview subclass.

The url.py file. 

Recall we have to install our apps in our settings.py file.

The template of the form is as follows:

When you run your server the form will look like so:

You can get the code of the multistep form here: https://github.com/vingeophysicist/data1