Designing a mobile survey

With Justinmind, you can create forms that reset automatically by using Dynamic Panels. This could be used to create a mobile survey for instance.

Create forms with dynamic panels in your UI prototypes

To create a form that resets automatically in your prototype, follow the steps below:

  1. In a new web prototype, drag a Dynamic Panel to the canvas and create three additional panels (click the ‘+’ at the top of the Dynamic Panel). Each will be a page in your form page.
    • Double click on Panel 1 to edit its contents.
    • Drag Text widgets, Input Text Fields, Images and Buttons to the panel, as you can see in the example below.
    • Repeat step two for the additional panels to create your form’s content
    • interactive-prototype-dynamic-forms
  2. Once you have create your form’s content. It’s time to add some events. Go to the Events palette and add an “On click” + “Set Active Panel” event to the Button in Panel 1 and select Panel 2 as the active one.
    • Add a slide effect to make your prototype as preferred.
    • create-forms-in-interactive-prototypes
  3. Do the same with the Buttons in the remaining panels. You can copy and paste events to the remaining Buttons, however remember to update the active panel each time.
  4. Now we want to make sure that the form resets automatically. In the Events palette, add an “On Panel Active” + “Set Value” event to all the Input Text Fields, where the value will be left as empty.
    • Let’s start with Panel 1. Select Panel 1 and add an “On Panel Active” + “Set Value” event to the first Input Text Field under “First name”.
    • The value will be “fixed” and left blank.
    • Click “OK” and go back to the canvas.
    • forms-in-interactive-prototypes
  5. In the Events palette, right-click on the event you’ve just created and select “Copy action” and then “Paste after selected action”. The event will be copied but you need to double click on it and open the events dialog to change the component that will show the value to the second input field, under “Last name”.
    • Once back again in the Events palette, make sure to make the two events happen at the same time, selecting the arrow icon between them and changing it to “WITH previous”.
    • Then, copy the event you have just created, by clicking on the “Copy” icon in the top left-hand corner of the events tab (next to the ‘+’ icon).
  6. Now select Panel 2 and in the Events palette, paste the event, making sure to change the element that will show the value.
    • In the case of Radio Buttons, make sure to select “Not checked” as a value in the Events dialog.
    • interactive-prototype-dynamic-forms-events
  7. Finally, select Panel 3 and paste the event as needed.

And that’s it. Click “Simulate” and enjoy!

You can download our example here.