Prototyping Forms and Inputs
With Justinmind, you can create interactive forms in your prototypes to simulate user input experiences, such as registration, login, and search forms.
To create a form in Justinmind, you’ll need to use widgets. Look to the ‘Forms and Inputs’ section of the Basic widget library in your Widgets palette. Here, you’ll find widgets commonly used in forms, including: Input Text Fields, Checkboxes and Radio Buttons, Select Lists, and more.
Just drag a widget onto the Canvas to start creating your form.
All form and input widgets are automatically interactive during simulation – no Events needed. Just click “Simulate” and you’ll be able to interact with them.
Depending on which device you’re using in your prototype, the appearance and functionality of these widgets will differ. For example, in iPhone device prototypes, focusing in on an Input Text Field during simulation will automatically show an interactive device keyboard.
You can add additional widgets with an input style into your prototype by adding other widget libraries.
Once you’ve designed your form, you can start to add Events to create sophisticated interactions. We’ve created a few example exercises to give you an idea of a few ways to do so. Check them out below.
In this exercise, you’ll learn how to autofill two Input Text Fields after hitting the tab key in the first Input Text Field.
Follow these steps to complete the exercise:
- Create a new prototype and create a form using Text widgets and Input Text Fields.
- Select the first Input Text Field of the form, and look to the Events palette.
- Click “Add Event” and select the “On Key Up” trigger. In the ‘Any Key’ field that appears, hit the desired keyboard key trigger. In our example, we’re using the TAB key.
- Select a “Set Value” action. For the target of the action, select the second Input Text Field. For the value set by the action, type in a value. In our example, we type “Car engine”. Click “OK” to finish building the event.
- Look back to the Events palette, click on the gear icon next to the word ‘Do’ and select ‘Add action’. Create another “On Key Up” + “Set Value” action and select the third Input Text Field as the target, and enter something as the value set by the action.
- Looking again to the Events palette, click “Add Event”. Leave the trigger as “On Key Up” and change the resulting action to “Set Focus On” and select the second Input Text Field as the target to be focused on.
Here’s how all your events should look:
That’s it! Click “Simulate” and enter some text in the first Input Text Field. Then, hit the TAB key and you’ll focus on the second Input Text Field and see the values autofilled.
With Justinmind, you can create and simulate a multi-step form using variables and screen flow validation. In this example, you’ll learn how to create a mobile input form with multiple screens. In the last screen, the user will see a summary of all the details they have filled in.
To design a multi-step form in your prototype, follow the steps below:
Designing the screens
- Create a new prototype with three screens.
- On the first screen, drag a Button widget to the Canvas and customize the screen as you’d like.
- Go to Screen 2 and drag a Dynamic Panel to the canvas. Click the ‘+’ icon on the panel to add two additional subpanels, so there are three in total.
- Drag two Input Text Fields and a Button widget into the first panel.
- Copy one Input Text Field and the Button widget from Panel 1 into Panel 2 and Panel 3. Change the instructions and questions as desired.
- Go to Screen 3 and add a Text widget for each Input Text Field question in the form.
- Go to the Variables palette and add a variable for each question asked in the form, leaving their default values blank.
Adding the Events
- Go to Screen 1 and create an “On Tap” + “Link To” event, and link to Screen 2.
Note: In mobile prototypes, “On Click” changes to “On Tap” but they serve the same function
- Go to Panel 1 in Screen 2, select the Button in Panel 1, and create an “On Tap” + “Set Active Panel” event, selecting Panel 2 as the Panel to be set as active.
- Go to Panel 2, select the Button in Panel 2, and create an “On Tap” + “Set Active Panel” event, selecting Panel 3 from the Outline palette as the Panel to be set as active.
- Go to Panel 3, select the Button, and create an “On Tap” + “Link To” event, and link to Screen 3.
- Navigate to Screen 2 and to Panel 1 and select the first Input Text Field. Drag the Input Text Field to the corresponding variable in the Variables palette. This will create an “On Page Unload” + “Set Value” event, which will set the value of the variable to the details entered in the Input Text Field during simulation.
- Repeat Step 5, dragging the second Input Text Field to its variable in the Variables palette.
- Navigate to Panel 2 and drag the Input Text Field to its corresponding variable.
- Repeat Step 7 for Panel 3, dragging its Input Text field to its variable.
- Go to Screen 3 and look to the Variables palette. Select a variable and drag it to the corresponding text element on the Screen. This will create an “On Page Load” + “Set Value” event, and will set the value of the Text element to the variable’s value.
- Repeat Step 9 until each Text element has been assigned its corresponding variable.
Next, we’ll create events to transfer the details the user enters in the Input Text Fields in the form on Screen 2 to the confirmation screen (Screen 3).
And that’s it! Click “Simulate” 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.
In this example, we’ll learn how to use conditions to validate an input form so all required fields are filled accurately.
Follow these steps to learn how:
Designing the form
- Create a prototype and drag a Dynamic Panel onto the Canvas.
- Click the ‘+’ icon on the Dynamic Panel, so there are now two sub panels.
- Click back to Panel 1 and drag six Input Text Field widgets into Panel 1, and in the Properties palette, give each respectively a placeholder value of First name, Surname, Address, Postal Code*, Email*, and Phone number*.
The Input fields that contain the ‘*’ character will require the user to input text in them in order to complete the form. Additionally, note that the email field will require a “xxx@xxx” format.
- Drag a Button widget to the bottom of Panel 1.
- Go to Panel 2 and create a “Success” message to inform the user that they have successfully entered their details.
Adding the Events
We’ve created a static input form. Now, we’ll add events using conditions to make our form interactive and identify which fields must be filled in to successfully create an account.
- Select the Button in Panel 1 and go to the Events palette. Add an “On Click” + “Change Style” action, selecting the “Postal Code*” Input Text Field. Select the border and text color options from the dropdown, and set them to the current color of the Input Text Field. Then, click “OK” to exit the dialog. This will change the appearance of the Input Text Field to be its default color when the user has entered the correct information.
- Look back to the Events palette and click the “add condition” text above the event you just created. In the Conditional Expression builder, follow these steps to create the condition:
1. Drag the Regular Expression text function to the first space in the expression.
2. In the space that appears, drag the postal code Input Text Field from the dialog Canvas or from the dialog outline.
3. In the second space, drag the Postal Code constant. Click “OK” to finish building the condition.
- Look to the Events you just created, and click “Else” text. Add another “On Click” + “Change Style” action, again selecting the “Postal Code*” Input Text Field and select the Border color and Text color options from the dropdown. This time, change the style of the border and the text to red. The red style will indicate to users that the Postal Code Input Text Field has not been filled correctly.
- Repeat Steps 1-3 for the other required input fields (Email and Phone number). Remember to change the components in the Expression builder and the Input Text Fields accordingly.
- Once you have events for all 3 required fields, add one more event to the Button. Create an “On Click” + “Set Active Panel” event, selecting Panel 2 from the Outline palette to be set as active.
- Click on the “add condition” text for this event. Add the following expression:
Note: the condition must exactly match this image in order for the event to trigger correctly
- Select the “Go Back” button in Panel 2 and create an “On Click” + “Set Value” event. Select each of the Input Text Fields, and set their values to blank.
- Add an “On Click” + “Set Active Panel” event, selecting Panel 1 from the Outline palette as the Panel to be set as active.
This is how your events should look so far:
The last thing we’ll do is create a set of events that allow the user to go back and complete the form again, with the fields reset.
And that’s it! Click “Simulate” to interact with and enjoy your input form in your prototype.
You can download our example here.