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

  1. CSS Forms
  2. Bootstrap Forms

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

  • 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

  • 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

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