jQuery form examples and plugins

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Sign Up

Author:
technext | June 24, 2021
Made with:
HTML / CSS (SCSS) / JS

About a code

Fully responsive and animated sign up and log in modal.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Material Compact Login Animation

Author:
technext | June 19, 2021
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Login and Sign up Form

Author:
technext | June 19, 2021
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Registration Form #29

Registration Form #29

Author:
rokr | April 1, 2021
Made with:
HTML / CSS / JS

About a code

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
Registration Form #28

Registration Form #28

Author:
rokr | April 1, 2021
Made with:
HTML / CSS / JS

About a code

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
Registration Form #27

Registration Form #27

Author:
rokr | April 1, 2021
Made with:
HTML / CSS / JS

About a code

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
Registration Form #25

Registration Form #25

Author:
rokr | April 1, 2021
Made with:
HTML / CSS / JS

About a code

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
Registration Form #24

Registration Form #24

Author:
rokr | April 1, 2021
Made with:
HTML / CSS / JS

About a code

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
Registration Form #13

Registration Form #13

Author:
rokr | April 1, 2021
Made with:
HTML / CSS / JS

About a code

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
Registration Form #3

Registration Form #3

Author:
rokr | March 31, 2021
Made with:
HTML / CSS / JS

About a code

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
Registration Form #1

Registration Form #1

Author:
rokr | March 31, 2021
Made with:
HTML / CSS / JS

About a code

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

Spoopy Signup

Author:
Adam Kuhn | October 27, 2020
Made with:
HTML (Haml) / CSS (SCSS) / JS

About a code

Sigup form in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
splitting.js

Multistep Form

Author:
Arefeh hatami | October 1, 2020
Made with:
HTML / CSS (SCSS) / JS

About a code

Multistep form with jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.easing.js

UI Design: Send A Postcard Form

Author:
Olivia Ng | August 2, 2020
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 | March 2, 2020
Made with:
HTML (Slim) / CSS (Sass) / JS

About a code

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

NESubscribe

Author:
Adam Kuhn | February 5, 2020
Made with:
HTML (Haml) / CSS (SCSS) / JS

About a code

Subscribe form with jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
splitting.js

Subscribercoaster

Author:
Adam Kuhn | January 15, 2020
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
splitting.js

Dynamic Focus

Author:
Tobias Glaus | December 11, 2019
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Form Wizard with Validation

Author:
Atul Kumar Singh | September 25, 2019
Made with:
HTML / CSS / JS

About a code

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 | July 22, 2019
Made with:
HTML / CSS / JS

About a code

Login form with confirmation in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Interactive Newslatter Form

Author:
Amadou Oury Diallo | May 28, 2019
Made with:
HTML / CSS (SCSS) / JS

About a code

Notify me - interactive newslatter form in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Subscribe Form

Author:
Adam Kuhn | January 2, 2019
Made with:
HTML (Haml) / CSS (SCSS) / JS

About a code

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 | December 31, 2018
Made with:
HTML (Haml) / CSS (SCSS) / JS

About a code

Signup form concept with Splitting.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js, splitting.js

Password Check

Author:
Valery Alikin | December 28, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Password check in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Email Check Animation

Author:
Valery Alikin | December 21, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Exploration for invalid email.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Password Error Animation

Author:
Himalaya Singh | October 15, 2018
Made with:
HTML / CSS / JS

About a code

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

Simle Animated Form

Author:
Milan Raring | September 26, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Animated form with jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Password Input Field

Author:
Himalaya Singh | September 24, 2018
Made with:
HTML / CSS / JS

About a code

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

Password Error Animation #2

Author:
Aaron Iker | September 24, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Password input animation error in jQuery.

Compatible browsers:
Chrome, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Sign Up Form With Progressive Disclosure

Author:
Himalaya Singh | September 16, 2018
Made with:
HTML / CSS / JS

About a code

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

Password Error Animation

Author:
Aaron Iker | September 8, 2018
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Login UI

Author:
Kyle Wetton | July 28, 2018
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Email Validation Animation

Author:
Aaron Iker | July 3, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

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 | June 28, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Small jQuery example.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Transforming Select Fields

Author:
Heath | May 29, 2018
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

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 | March 20, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Password Visibility Toggle

Author:
burnaDLX | July 17, 2017
Made with:
HTML / CSS (Sass) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
ionicons.css, jquery.js

3D Login Form Concept in jQuery

Author:
Jenning | April 23, 2017
Made with:
HTML (Pug) / CSS (Sass) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

ARS LogIn/SignUp

Author:
Ethan Arrowood | January 24, 2017
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
animate.css, tweenmax.js

Fluid Booking Form UX/UI

Author:
Nathan Taylor | January 21, 2017
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Card Switch

Author:
Omkar Kulkarni | October 4, 2016
Made with:
HTML / CSS (Sass) / JS

About a code

A binary switch layout with a cool animation.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Sign Up

Author:
Tommaso Poletti | June 21, 2016
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Sign Up and Login Form

Author:
Charlie Yang | June 20, 2016
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Modified Subscribe Form

Author:
Satyajit Rout | May 17, 2016
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Over The Top Form

Author:
Antonin Cezard | February 25, 2016
Made with:
HTML / CSS (SCSS) / JS

About a code

A ridiculous form made with GSAP.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css, tweenmax.js

Interactive Customer Feedback Form

Author:
Jamie Coulter | December 31, 2015
Made with:
HTML (Haml) / CSS (SCSS) / JS

About a code

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

Modal Contact Form

Author:
ari | December 4, 2015
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Login Form - Modal

Author:
Andy Tran | October 19, 2015
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

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

Material Design Log In & Sign Up

Author:
Emil Devantie Brockdorff | June 23, 2015
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Step by Step Form Interaction

Author:
balapa | May 10, 2015
Made with:
HTML / CSS / JS

About a code

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

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨