Edward Backhouse is a System Administrator at GurukulOnCloud. Edward received the following requirement from his manager – create a registration form which looks like the following screenshot: 

A solution for the above business requirement

There are a few possible solutions for the above business scenario – for example, one can use 100% Lightning Components. We, however, will use both – Flow and Lightning Component – to solve the above business requirement. Before going ahead, let us first consider the pre-requisites for this solution:

• You must use MyDomain
• Make sure to enable Lightning runtime for flows
• Last but not the least, make sure you are using Lightning Experience

1. First of all, create a progress bar Lightning Component as shown in this article. If you don’t know how to create a lightning component then please review this Trailhead module Quick Start: Lightning Components
2. Navigate to Setup (Gear Icon) | Setup | Process Automation | Flows.
3. Click on the New Flow button and select the Screen Flow option, then click on Create it will open the Flow Designer for you.
4. Now, create Stages for the flow, as mentioned below: 
   • Enter Your Name
   • Enter Email Address
     
5. Next, we will use the Screen element to create a registration form. Drag and drop a Screen element onto the canvas. And then follow the steps below:
   1. On the Screen element, navigate to the Custom section and double-click on the FlowProgressBar (A component which you created in step 1 (beginning of the solution) field, to add it to the Screen element, as shown in the following screenshot:
   2. On the Screen preview pane, click on the FlowProgressBar field to configure its settings, as shown in the preceding screenshot.
      
   3. Now add two text fields to it to store First Name and Last Name onto Screen element. 
   4. In the end, Screen -1 will look like the following screenshot:
6. The next step is to update the current stage from Enter Your Name to Enter Email Address. For this, we will use an Assignment element. Drag and drop an Assignment Element (Give the name Move to Step 2) onto the canvas and map the fields according to the following screenshot:
7. Add one more screen element to your flow so that people can enter their email address. Drag and drop a Screen element onto the canvas, then follow the steps below:
   1. On the Screen element, navigate to the Custom section and double-click on the FlowProgressBar field, to add it on to the Screen element.
   2. On the Screen preview pane, click on the FlowProgressBar field to configure its settings, as shown in the following screenshot.
   3. Now add one more field Email to it to store Email Address onto Screen element, as shown in the following screenshot:
8. Use connectors to connect the elements used in the Flow. Finally, your Flow will look like the following screenshot:
9. Once done, Save the flow and name it Registration Form, with Type: Screen Flow. Do not forget to activate the Flow by clicking on the Activate button.