Responsive Colorful Login Form Widget Template

  • 🗓 Released Sep 2017
  • v2.0Updated Sep 2026
  • 👁 3,255 views
  • HTMLCSSJS

Colorful login form is modern and uniquely designed sign in form which you can use in your website to get a user on your site. This colored login form designed using html5, css3 and bootstrap framework can be used by professionals, artists, designers, developers and all the online firms. Designed using HTML5 & CSS3 with well coded files. Get the demo!

 

Version 2.0 makes the login card a working form: every field is labelled and validated, the password has a show/hide button, Remember Me really remembers the email address and there is a success state. It adds the two pages the card links to — a forgot-password page (forgot-password.html) and a sign-up page (sign-up.html, with a live password-strength bar) — plus three ready-to-send HTML emails in the same design: password reset (email-password-reset.html), welcome (email-welcome.html) and new sign-in alert (email-signin-alert.html). The Facebook, Twitter and Google buttons link to their providers, the fonts are self-hosted and each form can be pointed at your own server with one attribute.

Features

Template Type:

Free

Compatible Browsers:

Opera, Firefox, Google Chrome

Link hover effetcs:

No

Coding:

HTML 5, CSS 3

Forms:

Registration Form, Login Form

Additional Features:

Favicon, Responsive Design, Social Links

Image Sources:

Pexels

What’s new

  1. v2.0Sep 2026
    • A working login form: labelled fields, validation with a red message under
    • forgot-password.html — where Reset Password now goes: email field,
    • sign-up.html — where Sign Up now goes: name, email and password with a live
    • Three ready-to-send HTML emails, one per form: email-password-reset.html,
    • Connect it to your server: add data-endpoint="https://your-site.com/api/…"
    • On a tablet or phone the card and the credit line sit vertically centred on
    • The page scrolled sideways on phones 401–459px wide (a 412px Pixel, a 430px
    • The "or sign in with social media" divider drew its lines through the text
    • The bottom row said "Forgot Password? [Sign In]" with the pill going
    • The Facebook, Twitter and Google buttons did nothing (and their Font Awesome
    • The email and password fields were 20px wider than the card's content and
    • The "Sign In" title is the page's <h1> (it was a <div>); the fields have
    • Plain HTML and CSS plus one dependency-free js/main.js — no framework, no
    • Recolour in one place: --red (and the three social brand colours) at the top

Already downloaded this template? Your My Downloads page always serves the latest version — re-download free.


Reviews

No reviews yet — be the first to review this template.


View Similar Templates

Free
Free
Free
Free
Free
Free
Free
Free
Free

View Blog

Colorful Login Form

Free+ footer credit link

Free Download

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.