Designing a multi-step form

With Justinmind, you can create and simulate a multi-step form using variables and screen flow validation.

Screen flow validation is essential when you’re creating an input form with multiple screens. In our example, we create a mobile input form with multiple screens, variables and events to take the user from screen to screen, filling in their details as they go. In the last screen, the user will see a summary of all the details they have filled in.

 

interactive-prototypes-screen-flow-validation

To design a multi-step form in your prototype, follow the steps below:

  1. Create a new iPhone X mobile app prototype. Add two additional screens in the Screens palette (right click ‘+’), so you have three screens in total.
  2. From the iPhone X Widget library, drag the Status bar dark/light widget to the top of Screen 1. 
    • Copy it to the other two screens.
  3. Back in Screen 1, add a Text box and a Button widget.
    • In the Text box, write a welcome message for the user and customize it as desired.
    • In the button, write the call-to-action (CTA) that you wish the user to perform with this input form.
    • Customize the rest of the screen as desired, e.g. add a background image or additional icons.
    • 2-interactive-prototypes-screen-flow-validation.png
  4. Go to Screen 2 and drag a Dynamic Panel to the canvas.
    • Resize it to match our example (327 x 393 pixels) in the Properties palette.
    • Add two additional panels to that there are three in total.
  5. From the iPhone X Widget library, drag the Arrow Right widget to Panel 1 and place it in the bottom right-hand corner.
    • This wiText box, place it in the center of the panel and write the instruction you wish the user to follow here.
    • Then, add another Text box and an Input Text Field to the canvas, placing them below the first Text box, and group them together (Right click “Group”).
    • This Text box refers to the question you wish the user to respond to and the input text field is where they will fill in their response.
    • Write the question you wish the user to fill in in the Text box.
    • Copy and paste this group according to the number of questions you wish to ask the user in this screen.
  6. Panels 2 and 3 are only needed if you wish to add additional questions.
    1. If so, from the iPhone X Widget library, drag the Arrow Left widget to Panel 2 and place it in the top left-hand corner.
      • This will be what the user taps on to go back in the form.
      • Next, copy the Arrow Right widget, first Text box and the group from Panel 1 to the same location in Panel 2. 
      • Again, copy and paste the group according to the number of questions you wish to ask the user in this screen.
      • Change the instructions and questions as desired.
  7. If you want to add more questions, copy all elements from Panel 2 to Panel 3.
    • Copy the Arrow Left and Right widgets, the Text box and the group from Panel 2 to the same location in this panel.
    • Again, copy and paste the group according to the number of questions you wish to ask the user in this screen.
    • Change the instructions and questions as desired.
    • 3-3-interactive-prototypes-screen-flow-validation.png
  8. Now go to Screen 3. 
    • Drag a Arrow Left widget to screen and place it in the top left-hand corner.
    • Add a Text box and write a form completion confirmation message for the user.
    • Add a Text box for each question asked in Screen 2 and write the corresponding text in each Text box (the text must match exactly to the questions).
    • For each question, add an additional Text box to the screen and place it under the initial Text box.
    • Change the settings of these additional Text boxes as follows: erase the “Type something here…” value, untick the autofit option and resize them to match our example (129 x 30 pixels).
    • 4-interactive-prototypes-screen-flow-validation.png
  9. Go to the Variables palette and add a variable for each question asked.
    • The Default value should be left blank.
    • 5-interactive-prototypes-screen-flow-validation.png
  10. Next. go to Screen 1.
    • Link the Button to Screen 2 by dragging it from the canvas to Screen 2 in the Screens palette.
  11. Go to Panel 1 in Screen 2.
    • Link the Arrow Right to Panel 2 by adding an “On Tap” + “Set Active Panel” event, selecting Panel 2 from the Outline palette and adding “Slide left” transition effect.
    • Click OK.
  12. Go to Panel 2 and link the Arrow Right to Panel 3 by adding an “On Tap” + “Set Active Panel” event, selecting Panel 3 from the Outline palette and adding “Slide left” transition effect.
    • Click “OK”.
    • Next, link the Arrow Left back to Panel 1 by adding an “On Tap” + “Set Active Panel” event, selecting Panel 1 from the Outline palette and adding “Slide right” transition effect.
    • Click “OK”.
  13. Go to Panel 3 and link the Arrow Left back to Panel 2 by adding an “On Tap” + “Set Active Panel” event, selecting Panel 2 from the Outline palette and adding “Slide right” transition effect.
    • Click OK.
    • Link the Arrow Right to Screen 3 by dragging it from the canvas to Screen 3 in the Screens palette.
  14. Finally, we are going to link the responses in Screen 2 to the summary version in Screen 3, by dragging dropping the variables.
    • Navigate to the Variables palette.
    • Go to Panel 1 in Screen 2 and select the Input Text Field from the first group you created.
    • Drag the Input Text Field to the variable that it corresponds to in the Variable palette.
    • Next, go to Screen 3.
    • Drag the same variable to the empty text box that it corresponds to in this screen.
    • 6-interactive-prototypes-screen-flow-validation-variables-workflow
  15. Repeat Step 5 for all the questions you created.

And that’s it! Click “Simulate” to see and interact with your prototype. You’ll see that your answers appear in the summary on the last page.

You can download our example here.