Navigation Menu

35+ jQuery Forms - Free Code + Demos

Collection of 35+ jQuery Forms. All items are 100% free and open-source. The list also includes email check jquery forms, password check, password input, login, and sign up.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai

1. Login Form With Confirmation!

jQuery Forms - Login form with confirmation!
Lofin form centered in page (for better view: Click Change View -> Full Page View). Include confirmation page and validation (with errors) in jQuery
Author: Brezo Lozano (brezo)
Links: Source Code / Demo
Created on: July 22, 2019
Made with: HTML, CSS, JS
Tags: form, confirmation page

2. Notify Me - Interactive Newslatter Form

jQuery Forms - Notify me - Interactive newslatter form
Author: Amadou Oury Diallo (amaury-diallo)
Links: Source Code / Demo
Created on: May 28, 2019
Made with: HTML, SCSS, JS
Tags: newsletter, animated, form, jquery

3. Head For The Hills

jQuery Forms - Head for the Hills
Author: Adam Kuhn (cobra_winfrey)
Links: Source Code / Demo, Dribbble Page
Created on: January 2, 2019
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml

4. Pinball Wizard

jQuery Forms - Pinball Wizard
signup form concept w/ splitting.js
Author: Adam Kuhn (cobra_winfrey)
Links: Source Code / Demo
Created on: December 31, 2018
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml

5. Password Check

jQuery Forms - Password check
Author: Valery Alikin (AlikinVV)
Links: Source Code / Demo, Dribbble Shot
Created on: December 28, 2018
Made with: HTML, SCSS, JS
Tags: email, validation

6. Email Check Animation

jQuery Forms - Email check animation
Author: Valery Alikin (AlikinVV)
Links: Source Code / Demo, Dribbble Shot
Created on: December 21, 2018
Made with: HTML, SCSS, JS
Tags: email, animation, form

7. Password Error Animation

jQuery Forms - Password Error Animation
Drawing the close button icon for password error ui using CSS animations.
Author: Himalaya Singh (himalayasingh)
Links: Source Code / Demo, Dribbble Shot
Created on: October 15, 2018
Made with: HTML, CSS, JS
Tags: password input, input-box, animation, error animation, ui

8. Password Input Field With Password View / Hide Button | Micro-Interactions

jQuery Forms - Password Input Field With Password View / Hide Button | Micro-Interactions
Password input field with micro-interactions to show and hide the password.
Author: Himalaya Singh (himalayasingh)
Links: Source Code / Demo
Created on: September 24, 2018
Made with: HTML, CSS, JS
Tags: password, input, view password, hide password, micro-interactions

9. Password Error Animation 2 Form

jQuery Forms - Password Error Animation 2 Form
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: September 24, 2018
Made with: HTML, SCSS, JS
Tags: password, input, animation, error

10. Sign Up Form With Progressive Disclosure | Micro Interaction

jQuery Forms - Sign Up Form With Progressive Disclosure | Micro Interaction
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. Inspired By: https://dribbble.com/shots/4827669-Progressive-Disclosure-Mi...
Read More
Author: Himalaya Singh (himalayasingh)
Links: Source Code / Demo, Dribbble Shot
Created on: September 16, 2018
Made with: HTML, CSS, JS
Tags: form, sign-up-form, progressive-disclosure, micro interaction, one box signup form

11. Password Error Animation

jQuery Forms - Password error animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: September 8, 2018
Made with: HTML, SCSS, JS
Tags: password, input, animation, error

12. Login UI

jQuery Forms - Login UI
Author: Kyle Wetton (kylewetton)
Links: Source Code / Demo
Created on: July 27, 2018
Made with: HTML, SCSS, JS

13. Email Validation Animation

jQuery Forms - Email validation animation
Simple animation if the email is valid Dribbble Shot
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: July 3, 2018
Made with: HTML, SCSS, JS
Tags: email, input, validation, animation, ui

14. Code Input Field

jQuery Forms - Code Input Field
Small jQuery Plugin I created for fun, not perfect tbh Dribbble Shot
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: June 28, 2018
Made with: HTML, SCSS, JS
Tags: jquery, plugin, form, ui, material

15. Transforming Select Fields Using DL, DT & DD + Some JQuery

jQuery Forms - Transforming select fields using DL, DT & DD + some jQuery
Just a little form to show how I like to use DL, DT and DD elements to hack browser select fields into something purdy.
Author: Heath (fantaskis)
Links: Source Code / Demo
Created on: May 29, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: codepenchallenge, cpc-dt-dd

16. Pink Sign Up Form

jQuery Forms - Pink Sign Up Form
Sign up & Sign in Form for a flower company app animated with jQuery. Design inspiration by lavender flowers with pastel colors
Author: Julie Park (juliepark)
Links: Source Code / Demo
Created on: March 20, 2018
Made with: HTML, SCSS, JS
Tags: sign-in-form, sign-up-form, animated sign in, dailyui, signup

17. Password Visibility Toggle

jQuery Forms - password visibility toggle
Author: burnaDLX (burnaDLX)
Links: Source Code / Demo
Created on: July 17, 2017
Made with: HTML, Sass, JS

18. REC Form

jQuery Forms - REC Form
Forked from Adam Hopkins's Pen REC Form.
Author: Srijon Sarker (Creative_Srijon)
Links: Source Code / Demo
Created on: April 2, 2016
Made with: HTML, SCSS, JS

19. Untitled

jQuery Forms - Untitled
Forked from Momoko Price's Pen myByBM.
Author: Srijon Sarker (Creative_Srijon)
Links: Source Code / Demo
Created on: April 2, 2016
Made with: HTML, CSS, JS

20. Multi-step Form Interface

jQuery Forms - Multi-step form interface
From: http://webdesign.tutsplus.com/articles/build-a-multi-step-form-interface--webdesign-11715
Author: Emil Devantie Brockdorff (Mestika)
Links: Source Code / Demo
Created on: January 8, 2015
Made with: HTML, Less, JS
Tags: form, wizard, multi-step, step

21. Form Focus

jQuery Forms - Form Focus
Concept for narrowing focus when completing a form.
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: August 19, 2020
Made with: HTML, SCSS, JS
Tags: form, focus, transform, opacity

22. Untitled

jQuery Forms - Untitled
Forked from BrandPorter's Pen ByKpGp.
Author: Srijon Sarker (Creative_Srijon)
Links: Source Code / Demo
Created on: April 2, 2016
Made with: HTML, CSS, JS

23. A Styled Form

jQuery Forms - A styled form
A form
Author: Steven Marshall (steeven7)
Links: Source Code / Demo
Created on: July 30, 2020
Made with: HTML, CSS, JS
Tags: form, javascript, css, styled

24. Newsletter Form

jQuery Forms - Newsletter Form
From codyhouse.co
Author: Emil Devantie Brockdorff (Mestika)
Links: Source Code / Demo
Created on: December 21, 2015
Made with: HTML, CSS, JS
Tags: newsletter, form, submit, codyhouse

25. Mailchimp AJAX Subscribe Animated Responsive Form (jQuery)

jQuery Forms - Mailchimp AJAX Subscribe Animated Responsive Form (jQuery)
Use AJAX to allow users to signup for a Mailchimp list without ever leaving the page they are currently viewing. Nice animated success message with SVG. Fully responsive.
Author: John Ludena (johnludena)
Links: Source Code / Demo
Created on: August 21, 2017
Made with: HTML, CSS, JS
Tags: mailchimp, ajax, subscribe, svg, animation

26. Responsive Sign-up Slide-in Form (JQuery Animation)

jQuery Forms - Responsive Sign-up Slide-in Form (JQuery Animation)
Author: Dan Barness (danbarness)
Links: Source Code / Demo
Created on: March 21, 2017
Made with: HTML, CSS, JS

27. Jquery Login / Signup Form

jQuery Forms - jquery login / signup form
Author: Tyler Huestis (TylerKHuestis)
Links: Source Code / Demo
Made with: HTML, CSS, JS

28. Subscribe Animation

jQuery Forms - Subscribe animation
Author: Thomas Cullen (Thomascullen)
Links: Source Code / Demo
Made with: HTML, SCSS, Babel

29. Interactive Sign Up Form

jQuery Forms - Interactive Sign Up Form
A concept for an interactive signup form. I've taken the inspiration by this shot https://dribbble.com/shots/2372516--5-Subscribe-Form Hope you enjoy :)
Author: Riccardo Pasianotto (rkpasia)
Links: Source Code / Demo
Created on: March 1, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: sign-up, interactive, minimal, fresh, small

30. Codepen Newsletter Content Template (Proof Of Concept)

jQuery Forms - Codepen Newsletter Content Template (Proof Of Concept)
A quick proof of concept based on Chris wanting to focus on writing and not HTML/CSS when creating new newsletters for CodePen. Solution: write your content in contenteditable fields and then submit the newsletter to its own Pen (using the button at the top) to add links, images, etc. Th...
Read More
Author: Marcus Burnette (mburnette)
Links: Source Code / Demo
Created on: May 11, 2015
Made with: HTML, SCSS, JS

31. Animated Login Form Using JQuery

jQuery Forms - Animated Login Form Using jQuery
Author: satish mallick (satishmallick)
Links: Source Code / Demo
Created on: December 10, 2019
Made with: HTML, CSS, JS

32. Expanding Animated Search Box Using Jquery

jQuery Forms - Expanding Animated search box Using Jquery
Author: rajeshdn (RajRajeshDn)
Links: Source Code / Demo
Created on: December 4, 2017
Made with: HTML, CSS, JS

33. Contact Form

jQuery Forms - Contact form
animated contact form
Author: Iulian Savin (Iulius90)
Links: Source Code / Demo
Created on: February 11, 2015
Made with: HTML, CSS, JS
Tags: contact, form, animation, jquery, envelope
NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai
More Awesome Lists:
jQuery Credit Card Plugins jQuery Mega Menus jQuery Mega MenusjQuery Map Plugins jQuery Accordions jQuery Accordions
Share: