Using multi step form

I have a multi step form design. I am trying send form data using my modelform.
After I render the fields manually, I try to submit data but nothing submitted the db.

I suppose that the problem is because it’s a multi-step form.
I tried to transfer the data between steps using ‘session’ but I don’t know exactly what the structure should be.

This is my form,

class NameForm(forms.ModelForm):
	class Meta:
    	model = NameModel
    	fields = ('field_1', 'field_2', 'field_3', 'field_4', 'field_5', 'field_6' )
      
    	widgets = { ....}

This is from the template,
There are two fieldsets in the form element.

        <form action="" method="post" class="contact-form">
          {% csrf_token %}
          <h6>Form Heading</h6>
          <div class="contact-form__step-control">
            <span class="active"></span>
            <span></span>
          </div>
          
          <fieldset class="contact-form__block">
            <div class="form-item form-item--border">
              {{ form.field_1 }}
            </div>
            <div class="form-item form-item--border">
              {{ form.field_2 }}
            </div>
            <div class="select-item">
              <select name="abcd" id="id_abcd" required>
                {% for abcd in form.field_3 %}
                  {{ abcd }}
                {% endfor %}
              </select>
            </div>
          </fieldset>
          
          <fieldset class="consultant-contact-form__block">
            <div class="form-item form-item--border">
              <div class="select-item">
                <select name="qwerty" id="id_qwerty" required>
                  {% for qwerty in form.field_4 %}
                    {{ qwerty }}
                  {% endfor %}
                </select>
              </div>
              <div class="form-item form-item--textarea form-item--border">
                {{ form.field_5 }}
              </div>
              <div class="form-item form-item--textarea form-item--border">
                {{ form.field_6 }}
              </div>
          </fieldset>
          
          <div class="contact-form__navigation">
            <button type="button"
              class="primary-btn primary-btn--medium next">Next</button>
            <button id="btnsubmit" type="submit" class="primary-btn primary-btn">Submit</button>
          </div>
        </form>

This is my view, before I try to use sessions.

def viewname(request):
	if request.method == 'GET':
		form = NameForm()
	else:
    #something about recaptcha
    #...
    if result['success']:
		form = NameForm(request.POST)
		if form.is_valid():
       		# process the data in form.cleaned_data
       		#...
            #something about sending mail
            #...
            
            return HttpResponseRedirect('/thanks/')
    else:
		form = NameForm()
    return render(request, 'name.html', {'form': form})

I have in mind to use these, but I do not know how to apply them according to my own view and structure.

#...
initial = { 'field_name': request.session.get('field_name', None), 
...}

#...
request.session['field_name'] = form.cleaned_data['field_name']

#...             
field_name = request.session['field_name']

What kind of structure do I need to set up to be able to successfully send data in this kind of multi step form ?

Thanks in advance.

Take a look at the Form Wizard in django-formtools. Even if it’s not exactly what you’re looking for, it might give you some ideas on how to handle this.

Thank you for your interest.

I tried to use it before, but I couldn’t use it properly for my needs.
I had a hard time configuring it as it has a standard structure.

It is difficult to use WizardView and I could not manually render the form fields according to my form design.

Do you think it is necessary to use the form wizard to apply my form structure you see?
Isn’t there a simple solution using sessions as I think?

There’s no requirement to use that library directly, you can read the source for it to see how it handles the forms, and apply the principles in your own code.

1 Like

I know that is coming late but it might help someone with similar problem.

I remember running into same problem and I solved it by changing the submit button type to