Form Pack

Ten responsive form UI patterns for common product and content workflows, with labels and useful validation structure.

10 distinct patterns6 frontend formats0 runtime dependencies

Free for personal and commercial projects. No attribution required.

Browse patterns View components

Pack options

Choose one portable format

The selected format applies to code panels and downloads.

Format

Contact Form

A responsive contact form with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><label for="contact-name">Name</label><input id="contact-name" autocomplete="name"><label for="contact-email">Email</label><input id="contact-email" type="email" autocomplete="email"><label for="contact-message">Message</label><textarea id="contact-message" rows="4"></textarea><button type="submit">Send message</button></form>
</body>
</html>

Sign In Form

A responsive sign in form with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sign In Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><label for="signin-email">Email</label><input id="signin-email" type="email" autocomplete="email"><label for="signin-password">Password</label><input id="signin-password" type="password" autocomplete="current-password"><button type="submit">Sign in</button></form>
</body>
</html>

Sign Up Form

A responsive sign up form with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sign Up Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><label for="signup-name">Name</label><input id="signup-name" autocomplete="name"><label for="signup-email">Email</label><input id="signup-email" type="email" autocomplete="email"><button type="submit">Create account</button></form>
</body>
</html>

Newsletter Form

A responsive newsletter form with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Newsletter Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><label for="newsletter-email">Email address</label><div class="ui-form__row"><input id="newsletter-email" type="email" autocomplete="email"><button type="submit">Subscribe</button></div><p>Unsubscribe at any time.</p></form>
</body>
</html>

Search Form

A responsive search form with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Search Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><label for="site-search">Search resources</label><div class="ui-form__row"><input id="site-search" type="search"><button type="submit">Search</button></div></form>
</body>
</html>

Feedback Form

A responsive feedback form with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Feedback Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><fieldset><legend>Was this page useful?</legend><label><input type="radio" name="useful" value="yes"> Yes</label><label><input type="radio" name="useful" value="no"> No</label></fieldset><label for="feedback">Comments</label><textarea id="feedback" rows="3"></textarea><button type="submit">Send feedback</button></form>
</body>
</html>

Profile Settings Form

A responsive profile settings form with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profile Settings Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><label for="display-name">Display name</label><input id="display-name" autocomplete="name" value="Alex Morgan"><label for="bio">Short bio</label><textarea id="bio" rows="3"></textarea><button type="submit">Save profile</button></form>
</body>
</html>

Address Form

A responsive address form with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Address Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><label for="street">Street address</label><input id="street" autocomplete="street-address"><div class="ui-form__row"><div><label for="city">City</label><input id="city" autocomplete="address-level2"></div><div><label for="postcode">Postcode</label><input id="postcode" autocomplete="postal-code"></div></div><button type="submit">Save address</button></form>
</body>
</html>

Password Field

A responsive password field with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Password Field</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><label for="new-password">Password</label><input id="new-password" type="password" autocomplete="new-password" aria-describedby="password-help"><p id="password-help">Use at least 12 characters.</p><button type="submit">Continue</button></form>
</body>
</html>

Form Error Summary

A responsive form error summary with explicit labels, practical autocomplete attributes and clear focus treatment.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Error Summary</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="ui-form" action="#" method="post"><div class="ui-form__error" role="alert"><h2>There is a problem</h2><a href="#summary-email">Enter a valid email address</a></div><label for="summary-email">Email</label><input id="summary-email" type="email" aria-invalid="true"><button type="submit">Submit</button></form>
</body>
</html>

Implementation

Portable UI, with clear boundaries.

These patterns provide presentation and client markup only. Add server-side validation, submission handling and security appropriate to your application.

How to use

Choose the format used by your project.
Preview and copy one pattern, or download a focused ZIP.
Replace the example content and connect controls to real application behaviour.
Test keyboard access, contrast, validation and responsive behaviour in your final context.

FAQ

Form Pack questions

What formats does the Form Pack include?

The pack provides 6 focused frontend formats. Choose one format before copying or downloading so the archive stays small.

Do these patterns require third-party packages?

No runtime package is required. Tailwind-labelled downloads expect Tailwind CSS to already be configured in the receiving project.

Can I download one pattern?

Yes. Each pattern has its own ZIP, and the page also creates a complete pack ZIP for the selected format.