Learn how to prototype web and mobile apps

How to design dynamic forms in your interactive wireframes

Design dynamic forms in your interactive wireframes with the help of this tutorial.

You can download the example below here.


Interactive wireframes: add dynamic forms

Entry forms can get very complex with too many fields to fill in. To keep things clear, you can organize them so that the user is not overwhelmed with information.

One way is to hide optional information that the users don’t have to fill out but that they must be able to see and edit, if needed.

Let’s see how we can display content dynamically in web and mobile wireframes with Justinmind.

1) Create a new iPhone mobile app prototype and drag some text and input fields to the canvas to simulate the lay out of an input form.

2) Drag a Dynamic Panel widget to the canvas and create an additional panel.

Interactive wireframes: design dynamic forms with pre-built widgets

3) Go to the first one and right click to edit its content. Add a Text widget that says “Show more options”.

4) Go to the second panel, right click and select “Edit content”. Add a Text widget with the words “Hide options”. Add more Text widgets and input fields above the “Hide options” Text widget, like in the example below.

Interactive wireframes: add dynamic forms

5) Go back to the first panel and select the label “Show more options”, go to the Events tab and click on the ‘Add event’ button. Then select ‘Set active panel‘ and select panel_2 in the outline tab. Click OK.

Interactive wireframes: dynamic forms events

6) Go to the second panel now, and select the label “Hide options”. Create an event like the one you just created for the other Text widget (On click + Set active panel), but this time select panel_1 as the active panel.

  • Now click on the Simulate button to test the interaction!

Next tutorial > Display Dynamic Content in your interactive wireframes


  1. Ben

    July 30, 2015 at 12:18 pm

    In the example at the beginning, how do you get the second container (company address) to move down when the first container (primary address) expands open?

    • Danielle Schneider

      July 30, 2015 at 11:14 pm

      Hi Ben,

      This is through the use of an effect when setting the active panel.

  2. Josie

    October 6, 2015 at 7:54 am

    Hi, how can I do it using a checkbox instead of adding a text widget?

    • Danielle Schneider

      October 6, 2015 at 6:27 pm

      Just add a check box widget instead. It should work exactly the same – just add a condition that states ‘When checkbox [is checked]’ with the output that sets the certain active panel.