How to create an input form with required fields and placeholders in your prototypes
In this tutorial, you will learn how to create and simulate an input form with required fields and placeholders in your interactive prototypes.
A constant is a name identifier for a simple value. In our example, we will use constants to ensure that the users input text in the required input fields.
You can download the below example here.
Creating the structure of your interactive input form
First of all, we’ll create a new web prototype and drag all the relevant components of the prototype to the canvas.
1. Drag a dynamic panel onto the canvas and resize it to match our example (443 x 306 px). Add a second panel by clicking on the ‘+’ option.
2. Drag six Input Text Field widgets into the center of Panel 1, and rename them in the Value box in the Properties tab as: First name, Surname, Address, Postal Code*, Email*, Phone number*
The Input fields that contain the ‘*’ character will require the user to input text in them in order to complete the form: they will be the required input fields. Additionally, note that the email field will require a ‘email@example.com’ style.
3. Now, drag a Text widget into the top left-hand corner of Panel 1, rename it ‘SIGN UP’ and restyle it to act as the header of the screen, e.g. bold and larger font.
4. Next, drag a Button widget to the bottom center of Panel 1 and rename it ‘Create account’.
5. In Panel 2, drag another Text widget, an Image widget and another Button widget. Restyle these widgets as in our example. This panel will serve as the screen that users will reach upon successfully filling in the form in Panel 1.
6. Finally, go to the Variables tab on the right of the Outline tab. Create three variables: ‘control-postalcode’, ‘control-email’, ‘control-phonenumber’.
These variables will ensure that the user fills in the required fields in order to complete the form successfully.
Adding events and constants to make your form interactive
We have now created a static input form. Now, we’ll add events to our form to make it interactive, and constants to identify which fields must be filled in to successfully create an account.
1. Select the ‘Create account’ button in Panel 1 and go to the Events tab. Add an ‘On Click’ + ‘Set Value’ event, selecting the ‘control-postalcode’ variable from the Variables tab. Below, type ‘OK’ into the text field and click OK.
2. On the left of the event you have just created, select the ‘add condition’ option. Build the following expression dragging functions and constants, and the relevant component from the Screens tab: REG EXP + ‘Postal Code*’ + POSTAL CODE’. Click OK.
3. Back to the canvas, in the events tab, right click on the event you initially created, and select the ‘Add event after selected’ option. Add an ‘On Click’ + ‘Change Style’ action, selecting the Postal Code Input Text field widget. Below, check the Border and Text boxes and click OK. This action will ensure that when the text is inputted into the Postal Code box, the style will remain as it is.
4. In the events tab, ensure that the link between the event and the action is set to ‘WITH previous’.
5. Finally, on the right of this action, select the ‘Else’ option and add another ‘On Click’ + ‘Change Style’ action, again selecting the Postal Code Input Text field widget and checking the Border and Text boxes below. This time, change the style of the border and the text to red. The red style will ensure that when text is not inputted into the Postal Code box, the user will be reminded to add some.
6. Repeat this step for the other required input fields (Email and Phone number). Remember to add the corresponding variable, the correct components in the expression builder, and the correct Input Text Field widgets accordingly.
7. Once you have events for all 3 required fields, add another event to the ‘Create Account’ button. Add an ‘On Click’ + ‘Set Active Panel’ event, selecting Panel 2 from the Outline tab. Click OK.
8. On the left of the event you have just created, select the ‘add condition’ option. Add the following expression with functions and click OK:
Almost there, keep at it! 🙂 The last thing we’ll do is to create a set of events that allow the user to go back and try the form again, with the fields reset.
1. Select the ‘Go Back’ button in Panel 2. Add an ‘On Click’ + ‘Set Active Panel’ event, selecting Panel 1 from the Outline tab. Click OK.
2. To reset the input fields, right click on the event you’ve just created, and select the ‘Add action after selected’ option. Add an ‘On Click’ + ‘Set Value’ event. Select the Postal Code Input Text field widget. Below, enter the default text of the Postal Code Input Text field widget (in our case. ‘Postal Code*’) into the input field and click OK.
3. Repeat this step for all the other input fields (First name, Surname, Address, Email and Phone number) accordingly. Ensure that the link between the event and the action is set to ‘WITH previous’.
And that’s it! Click ‘Simulate’ to interact with and enjoy your input form in your prototype!
Ensure that you delete the default text in each input field before inputting new text.
If you want to be able to tab between input fields, see this tutorial.
If you want to create an error message for when the use does not fill in the form correctly, see this tutorial.