<div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--error">
    <form class="subscribe-form">
        <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
        <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
    </form>
    <div class="subscribe-form-status">
        <span class="subscribe-form-status__message js-subscribe-status-message">Please enter a valid email address.</span>
        <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
    </div>
    <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
</div>
<div class="subscribe-form-wrapper subscribe-form-wrapper--{{modifier}} js-subscribe-form js-subscribe-form--{{jsModifier}}">
  <form class="subscribe-form">
    <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="{{placeholder}}"{{#if autocomplete}} autocomplete="{{autocomplete}}"{{/if}}>
    <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">{{submit}}</span>
      {{#unless excludeSubmitIcon}}
      {{render '@icons--submit-mail'}}
      {{/unless}}
    </button>
  </form>
  <div class="subscribe-form-status">
    <span class="subscribe-form-status__message js-subscribe-status-message">{{status.message}}</span>
    <span class="subscribe-form-status__close js-subscribe-status-close-button">
      {{render '@icons--close-large'}}
    </span>
  </div>
  <span class="subscribe-form-legal">
    {{legal.description}} <a class="subscribe-form-legal__link" href="{{legal.link.path}}">{{legal.link.label}}</a>
  </span>
</div>
{
  "modifier": "default",
  "jsModifier": "error",
  "placeholder": "Your Email",
  "autocomplete": "email",
  "submit": "Subscribe",
  "legal": {
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    "link": {
      "label": "Privacy Policy",
      "path": "#"
    }
  },
  "status": {
    "message": "Please enter a valid email address."
  }
}
  • Content:
    (function (window) {
      'use strict';
    
      const subscribe = document.querySelector('.js-subscribe-form');
      const subscribeInput = document.querySelector('.js-subscribe-form-input');
      const focusedSubscribeClass = 'js-subscribe-form--focused';
      const successStatusClass = 'js-subscribe-form--success';
      const errorStatusClass = 'js-subscribe-form--error';
    
      function subscribeFocus(e) {
        // This class is not removed on blur because that prevents the ability to
        // click links within this text.
        subscribe.classList.add(focusedSubscribeClass);
      }
    
      function statusClose(e) {
        subscribe.classList.remove(successStatusClass, errorStatusClass);
      }
    
      if (subscribe && subscribeInput) {
        const statusCloseButton = subscribe.querySelector('.js-subscribe-status-close-button');
    
        subscribeInput.addEventListener('focus', subscribeFocus);
        statusCloseButton.addEventListener('click', statusClose);
      }
    
    })(this);
    
  • URL: /components/raw/subscribe-form/subscribe-form.js
  • Filesystem Path: src/components/01-elements/forms/subscribe-form/subscribe-form.js
  • Size: 933 Bytes
  • Content:
    .subscribe-form {
      @include clearfix;
    
      .js-subscribe-form--success & {
        display: none;
      }
    
      @include breakpoint($breakpoint-md) {
        display: flex;
      }
    }
    
    // Note:
    //
    // The @input--button-input component is now responsible for _most_ of this
    // components styles. Specifically, it handles:
    //
    // - `.subscribe-form__submit`,
    // - `.subscribe-form__submit-label`,
    // - `.subscribe-form__smalll-submit-label`
    //
    // The remaining styles here are specific to classes added to the markup by (or
    // in support of) `subscribe-form.js`, and to the `*--mini` variant of the
    // subscribe form.
    .subscribe-form__input {
      js-subscribe-form--success & {
        display: none;
      }
    
      .js-subscribe-form--error & {
        border-color: $color-error;
      }
    
      @include breakpoint($breakpoint-md) {
        .subscribe-form-wrapper--mini & {
          width: calc(100% - 50px);
        }
      }
    }
    
    .subscribe-form__submit {
      .js-subscribe-form--success & {
        display: none;
      }
    
      .js-subscribe-form--error & {
        background-color: $color-error;
      }
    
      @include breakpoint($breakpoint-md) {
        .subscribe-form-wrapper--mini & {
          width: 50px;
          height: 50px;
    
          .icon {
            display: inline-block;
          }
        }
      }
    }
    
    .subscribe-form__submit-label {
      @include breakpoint($breakpoint-md) {
        .subscribe-form-wrapper:not(.subscribe-form-wrapper--mini) & {
          display: inline;
        }
      }
    }
    
    .subscribe-form-status {
      display: none;
      position: relative;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
    
      .js-subscribe-form--success &,
      .js-subscribe-form--error & {
        display: block;
        margin: 15px 0 10px;
    
        @include breakpoint($breakpoint-lg) {
          margin-bottom: 0;
        }
      }
    
      .js-subscribe-form--success & {
        color: $color-dark;
        font-weight: $font-weight-normal;
    
        @include breakpoint($breakpoint-lg) {
          color: $color-darkest;
          font-size: 2rem;
        }
      }
    
      .js-subscribe-form--error & {
        color: $color-error;
      }
    }
    
    .subscribe-form-status__close {
      display: none;
      position: absolute;
      top: 1px;
      right: 0;
      cursor: pointer;
    
      .js-subscribe-form--success & {
        display: block;
      }
    }
    
    .subscribe-form-legal {
      display: block;
      position: relative;
      height: 0;
      clear: both;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
      visibility: hidden;
    
      .js-subscribe-form--focused & {
        height: 100%;
        margin-top: 10px;
        visibility: visible;
      }
    }
    
    .subscribe-form-legal__link {
      color: $color-darkest;
      font-weight: $font-weight-bold;
      text-decoration: none;
    
      &:hover {
        text-decoration: underline;
      }
    }
    
  • URL: /components/raw/subscribe-form/subscribe-form.scss
  • Filesystem Path: src/components/01-elements/forms/subscribe-form/subscribe-form.scss
  • Size: 2.6 KB

Implement the markup without any success/error modifier class or status message. Additional JS will need to be added to handle form validation and submission. In the case of a successful submission, add the js-subscribe-form--success modifier class to the .js-subscribe-form element. In the case of an error, add the js-subscribe-form--error modifier class to that element. In either case, add a relevant status message to the .js-subscribe-status-message element.