Sign-Up Form

This tutorial shows how to build a sign-up form through the stages of checking if the email and password inputs are filled out, validating the email format and checking the password length. You can either follow the entire tutorial or finish at whichever stage you want.

→ Download a ready .uxp file for this tutorial.

Setting Up the Design

1. Create a Form with a header, two inputs – one for the email and the other for the password – and a sign up button.
2. Then, use the Box to create a Confirmation Screen and group all its elements. Place it over the Form so that it covers it completely.
3. Hide it by clicking the eye icon in the Layers panel.

States for Email and Password Inputs

You will now create states for the email and password inputs – the State 1 (Base) and the Empty state.

1. Select the input, the text label and click Add State in the Top bar. State 1 (the Base) will be created automatically.
2. Create another state by typing in Empty and click Enter.
3. Add a text element inside the group for the Empty state.
4. Change all elements in the Empty state to a red color – this will inform about the error.
5. Repeat these steps for the password input.

Displaying Errors for Empty Inputs

Start by adding conditions for both the email and password inputs and the button.

1. Hold down Ctrl and select the email input.
2. Click the + icon on top of the Properties Panel to add an interaction.
3. In Trigger, select Focus Lost.
4. Add a Condition with the +.
5. In the first dropdown select Content of element. In the dropdown below, select your Email input. 
6. In the third dropdown, select is empty. 
7. Click Add condition.
8. In the Action section, choose Set state.
9. Under Element, choose your Email input and select Empty in the Set state dropdown.
10. In Animation settings, change the Easing to None.
11. Click Add.
12. Repeat these steps for the password input.

Clearing Error Messages on Focus

Now that you have created interactions that show errors for empty inputs, it’s time to add interactions that will make these error messages disappear on focus.

1. Select the email input and add a new interaction.
2. In the Trigger dropdown choose Focus.
3. In the Action section, choose Set state.
4. Under Element select your Email input group and in Set state choose State 1 - Base.
5. In Animation settings, change the Easing to None.
6. Click Add.
7. Add the same interaction for the password input.

Adding Interactions on the Button

Interactions added on the sign-up button will check if the inputs are filled out and, if yes, the Confirmation Screen will be displayed.

1. Select the button and add an interaction with the + in the Properties panel.
2. Add a new Condition.
3. Set the first dropdown to Content of Element and choose your Email input below.
4. Set the last dropdown to is not empty.
5. Click Add condition.
6. Add the same condition for the Password input.
7. Then, in the Action section choose Show.
8. In Element select your Confirmation screen.
9. Under Animation, choose Fade and click Add.

1. Add another interaction for the button.
2. Create a condition and choose Content of element in the first dropdown.
3. In the Select element dropdown choose Email input, and is empty below.
4. In the Action section, select Set state.
5. In the Element section choose Email input.
6. In the Set state section choose Empty.
7. In Animation settings, change the Easing to None.
8. Click Add.
9. Add the same type of interaction for the Password input and save it.

You've just completed the first part of the tutorial. You can either proceed or finish at this point. The video below shows your design at this stage.

Email and Password Validation

You will now add interactions that validate the email format and display it on the Confirmation Screen, and one that checks the password length. Edit the content on the Confirmation Screen by changing the Header and adding body copy, and a separate text element for the email address.

Create an Incorrect state for Email input

1. Select the Email input and open the State dropdown.
2. Click New State
3. In the Set name field type in Incorrect
4. Press Enter.
5. Adjust the copy and style of the text inside that state.

Validating the Email format

You will now add an interaction that will inform about an incorrect email.

1. Select the Email input and switch to State 1 (Base).
2. Add a new interaction.
3. In Trigger, choose Focus Lost.
4. Add a Condition and choose Content of element in the first dropdown.
5. In the Select element dropdown choose your Email input.
6. In the last dropdown choose doesn’t match regex.
7. In the dropdown below it, select Email.
8. Click Add condition.

1. Add another condition for the Email input, choosing is not empty in the third dropdown.
2. In the Action section choose Set State.
3. Under Element choose your Email input.
4. In Set state select the Incorrect state.
5. In Animation settings, change the Easing to None and click Add.

Displaying the Email on the Confirmation screen

1. Select the Button and add a new interaction.
2. In the Action section click More and then choose Set content.
3. Under Element choose the separate text element from the Confirmation Screen.
4. In Set content, choose Content of element and then select the Email input.
5. Click Add.
6. Preview your prototype.

Create Incorrect State for the Password

1. Select the Password input and open the State dropdown.
2. Click New State
3. In the Set name field type in Incorrect
4. Press Enter.
5. Adjust the copy and style of the text inside that state.

Verifying the Password Length

1. Select the Password input with Ctrl and add a new interaction.
2. In Trigger choose Focus Lost.
3. Add a new Condition.
4. In the first dropdown choose Content of element.
5. In the second choose Password input 
6. In the third dropdown choose doesn't match regex.
7. Below, set the dropdown to Custom. In the Set pattern input type .{8,}.
8. Click Add condition.

9. Add another condition for the Password input choosing is not empty in the last dropdown and add it.

10. In the Action section choose Set state

11. In Element choose Password input.

12. In Set state choose the Incorrect state.

13. Change Easing in the Animation Settings to None.

14. Click Add.

Setting Interactions for a Correct Password Length

1. Select the sign-up button and add another condition for the existing interaction.
2. Set the first dropdown to Content of element.
3. Then, choose your Password input as the element.
4. In the dropdown below choose matches regex.
5. Then, in the Set pattern input type .{8,}
6. Click Add condition, then Save.

You can now preview the final design as below.