A lot of Software Developers and Designers these days are obsessed with improving the page load time of the website, finding the best possible fonts, colours and typography, in order to improve the UX of the website/app. But what a lot of people forget is the point where the real contact happens between the user and the wesbite/app: The Contact Forms.
New HTML 5 specs have a lot of cool features, including helping in validation of forms without the need of server-side requirements or scripting. By default inputs type like email or telephone numbers use a pattern that checks that the information filled is correct or not, and forms can be submitted when the user clicks on the submit bottom.
Here, I used a lot of patterns and validation controls in order to help the user to fill the forms, which can be found below:
1) required: This HTML attribute can be used with input and textarea. It indicates that the field should be filled out before the form is submitted. It is very useful to let user know that we need that information, for example the email or the phone number.
2) pattern: Another HTML attribute to check the information added by users. In that case we can build our own pattern or use one of the patterns by default. It depends on the type attribute. For example, if we use the email type, it will looking for an email string (with @ in the middle and a valid domain extension such as .com, .org or whatever.) However, the power of this attribute is that we can create our own pattern, excluding numbers for instance or any character we want to avoid. The pattern attribute requires a regular expression in order to work properly.
3) placeholder: The most useful attribute in this collection for UX. It helps user to understand what kind of info we are looking for. It can also display an example data that will disappear when the user starts filling out the input (typing a character) and not when the input is :focus.
4) ::placeholder Pseudo-element related with above attribute. It helps us style the placeholder, so we can change the text colour or other font properties to let users know that this is an example and not a real text.
5) :focus A basic pseudo-class that runs when the user is focusing an input or textarea. It is necessary that the user click on it or navigate with the keyboard to considerate the input as focused.
6) :valid This pseudo-selector will let us know if the string added in the input is correct and check with the pattern we have set. So basically we can style the input if the info is correct.
7) :invalid The opposite of valid. The question here is: What happens when no value is added to the input? Will it be :valid or :invalid? Well, the answers in that case depends on the required attribute. If it exists for that input and no value has been added, then is an :invalid element. Otherwise it will be :valid.
8) :placeholder-shown A new feature which is still in the draft of CSS level 4 specification, but the compatibility with browsers is quite reliable at this moment (except on IE and Edge).
This is a pseudo-class that runs only when placeholder is being shown. It means that it will be enabled when the input is not focused and when it is focused but the user has not typed any character yet.
There are a lot of possibilities here. Now, we can know if users get stuck in one of the inputs. For example, if an user has clicked on an input but doesn’t know what to write, we can show a notice after 5 seconds that helps the user complete it, and all of this only with CSS!
Another possibility: the user is filling the input, but 30 second has passed and the input is still invalid. Maybe the user has not understand what pattern we are looking for.
The form with CSS validation that I made can be seen below:
See the Pen Better Forms. by Adarsh Khubchandani (@askhubchandani) on CodePen.