Free HTML Form Templates: 33 Copy-Paste Designs 2026

<form class="form">
  <h2>Sign In</h2>
  <label>Email<input type="email" placeholder="you@email.com"></label>
  <label>Password<input type="password" placeholder="&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;"></label>
  <button type="submit">Sign In</button>
</form>

.form { background:#111; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:32px; max-width:400px; }
.form label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:rgba(255,255,255,.5); margin-bottom:14px; }
.form input { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:11px 14px; color:#fff; font-size:14px; }
.form button { width:100%; background:#e53e3e; color:#fff; border:none; border-radius:8px; padding:12px; font-weight:600; cursor:pointer; }

<form class="form">
  <input type="text" placeholder="Your Name">
  <input type="email" placeholder="Email">
  <textarea placeholder="Message" rows="5"></textarea>
  <button type="submit">Send Message</button>
</form>

const LoginForm = () => {
  const [email, setEmail] = React.useState('');
  const [pass, setPass] = React.useState('');
  return (
    <form onSubmit={e => e.preventDefault()}>
      <input value={email} onChange={e => setEmail(e.target.value)} type="email" placeholder="Email"/>
      <input value={pass} onChange={e => setPass(e.target.value)} type="password" placeholder="Password"/>
      <button type="submit">Sign In</button>
    </form>
  );
};