eyeri91 / kimchi-sign-up-form

User-friendly validation form that delivers a positive sign up experience.

Kimchi-Sign-Up-Form

# Sign up to get latest news of MKBY !

Kimchi sign up form is a form for the imaginary web site called "My kimchi is better than yours" where users can subscribe their newsletter to get various kinds of Kimchi and Korean food recipes.

Learning outcomes.

1. Create a user-friendly validation form that keeps client experience positive.
2. How to use the basic built-in HTML validations
3. How to build custom validations
4. Understand why having well-designed froms are vital for both frontend and backend systems.
5. Design a responsive form that is for from mobile to desktop screens.

What I mainly focused.

As a consumer myself, It hasn’t always been a pleasant experience when signing in to some websites. Having red colored error messages hurriedly appearing on the screen can be very overwhelming. Therefore, this project was designed sorely in a customer-oriented perspective, delivering the most positive user experience possible. A sign up form should contribute keeping future customers, not losing them. To acheive this, there are some points that I followed.

1. Do not show any invalid message until user leaves to the next input field.

Any alert messages appeared hastly only give stress to users. In that sense, I tried to display any negative feedback at last.

2. Use the least techincal terms in error messages.

As most of users are not tech-oriented, it is important to let them know what went wrong in a easy and simple manner.

3. Show password rules right away.

It became such a hassle to create a long and complicated but also valid passwords for web sites these days. It is important to show the guildline and help them to meet requirements.

4. Help them by providing templates.

For example, some input fields can have placeholder filled with valid form of data so that users can have an idea of how to complete each section.

About

This form checks:

• the length of first name and last name of a user.
• the validity of an email address including the length of a top-level domain.
• a phone number of a user in a form either with or without '-' between numbers.
• a password that must include one of each upper case letter, lower case letter, number and special charactors.
• a password confirmation to check if a user typed password correctly.