The formAnimation plug-in is a lightweight plug-in based on jQuery that can be used for showing cool animations for web forms upon invalid submission.
You may use this plug-in for simple HTML forms or based on other frameworks like Bootstrap forms as well.
Let me show this by way of demos and you can also see how to set up this plugin in your web project.
A demo of bounce animation upon invalid submission
In this example, a form is created by using the Bootstrap framework classes.
Only a few fields are used for demonstration purposes.
As you click the “Create Account” button, without filling in any form field, the form will animate with a bounce style.
See the demo and code below:
The code:
<!DOCTYPE> <head> <link href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' media='all' rel='stylesheet'> <link href='https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' media='all' rel='stylesheet'> <link href='css/animate.css' media='all' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Raleway:300,500' rel='stylesheet' type='text/css'> <link href='css/form-valid-style.css' media='all' rel='stylesheet'> </head> <body> <div class='form-header'> <h3>A demo of form animation</h3> </div> <form class='form animate-form' id='form1'> <div class='form-group has-feedback'> <label class='control-label sr-only' for='username'>Enter User name</label> <div class='input-group-addon'> <div class='glyphicon glyphicon-user'></div> </div> <input class='form-control' id='username' name='username' placeholder='Username here' type='text'> <span class='glyphicon glyphicon-ok form-control-feedback'></span> </div> <div class='form-group has-feedback'> <label class='control-label sr-only' for='email'>Email:</label> <div class='input-group-addon'> <div class='glyphicon glyphicon-envelope'></div> </div> <input class='form-control' id='email' name='email' placeholder='Enter Email address' type='text'><span class='glyphicon glyphicon-ok form-control-feedback'></span> </div> <div class='form-group has-feedback'> <label class='control-label sr-only' for='password'>Password</label> <div class='input-group-addon'> <div class='glyphicon glyphicon-lock'></div> </div> <input class='form-control' id='password' name='password' placeholder='Password (must be 8 character)' type='password'><span class='glyphicon glyphicon-ok form-control-feedback'></span> </div> <div class='form-group submit'> <input class='btn btn-danger' type='submit' value='Create Account'> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src='js/formvanimation/jquery.validate.min.js'></script> <script src='js/formvanimation/formAnimation.js'></script> <script src='js/formvanimation/bounce.js'></script> <script> $("#form1").formAnimation({ animatedClass: 'bounce' }); </script> </body> </html>
Let us break the code:
This is how form animation is done:
As such, this form is based on Bootstrap’s classes, you have to include Bootstrap’s CSS file in the <head> section.
The form uses animate.css animations, so its CSS file is also included in the <head> section:
The plug-in’s CSS file is also included in the <head> section:
In the markup section, the form code with various classes is given.
Above the </body> tag, the library of jQuery and JS file of plug-in are included as follows:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
<script src=’js/formvanimation/jquery.validate.min.js’></script>
<script src=’js/formvanimation/formAnimation.js’></script>
<script src=’js/formvanimation/bounce.js’></script>
Finally, you may specify different animation style by calling the form in the <script> section, for example:
<script> $("#form1").formAnimation({ animatedClass: 'bounce' }); </script>
To download the plug-in, go to GitHub website here.
A simple form example
Just for demonstration, I am using a basic form without any CSS classes to show the plug-in works the same way as using Bootstrap or custom CSS.
The same set of fields is created without any style and the animation style is bounceIn. See the demo online by clicking the links below:
The following form code is used:
<form id='form1'> <div > <label for='username'>Enter User name</label> <input id='username' name='username' placeholder='Username here' type='text'> </div> <div > <label for='email'>Email:</label> <input id='email' name='email' placeholder='Enter Email address' type='text' </div> <div> <label for='password'>Password</label> <input id='password' name='password' placeholder='Password (must be 8 character)' type='password' </div> <div > <input type='submit' value='Create Account'> </div> </form>
While this is the script with animation effect:
<script> $("#form1").formAnimation({ animatedClass: 'bounceIn' }); </script>
This is the full code that you may copy/paste:
<!DOCTYPE> <head> <link href='https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' media='all' rel='stylesheet'> <link href='css/animate.css' media='all' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Raleway:300,500' rel='stylesheet' type='text/css'> <link href='css/form-valid-style.css' media='all' rel='stylesheet'> </head> <body> <form id='form1'> <div > <label for='username'>Enter User name</label> <input id='username' name='username' placeholder='Username here' type='text'> </div> <div > <label for='email'>Email:</label> <input id='email' name='email' placeholder='Enter Email address' type='text'> </div> <div> <label for='password'>Password</label> <input id='password' name='password' placeholder='Password (must be 8 character)' type='password'> </div> <div > <input type='submit' value='Create Account'> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src='js/formvanimation/jquery.validate.min.js'></script> <script src='js/formvanimation/formAnimation.js'></script> <script src='js/formvanimation/bounce.js'></script> <script> $("#form1").formAnimation({ animatedClass: 'bounceIn' }); </script> </body> </html>
An example of form with wobble animation
Using the same demo form as in the first example, this time with a wobble animation effect if the form is submitted without entering the values.
The following value is used in the <script>:
<script> $("#form1").formAnimation({ animatedClass: 'wobble' }); </script>
A demo of rubberBand animation with custom CSS
In this example, the text fields are also given a custom CSS class which is placed in the <style> section under the <head> tag.
The animation value used in the script is rubberBand. See the output by clicking the “Create Account” button without filling out the form:
Complete code:
<!DOCTYPE> <head> <link href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' media='all' rel='stylesheet'> <link href='https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' media='all' rel='stylesheet'> <link href='css/animate.css' media='all' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Raleway:300,500' rel='stylesheet' type='text/css'> <link href='css/form-valid-style.css' media='all' rel='stylesheet'> <style> .formcls { padding: 9px; border: solid 1px #F0AD4E; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #F7D19F), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #F7D19F 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; } </style> </head> <body> <div class='form-header'> <h3>A demo of form animation</h3> </div> <form class='form animate-form' id='form1'> <div class='form-group has-feedback'> <label class='control-label sr-only' for='username'>Enter User name</label> <div class='input-group-addon'> <div class='glyphicon glyphicon-user'></div> </div> <input class='form-control formcls' id='username' name='username' placeholder='Username here' type='text'> <span class='glyphicon glyphicon-ok form-control-feedback'></span> </div> <div class='form-group has-feedback'> <label class='control-label sr-only' for='email'>Email:</label> <div class='input-group-addon'> <div class='glyphicon glyphicon-envelope'></div> </div> <input class='form-control formcls' id='email' name='email' placeholder='Enter Email address' type='text'><span class='glyphicon glyphicon-ok form-control-feedback'></span> </div> <div class='form-group has-feedback'> <label class='control-label sr-only' for='password'>Password</label> <div class='input-group-addon'> <div class='glyphicon glyphicon-lock'></div> </div> <input class='form-control formcls' id='password' name='password' placeholder='Password (must be 8 character)' type='password'><span class='glyphicon glyphicon-ok form-control-feedback'></span> </div> <div class='form-group submit'> <input class='btn btn-danger' type='submit' value='Create Account'> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src='js/formvanimation/jquery.validate.min.js'></script> <script src='js/formvanimation/formAnimation.js'></script> <script src='js/formvanimation/bounce.js'></script> <script> $("#form1").formAnimation({ animatedClass: 'rubberBand' }); </script> </body> </html>
You can see the complete list of animations here.