How to design step-by-step form in Django?

Question

I have been working on my Django web-app for quite some time now and due to initial poor planning, I have been constantly changing and moving things in my web app so it is a complete mess now. I decided to stop writing codes and reflect on how I want the things to work.

One of the questions that came up is the Application form that people would have to fill out.

models.py

class Contact(models.Model):
    ContactName = models.CharField(max_length = 250, default='',         
verbose_name="Contact Name")
    Country = models.CharField(max_length = 250, default='')
    City = models.CharField(max_length = 250, default='')
etc. 

I will have over a hundred fields in my form and I don't want them all to be displayed at once but rather make them step by step:

Personal Info -> General Info -> Upload supported documents -> etc.

I have two questions:

1. Should I keep all 100 fields under one class (Contact) or break them down into a few classes and connect them all using the ForeignKey? What are the best practices?

2. Once the Personal Info fields get filled out, an applicant will press Continue and will be moved to General Info and fill that out and so forth. Should this logic be taken care of in Django views.py or it is something that is going to be accomplished using JavaScript? Or is it the combination of both?

I am just trying to wrap my head around how everything works before I touch the keyboard again.

Answer 1

First of all never design your application based on the UI. The presentation layer is not unique, you can have different presentation layers like the web UI, the mobile UI and thirdy party API interface.

When you create your backend do not tailor it for the presentation. Is the presentation that must adapt.

Create your models on the paper using a ER diagrams and if you need to have a wizard form, you can use the former Form Wizard now Form tools https://django-formtools.readthedocs.io/en/latest/ to create a set of forms to collect and validate the data and create the models (plural) in your backend.

Using the formtools you don't need to use the javascript. The formtools lets you to create many different forms to run together. Every form has its own validation, but at the end you have a done function to manage all the data together to create what you need.

You don't need the JS, but you can improve the UX (user experience) using the proper JS tool. I would not care about that at the moment. Your current problem is to manage the design of your app, about the presentation(s) you can take care later.