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.
1. 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
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
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
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
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
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
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
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
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
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
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
Author: Kyle Wetton (kylewetton)
Links: Source Code / Demo
Created on: July 27, 2018
Made with: HTML, SCSS, JS
13. 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
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
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
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
Author: burnaDLX (burnaDLX)
Links: Source Code / Demo
Created on: July 17, 2017
Made with: HTML, Sass, JS
18. 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
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
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
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
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
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
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)
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)
Author: Dan Barness (danbarness)
Links: Source Code / Demo
Created on: March 21, 2017
Made with: HTML, CSS, JS
27. Jquery Login / Signup Form
Author: Tyler Huestis (TylerKHuestis)
Links: Source Code / Demo
Made with: HTML, CSS, JS
28. Subscribe Animation
Author: Thomas Cullen (Thomascullen)
Links: Source Code / Demo
Made with: HTML, SCSS, Babel
29. 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)
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
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
Author: rajeshdn (RajRajeshDn)
Links: Source Code / Demo
Created on: December 4, 2017
Made with: HTML, CSS, JS
33. 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
More Awesome Lists:
Share: