Learn how to prototype web and mobile apps

How to design multi-submit forms in your interactive prototypes

Learn how to create multi-submit forms in your interactive prototypes with the help of this tutorial.

You can download the example below here.

Add multi-submit forms to your UI prototypes


1) In a new prototype, drag a rectangle, two Input text field widgets, 3 Text widgets and a Button and lay them out like in the first ‘form’ you see in the picture above.

2) Select the button and go to the Events tab. Click the ‘Add event’ button and set an ‘On Click‘ + ‘Set value’ event (1).

3) Select the Input text field on the right (Output) and then, in ‘value is‘, click on ‘Calculated’ (2).

4) Drag this Input text field to the expression builder and click ‘OK’ twice (3).

Multi-submit forms in your UI prototypes: events

5) Now, in the Events tab, click the ‘Add event’ button again. Select ‘Set value‘, select the Input field (Input), and click OK.

6) Select all the components and select the menu option Edit -> Group -> Group. Alternatively, you can right-click and select the Group option or use the keyboard shortcut Ctrl + G.

7) Select Edit -> Copy, and then select Edit-> Paste twice.

8) Lay out the three ‘forms’ as in the example.

Now you can click on ‘Simulate’ and enjoy!

Next tutorial > Display the current date and time in your interactive prototypes