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.
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.
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.
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.
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!