Skip to content

Forgot Password Form

Tailwind CSS forgot password form with email validation, loading spinner, check-your-inbox success state and a resend cooldown timer.

Also known as: password reset form, reset password page, forgot password page, email reset request

Tailwind CSS Login & Sign Up Responsive #form #login #password #reset #validation

Forgot Password Form live demo

Open in new tab

Tailwind CSS code (HTML, JS)

A forgot password form built with Tailwind CSS that validates the email address, shows a loading spinner while the request is "sent" and then switches to a "Check your inbox" success state with a resend cooldown. Use it as the password reset request page of any login flow.

How it works

The root is section.tfp-reset, a warm bg-orange-50 page area with a centered white card. The card holds two views. [data-tfp-request] contains a key icon, the heading, a short explanation and the form [data-tfp-form] with one email input (#tfp-email, with a mail icon inside the field), an error paragraph [data-tfp-error] and the submit button. [data-tfp-success] starts with the hidden attribute and contains the confirmation message, two tips, a "Resend email" button and a "Use another email" button. A "Back to sign in" link sits below both views.

The script runs on DOMContentLoaded for every .tfp-reset. On submit it calls preventDefault(), checks the value against EMAIL_PATTERN and shows a specific message for an empty or malformed address. While the request runs, the button is disabled, gets aria-busy="true", shows the [data-tfp-spinner] icon and reads "Sending link…". After SEND_DELAY the request view is hidden, the address is written into [data-tfp-sent-to], and focus moves to the success heading. The resend button is then locked for RESEND_COOLDOWN seconds with a live "Resend in 30s" countdown. "Use another email" returns to the form and selects the previous address.

The form has novalidate, so the script handles all messages consistently; without JavaScript the native required and type="email" rules still exist.

Customization

  • sendResetLink() in script.js: replace the setTimeout with a fetch() POST to your password reset endpoint and call done(email) when it succeeds.
  • SEND_DELAY and RESEND_COOLDOWN at the top of script.js: change the simulated wait and the resend lock time in seconds.
  • EMAIL_PATTERN in script.js: loosen or tighten the email check to match your backend rules.
  • Orange accent (bg-orange-600 on the submit button, bg-orange-100 icon tile, text-orange-700 link): swap for another Tailwind color such as indigo to match your brand.
  • "The link expires in 30 minutes." in [data-tfp-success]: update to your real token lifetime.
  • bg-orange-50 and min-h-[600px] on .tfp-reset: use min-h-screen when the form is a full page.

Use cases

  • Login flows: the page where users request a password reset link by entering their email
  • Web apps: inline validation and a loading spinner guide the user while the request is sent
  • Account recovery: a check-your-inbox success state confirms where the email was sent
  • Customer portals: a resend button with a countdown timer prevents repeated requests

Accessibility

The input has a visible label and is linked to the error text with aria-describedby; invalid input gets aria-invalid="true", which also turns the border red through the aria-invalid: variant, so color is not the only signal. Focus returns to the field after a validation error and moves to the success heading (tabindex="-1") when the view changes. A role="status" region announces "Sending reset link." and the confirmation. Icons are aria-hidden, focus outlines are clearly visible, and the spinner stops with motion-reduce:animate-none.

Usage notes

No style.css is needed. For privacy, show the same success message whether or not the email exists in your system. When placing two forms on a page, change the tfp-email and tfp-email-error ids.

Forgot Password Form at a glance

Framework
Tailwind CSS
Code
HTML, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Tailwind CSS
Layout
Responsive, works on mobile
Category
Login & Sign Up
License
Free for personal and commercial use

Questions about this template

Can I use the Forgot Password Form code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Tailwind CSS from a CDN (the links are under Requirements). Paste the HTML where the component should appear and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

  • <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.

Forgot Password Form – Tailwind CSS login & sign up component screenshot
Forgot Password Form · Tailwind CSS Login & Sign Up

More Login & Sign Up

Login Form with Floating Labels – Pure CSS login & sign up preview

Login Form with Floating Labels

Clean pure CSS login card with animated floating labels, show/hide password, inline validation and a simulated sign-in state in vanilla JavaScript.

Pure CSS Login & Sign Up
Signup Form with Validation – Bootstrap 5 login & sign up preview

Signup Form with Validation

Bootstrap 5 signup form with live password rules, a strength meter, show/hide toggle, password confirmation and a required terms checkbox.

Bootstrap 5 Login & Sign Up
Sliding Login and Register Form – Pure CSS login & sign up preview

Sliding Login and Register Form

Pure CSS sign in and sign up forms with a gradient overlay panel that slides between them, plus a mobile switcher and client-side validation.

Pure CSS Login & Sign Up
Login Form with Social Buttons – Tailwind CSS login & sign up preview

Login Form with Social Buttons

Tailwind CSS login form with Google and GitHub buttons, remember me, password visibility toggle and accessible inline validation.

Tailwind CSS Login & Sign Up