# Reset Password Form

> A password reset card with a back link, heading, helper copy, email field and a Send reset link button.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/reset-password-form/
- Licence: MIT (do anything, keep the notice)

## Code

`index.html`

```html
<form class='rp' id='rpf'><a href='#' class='rp-b'><svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>Back to sign in</a><h3>Reset your password</h3><p>Enter the email linked to your account and we'll send a reset link.</p><label for='rp1'>Email address</label><input id='rp1' type='email' placeholder='you@company.com' required><button type='submit' id='rpb'><span>Send reset link</span><svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg></button></form>
```

`styles.css`

```css
.rp{width:min(330px,90%);margin:auto;padding:6px 0;font-family:Inter,Arial,sans-serif;color:#111}.rp-b{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#525252;text-decoration:underline;text-underline-offset:3px}.rp h3{margin:18px 0 10px;font-size:22px;font-weight:700;letter-spacing:-.01em}.rp p{margin:0 0 20px;font-size:13.5px;line-height:1.7;color:#737373}.rp label{display:block;margin-bottom:8px;font-size:13.5px;font-weight:500}.rp input{width:100%;box-sizing:border-box;height:40px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;transition:border-color .15s,box-shadow .15s}.rp input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.rp input::placeholder{color:#a3a3a3}.rp button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;margin-top:16px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer}
```

`script.js`

```js
const f=document.getElementById('rpf'),b=document.getElementById('rpb');f.addEventListener('submit',e=>{e.preventDefault();b.firstChild.textContent='Sending...';setTimeout(()=>{b.firstChild.textContent='Check your inbox';},900);setTimeout(()=>{b.firstChild.textContent='Send reset link';f.reset()},2800)});f.querySelector('.rp-b').addEventListener('click',e=>e.preventDefault());
```

## About

A focused recovery form. The button shows a sending state and then a confirmation message, ready to wire to your own endpoint.

---
Also available as JSON: https://ownlyplans.com/bhaskar/reset-password-form/?format=json
MCP server: https://ownlyplans.com/mcp