Single Field Email Registration Form with Validation

Image: Single Field Email Registration Form with Validation GIF

Here is a simple email registration form designed by Derek Torsani on Dribbble and converted to code by Elior Tabeka. There is a single text filed and on activating it by clicking on it the inactive OK button appears and on successful validation of the input as an email address, the OK buttons become active. Now when you click on it the button expands and takes over the text field to display the success message.

If you are having trouble with the pen, try the archived copy on GitHub

Single Field Email Registration Form Snippet

See the Pen Email Input Validation behavior – JS and SCSS by Elior Tabeka (@eliortabeka) on CodePen.0