Collection
Post cover

Best 36 jQuery Forms

Collection of free jQuery form examples: email check, password check, password input, login, sign up and subscribe forms.

Spoopy Signup

Author: Adam Kuhn

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

Sigup form in jQuery.

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

Dependencies: splitting.js

Multistep Form

Author: Arefeh hatami

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Multistep form with jQuery.

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

Dependencies: jquery.easing.js

UI Design: Send A Postcard Form

Author: Olivia Ng

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: simple-line-icons.css

Anthropologie Email Sign Up Form

Author: Ricky Eckhardt

Links: demo and code

Made with: HTML (Slim) / CSS (Sass) / JS

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

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

Dependencies: jquery.easing.js

NESubscribe

Author: Adam Kuhn

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

Subscribe form with jQuery.

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

Dependencies: splitting.js

Subscribercoaster

Author: Adam Kuhn

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: splitting.js

Dynamic Focus

Author: Tobias Glaus

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

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

Responsive: yes

Form Wizard with Validation

Author: Atul Kumar Singh

Links: demo and code

Made with: HTML / CSS / JS

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

Login Form With Confirmation

Author: Brezo Lozano

Links: demo and code

Made with: HTML / CSS / JS

Login form with confirmation in jQuery.

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

Dependencies: jquery.js

Interactive Newslatter Form

Author: Amadou Oury Diallo

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Notify me - interactive newslatter form in jQuery.

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

Dependencies: jquery.js

Subscribe Form

Author: Adam Kuhn

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

Animated subscribe form in jQuery.

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

Responsive: yes

Dependencies: jquery.js, splitting.js

Pinball Wizard Effect For Form

Author: Adam Kuhn

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

Signup form concept with Splitting.js.

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

Dependencies: jquery.js, splitting.js

Password Check

Author: Valery Alikin

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Password check in jQuery.

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

Responsive: yes

Dependencies: jquery.js

Email Check Animation

Author: Valery Alikin

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Exploration for invalid email.

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

Dependencies: jquery.js

Password Error Animation

Author: Himalaya Singh

Links: demo and code, dribbble shot

Made with: HTML / CSS / JS

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

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

Dependencies: font-awesome.css, jquery.js

Simle Animated Form

Author: Milan Raring

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Animated form with jQuery.

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

Dependencies: font-awesome.css

Password Input Field

Author: Himalaya Singh

Links: demo and code

Made with: HTML / CSS / JS

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

Compatible browsers: Chrome, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Password Error Animation #2

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Password input animation error in jQuery.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js

Sign Up Form With Progressive Disclosure

Author: Himalaya Singh

Links: demo and code, dribbble shot

Made with: HTML / CSS / JS

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

Dependencies: font-awesome.css, jquery.js

Password Error Animation

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: jquery.js

Login UI

Author: Kyle Wetton

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: jquery.js

Email Validation Animation

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Simple animation if the email is valid.

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

Responsive: yes

Dependencies: jquery.js

Code Input Field

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Small jQuery example.

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

Dependencies: jquery.js

Transforming Select Fields

Author: Heath

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Sign Up Form

Author: Julie Park

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: jquery.js

Password Visibility Toggle

Author: burnaDLX

Links: demo and code

Made with: HTML / CSS (Sass) / JS

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

Dependencies: ionicons.css, jquery.js

3D Login Form Concept in jQuery

Author: Jenning

Links: demo and code

Made with: HTML (Pug) / CSS (Sass) / JS

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

Responsive: yes

Fluid Booking Form UX/UI

Author: Nathan Taylor

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Card Switch

Author: Omkar Kulkarni

Links: demo and code

Made with: HTML / CSS (Sass) / JS

A binary switch layout with a cool animation.

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

Sign Up

Author: Tommaso Poletti

Links: demo and code

Made with: HTML / CSS / JS

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

Modified Subscribe Form

Author: Satyajit Rout

Links: demo and code

Made with: HTML / CSS / JS

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

Over The Top Form

Author: Antonin Cezard

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

A ridiculous form made with GSAP.

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

Dependencies: font-awesome.css, tweenmax.js

Interactive Customer Feedback Form

Author: Jamie Coulter

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

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

Modal Contact Form

Author: ari

Links: demo and code, dribbble

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Login Box Concept

Author: Jamie Coulter

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

Login box with animation.

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

Dependencies: jquery-ui.css, jquery-ui.js

Under the Sea Contact Form

Author: Geert-Jan Hendriks

Links: demo and code

Made with: HTML / CSS / JS

Contact form with custom jQuery form validation. Plus some simple CSS3 animations.

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

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback