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

  1. CSS Forms
  2. Bootstrap Forms
  3. Tailwind Forms

Author

  • technext

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: -

Author

  • technext

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

Author

  • technext

Made with

  • HTML / CSS / JS

About a code

Login and Sign up Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Registration Form #29

Author

  • rokr

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

Demo image: Registration Form #28

Author

  • rokr

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

Demo image: Registration Form #27

Author

  • rokr

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

Demo image: Registration Form #25

Author

  • rokr

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

Demo image: Registration Form #24

Author

  • rokr

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

Demo image: Registration Form #13

Author

  • rokr

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

Demo image: Registration Form #3

Author

  • rokr

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

Demo image: Registration Form #1

Author

  • rokr

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

Author

  • Adam Kuhn

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

Author

  • Arefeh hatami

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

Author

  • Olivia Ng

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

Author

  • Ricky Eckhardt

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

Author

  • Adam Kuhn

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

Author

  • Adam Kuhn

Made with

  • HTML / CSS (SCSS) / JS

About a code

Subscribercoaster

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: splitting.js

Author

  • Tobias Glaus

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: -

Author

  • Atul Kumar Singh

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

Author

  • Brezo Lozano

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

Author

  • Amadou Oury Diallo

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

Author

  • Adam Kuhn

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

Author

  • Adam Kuhn

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

Author

  • Valery Alikin

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

Author

  • Valery Alikin

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

Author

  • Himalaya Singh

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

Author

  • Milan Raring

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

Author

  • Himalaya Singh

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

Author

  • Aaron Iker

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

Author

  • Himalaya Singh

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

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Password Error Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Kyle Wetton

Made with

  • HTML / CSS (SCSS) / JS

About a code

Login UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Aaron Iker

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

Author

  • Aaron Iker

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

Author

  • Heath

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

Author

  • Julie Park

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

Author

  • burnaDLX

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

Author

  • Jenning

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: -

Author

  • Ethan Arrowood

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

Author

  • Nathan Taylor

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: -

Author

  • Omkar Kulkarni

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: -

Author

  • Tommaso Poletti

Made with

  • HTML / CSS / JS

About a code

Sign Up

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Charlie Yang

Made with

  • HTML / CSS / JS

About a code

Sign Up and Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Satyajit Rout

Made with

  • HTML / CSS / JS

About a code

Modified Subscribe Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Antonin Cezard

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

Author

  • Jamie Coulter

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: -

Author

  • ari

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Modal Contact Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Andy Tran

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: -

Author

  • Emil Devantie Brockdorff

Made with

  • HTML / CSS / JS

About a code

Material Design Log In & Sign Up

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • balapa

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: -

Author

  • Jamie Coulter

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

Author

  • Geert-Jan Hendriks

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: -