User Forms

Forms with floating labels, designed for sign up and sign in.

Sign Up for Updates

An amazing tagline goes here

Name

Your Phone Number

Code Example Shortcut: z-sign-up-form

<div class="card form-container theme-light">
  <h5 class="headline center">Sign Up for Updates</h5>
  <p class="center">An amazing tagline goes here</p>
  <form>
    <div>
      <input type="text" id="name1" placeholder=" ">
      <label for="name1">Name</label>
    </div>
    <div>
      <input type="email" id="email1" placeholder=" ">
      <label for="email1">Email</label>
    </div>
    <div class="mb-3">
      <input type="tel" id="tel1" placeholder=" ">
      <label for="tel1">Your Phone Number</label>
    </div>
    <button name="submit" type="submit">Sign Up</button>
    <small class="form-footer mb-0"><a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a></small>
  </form>
</div>

Sign Into Your Account

Not a member? Start a 14 day free trial

Code Example Shortcut: z-sign-in-form

<div class="card form-container theme-light">
    <h5 class="h6 headline pb-0">Sign Into Your Account</h5>
    <form>
      <div>
        <input type="email" id="email" placeholder=" ">
        <label for="email">Email Address</label>
      </div>
      <div class="mb-3">
        <input type="password" id="pass" placeholder=" ">
        <label for="pass">Password</label>
      </div>
      <button name="submit" type="submit">Sign In</button>
      <small class="form-footer mb-0"><a href="#">Forgot Password?</a></small>
    </form>
  </div>
  <small class="text-center d-block down-10">Not a member? <span class="text-cta text-semibold">Start a 14 day free trial</span></small>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.