Forms

Sign up form

<form class="occlss-form occlss-form--sign-up">
  <div class="occlss-layout">
    <div class="occlss-form-cntrls  occlss-form-cntrls--sign-up-group occlss-layout__col occlss-layout__col--sm-12 occlss-layout__col--md-7 occlss-layout__col--bleed">
      <label class="occlss-form-cntrls__label occlss-form-cntrls__label--sign-up-title" for="email-address">Email address</label>
      <input class="occlss-form-cntrls__input " id="email-address" name="" type="text">
    </div>
    <div class="occlss-layout__col occlss-layout__col--sm-12 occlss-layout__col--md-5 occlss-layout__col--bleed occlss-form__sign-up-form-controls">
      <button type="submit" class="occlss-button occlss-button--primary occlss-button--fullwidth occlss-find-my-nearest__submit">
        Sign up
      </button>
    </div>
  </div>
</form>

When to use this component

This pattern is used to allow a user to sign up for a service or newsletter.

Changelog

2.0.0

  • container class was missing, added back occlss-form-cntrls
  • margin-bottom: 0; added to occlss-form-cntrls--sign-up-group class

1.0.0

  • Component Added