Collection of free jQuery form code examples from Codepen and Github: email check, password check, password input, login, sign up and subscribe forms. Update of October 2021 collection. 16 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Sign Up
Fully responsive and animated sign up and log in modal.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Material Compact Login Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
Login and Sign up Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS / JS
About a code
Registration Form #29
This free ticket booking template is perfect for galleries, museums and other types of exhibitions and whatnot. It features a beautiful design with a form on one side and an image on the other. Also, it’s entirely mobile device friendly.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css, jquery-ui.css

Links
Made with
- HTML / CSS / JS
About a code
Registration Form #28
A convenient free subscription form template with a split-screen design and a responsive layout. The widget features name, email and password fields with a checkbox for terms of service.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.validate.js, additional-methods.js

Links
Made with
- HTML / CSS / JS
About a code
Registration Form #27
Avoid starting from the ground up with this free financial application template with a three-step wizard. Personal information, bank account and financial goals are the three sections of this wizard with multiple features.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css, jquery.steps.js

Links
Made with
- HTML / CSS / JS
About a code
Registration Form #25
Thanks to the simple and minimal design of this free Bootstrap book a room form, you will add it to your application hassle-free. It comes with datepickers and drop-downs, and even includes a checkbox for your convenience.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css, datepicker.css, datepicker.js

Links
Made with
- HTML / CSS / JS
About a code
Registration Form #24
The best free full-screen signup template with a stunning split-screen design that seamlessly adjusts to different screen sizes. Along with the username, email and password fields, the template also includes social media icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css, jquery.form-validator.js

Links
Made with
- HTML / CSS / JS
About a code
Registration Form #13
This niche free diner event booking template works great for restaurants or exclusive gatherings to help the host with the organization. The widget features a split-screen design with drop-downs, dining space selection and a book now button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css

Links
Made with
- HTML / CSS / JS
About a code
Registration Form #3
Collecting details about attendees happens easier than you think with this free event registration template.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css, font-awesome.css, select2.js, moment.js, daterangepicker.js

Links
Made with
- HTML / CSS / JS
About a code
Registration Form #1
Whether you offer online or offline classes and education, this free class registration template is the necessary addition to your website. It offers a simple process for the user to submit their registration form on mobile or desktop.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css, font-awesome.css, select2.js, moment.js, daterangepicker.js
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 / CSS (SCSS) / JS
About a code
ARS LogIn/SignUp
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: animate.css, tweenmax.js
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
Sign Up and Login Form
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 (Pug) / CSS (SCSS) / JS
About a code
Login Form - Modal
This is a material inspired login modal with 2 panels. A login panel, and a registration panel which is hidden by default. The registration panel can be triggered by clicking the visible tab on the right side. Once clicked, the registration panel will slide in and overlap the login panel.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Material Design Log In & Sign Up
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Step by Step Form Interaction
A simple step form for customer experience. The purpose of this form is to get the feedback from user for the store.
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: -