CTZN

Forms

<form action="…" method="post">
  <p class="text">
    <label>
      <span>Field label</span><br />
      <input type="text" />
    </label>
  </p>
  <p class="submit">
    <button type="submit">Submit</button>
  </p>
</form>

Placeholder

<html class="supports-placeholder">
  …
  <form action="…" method="post">
    <p class="text">
      <label>
        <span>Field label</span><br />
        <input type="text" placeholder="Field label" />
      </label>
    </p>
      <p class="submit">
        <button>Submit</button>
      </p>
  </form>
  …
</html>

The “supports-placeholder" classname is added by JavaScript. It hints to the style sheet that it’s safe to hide the field label (since it’s often the same as the placeholder).

Field with Icon

<form action="…" method="post" class="has-icon">
  <p class="text">
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-user"></use></svg>
      <span>Field label</span><br />
      <input type="text" placeholder="Field label" />
    </label>
  </p>
</form>

Multiline

<p class="text">
  <label>
    <span>Enter message (optional)</span><br />
    <textarea placeholder="Enter message (optional)"></textarea>
  </label>
</p>

Field Group

<ul class="text">
  <li>
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-envelope"></use></svg><span>Email</span><br />
      <input type="email" placeholder="Email" />
    </label>
  </li>
  <li>
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-padlock"></use></svg><span>Password</span><br />
      <input type="password" placeholder="Password" />
    </label>
  </li>
</ul>

Notes

Note about the whole form

Note with details about this field.

<form action="…" method="post" class="has-icon">
  <p>Note about the whole form</p>
  <p class="text">
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-envelope"></use></svg><span>Email</span><br />
      <input type="email" placeholder="Email" />
    </label>
    <em class="note">Note with details about this field.</em>
  </p>
  <p class="text">
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-padlock"></use></svg><span>Password</span><br />
      <input type="password" placeholder="Password" />
    </label>
  </p>
  <p class="submit">
    <button>Send</button>
  </p>
</form>

Validation Error

Oops! There’s something wrong with this field.

<p class="text error">
  <label>
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-user"></use></svg><span>Field label</span><br />
    <input type="text" placeholder="Field label" />
  </label>
</p>
<p class="validation-message">
  Oops! There’s something wrong with this field.
</p>

Validation Success

<p class="text success">
  <label>
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-user"></use></svg><span>Field label</span><br />
    <input type="text" placeholder="Field label" />
  </label>
</p>

Error (for the whole form)

Something went wrong while sending the form data.

Examples

Page Title

Cancel

Something went wrong while sending the form data.

Note about the whole form

Oops! There’s something wrong with this field.

  • Note with details about this field.

Page Title

Cancel

Page Title

Cancel

Page Title

Cancel

Page Title

Cancel
  • Oops! That email address isn’t valid.

Page Title

Cancel

Page Title

Cancel

Something went wrong while sending the form data.

Add a hashtag

Cancel

Password

Cancel

Sending

Log In

Go Back

Or

New Post

Cancel

New Post

Cancel

Delete Profile

Go Back

For security reasons

Create Account

Go Back

Password must be at least 4 characters.

Decline

Cancel

Request to join

Cancel

Send a Message

Cancel

Reset Password