In this tutorial, I’m going to tell you how to create new gmail style login page with css and jquery.

Everybody knows that Gmail is updating their product’s user interface frequently to give better experience. Why should we update gmail style login form in our web apps? Google already done with research and they exactly know how to impresss the audience. So please dont reinvent the wheel again.

New Gmail Account Login Page with Registration and forgot password option can be done using few lines of css and jQuery code.

So many years before I had published gmail style login form with pure css, But this design is very clear and its clone of current gmail login page.

Gmail Style HTML Login Form Features

Gmail Style Login Page

Simple gmail login form design comes with powerful options where user have to enter password or enter OTP option. They can easily switch over by clicking Enter OTP link.

Gmail Style Registration Page

Simple Gmail Style Registration Form with First Name, Last Name, Username, Password and Retype Password fields. Users can able to switch to login page by clicking “I have an account” link

Login Page with OTP Option

This form contains Login fields with OTP option, Users can choose If they want to authenticate their credentials via OTP method.

Check out my other posts related to login and registration page designs

• Free Bootstrap Modal Form Download with Validation
• Bootstrap vs Google Material Design Lite – Which one is Better?

Credit – https://github.com/pandiarajankv/google-login-replicate