How to create a multi step custom form in Drupal 8 & 9

Here we are going create custom form with three steps, each steps having form fields and at the final step we are capturing this field values and displaying it in same page.

So the final page will look like as below.


Here dn_subscribe is our custom module.

Create custom path in rout in dn_subscribe.routing.yml  as below.

So in the below steps we are going to create a single page Ajax form which has multiple steps.

Create below SubscribeForm.php


Include below classes and interfaces

Before starting, our SubscribeForm.php will be as below.

So here we are going to create form elements functions in this file.

Here  submitForm function will be the final submit handler where we are capturing form fields values of all steps.

In all steps we are attaching style.css using below line.

We have dn_subscribe.libraries.yml with below content.

Style.css file placed in below path.


Before starting to build form we are creating below function.

Step – 1   First form

As a first step we are creating fields in buildForm function for first form, here we are creating below First name and Last name fields.

So here we are adding below line for setting page number variable.

$form_state->set(‘page_num’, 1);

Add below action for submit button and handlers for first form.

Here subscribeFirstNextSubmit’ function will be called when click on Next button, addition to this you can add validations in #validate handler.

In this buildForm function we are adding below if conditions for loading other steps forms based page number value.

Here  subscribePageTwo function will load the second form and the subscribePageThree function will load the third page. We will create this functions in next steps.

Also add below line , which will load steps at the top of the form.

$form[‘#prefix’] = $this->getFormPrefix(1);

Here we are passing 1 to switch condition  in  getFormPrefix function, So this will return the first step as an active step in returned ul element.

So finally we have buildForm function as  below.

Step 2 – First Form submission and loading second form

So here we are creating a submit handler for first form, as mentioned in action submit handler, create subscribeFirstNextSubmit function as below. 

So here we are setting first form values in page_values variable and also updating page_num as 2,

So when set rebuild , rebuildFunction will again execute and load second form 2.

So in build function,  check condition for page_num== 2 , below function will load second form elements ,

See below submit handler of second form.

Here we are first retrieving first form elements from page_values and then setting values again in page_values, so we can transfer first and second form values to third form.

Above setRebuild with page_num=3 , loads the third form.

Step 3 Third form

Below provided the third form function subscribePageThree.

So here we are not providing a separate submit handler. Hence the third form submission directs the submit to the below submitForm function.

Here we are displaying all three form values and displays in message.

Also we are providing below back button handlers.

Complete source code you can download here.



Get Free E-book
Get a free Ebook on Drupal 8 -theme tutorial
I agree to have my personal information transfered to MailChimp ( more information )
if you like this article Buy me a Coffee this will be an ispiration for me to write articles like this.

You may also like...