Collection of free jQuery form examples: email check, password check, password input, login, sign up and subscribe forms. Update of October 2019 collection. 7 new items.

  1. CSS Forms
  2. Bootstrap Forms

Creator

  • Arefeh hatami

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Multistep Form

Multistep form with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.easing.js

Creator

  • Olivia Ng

Programming language

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

Information a code

UI Design: Send A Postcard Form

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: simple-line-icons.css

Creator

  • Ricky Eckhardt

Programming language

  • HTML (Slim) / CSS (Sass) / JS

Information a code

Anthropologie Email Sign Up Form

A fun quick email and phone signup jQuery form based on Anthropologie.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.easing.js

Creator

  • Adam Kuhn

Programming language

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

Information a code

NESubscribe

Subscribe form with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: splitting.js

Creator

  • Adam Kuhn

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Subscribercoaster

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: splitting.js

Creator

  • Tobias Glaus

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Dynamic Focus

The focus takes width, height and border-radius into account.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Brezo Lozano

Programming language

  • HTML / CSS / JS

Information a code

Login Form With Confirmation

Login form with confirmation in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Amadou Oury Diallo

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Interactive Newslatter Form

Notify me – interactive newslatter form in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Adam Kuhn

Programming language

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

Information a code

Subscribe Form

Animated subscribe form in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, splitting.js

Creator

  • Adam Kuhn

Programming language

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

Information a code

Pinball Wizard Effect For Form

Signup form concept with Splitting.js.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, splitting.js

Creator

  • Valery Alikin

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Password Check

Password check in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Valery Alikin

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Email Check Animation

Exploration for invalid email.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Himalaya Singh

Programming language

  • HTML / CSS / JS

Information a code

Password Error Animation

Drawing the close button icon for password error UI using CSS animations and jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

Creator

  • Milan Raring

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Simle Animated Form

Animated form with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Himalaya Singh

Programming language

  • HTML / CSS / JS

Information a code

Password Input Field

Password input field with micro-interactions to show and hide the password.

Browser Support: Chrome, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

Creator

  • Aaron Iker

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Password Error Animation #2

Password input animation error in jQuery.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Himalaya Singh

Programming language

  • HTML / CSS / JS

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

Creator

  • Aaron Iker

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Password Error Animation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Kyle Wetton

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Login UI

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Aaron Iker

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Email Validation Animation

Simple animation if the email is valid.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Aaron Iker

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Code Input Field

Small jQuery example.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Heath

Programming language

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

Information a code

Transforming Select Fields

Just a little form to showcase how you can use DL, DT & DD to spice up your select boxes.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Julie Park

Programming language

  • HTML / CSS (SCSS) / JS

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • burnaDLX

Programming language

  • HTML / CSS (Sass) / JS

Information a code

Password Visibility Toggle

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: ionicons.css, jquery.js