Collection of free jQuery form examples: email check, password check, password input, login, sign up and subscribe forms. Update of October 2020 collection. 12 new items.
Related Articles
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Spoopy Signup
Sigup form in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: splitting.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Multistep Form
Multistep form with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.easing.js
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
UI Design: Send A Postcard Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: simple-line-icons.css
Links
Made with
- HTML (Slim) / CSS (Sass) / JS
About a code
Anthropologie Email Sign Up Form
A fun quick email and phone signup jQuery form based on Anthropologie.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.easing.js
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
NESubscribe
Subscribe form with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: splitting.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Subscribercoaster
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: splitting.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Dynamic Focus
The focus takes width, height and border-radius into account.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Form Wizard with Validation
This is form wizard with validation. It makes through HTML, CSS and jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css
Links
Made with
- HTML / CSS / JS
About a code
Login Form With Confirmation
Login form with confirmation in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Interactive Newslatter Form
Notify me - interactive newslatter form in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Subscribe Form
Animated subscribe form in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, splitting.js
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Pinball Wizard Effect For Form
Signup form concept with Splitting.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, splitting.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Password Check
Password check in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Email Check Animation
Exploration for invalid email.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Password Error Animation
Drawing the close button icon for password error UI using CSS animations and jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css, jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Simle Animated Form
Animated form with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
Password Input Field
Password input field with micro-interactions to show and hide the password.
Compatible browsers: Chrome, Opera, Safari
Responsive: no
Dependencies: font-awesome.css, jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Password Error Animation #2
Password input animation error in jQuery.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Sign Up Form With Progressive Disclosure
This signup form shows progressive disclosure and micro-interaction. Progressive disclosure means showing information or action when a user actually needs it. This same concept can also be applied to login forms.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css, jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Password Error Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Login UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Email Validation Animation
Simple animation if the email is valid.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Code Input Field
Small jQuery example.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Transforming Select Fields
Just a little form to showcase how you can use DL, DT & DD to spice up your select boxes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Sign Up Form
Sign up & Sign in form for a flower company app animated with jQuery. Design inspiration by lavender flowers with pastel colors.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Password Visibility Toggle
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: ionicons.css, jquery.js
Links
Made with
- HTML (Pug) / CSS (Sass) / JS
About a code
3D Login Form Concept in jQuery
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Fluid Booking Form UX/UI
I wanted to make a complicated booing process as simple and frictionless as possible. I used fluid animations to keep the relative locations of information easy to understand. It is just a concept so some functionality such as selecting months etc is missing.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Card Switch
A binary switch layout with a cool animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Sign Up
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Modified Subscribe Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Over The Top Form
A ridiculous form made with GSAP.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css, tweenmax.js
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Interactive Customer Feedback Form
Takes the edge off those boring customer feedback forms :) Grab the smilies and move them up or down to reflect how happy you are!!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Modal Contact Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Login Box Concept
Login box with animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery-ui.css, jquery-ui.js
Links
Made with
- HTML / CSS / JS
About a code
Under the Sea Contact Form
Contact form with custom jQuery form validation. Plus some simple CSS3 animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -