Source: _shop19-styleguide.scss, line 370
Example
Markup: components/email-signup/email-signup-header.twig
<div style="display:block;" class="cr-header-email-signup-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--head block--cr-email-signup--step-1 crEMailSignup-processed" data-drupal-selector="cr-header-email-signup-form" id="block-emailsignupblockhead">
  <div class="block--cr-email-signup__inner-wrapper">
    <div class="cr-email-signup--messages">
      <div class="esu-title-message">
        <p>Stay in the know!</p>
      </div>
      <div class="esu-initial-message">
        <p>Get regular email updates and info on what we're up to!</p>
      </div>
      <div class="esu-first-success-message">
        <p>Thanks! Your first email will be with you shortly</p>
      </div>
    </div>
    <div class="esu-errors messages messages--error"></div>
    <form action="/web/" method="post" id="cr-header-email-signup-form" accept-charset="UTF-8" data-drupal-form-fields="edit-email,edit-step1">
      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Header">
      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
        <label for="edit-email">Your email address</label>
        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email" name="email" value="" size="60" maxlength="500" placeholder="example@youremail.com">
      </div>
      <input class="step1 button js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1" name="step1" value="Subscribe">
      <input data-drupal-selector="form-bja0x4d6a3lmjjlyotlzzlq-pazuc5phi7qyduqqcya" type="hidden" name="form_build_id" value="form-BJA0X4d6a3LmJJlyotLzzlQ_pAZuc5PhI7QyduQqCYA">
      <input data-drupal-selector="edit-cr-header-email-signup-form-form-token" type="hidden" name="form_token" value="BREegNF1jBbSdnIuntqc0VFn7apoecLt3Dc0ubP8pFs">
      <input data-drupal-selector="edit-cr-header-email-signup-form" type="hidden" name="form_id" value="cr_header_email_signup_form">
      <div class="esu-second-success-message">
        <p>Great! Now we know what's right for you.</p>
      </div>
    </form>
    <div class="esu-privacy-message"><p>Our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p></div>
    <a role="button" class="close-button" href="#">
      <svg class="icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-cross"></use>
      </svg>
    </a>
  </div>
</div>

Source: _shop19-styleguide.scss, line 374
Example
Markup: components/email-signup/email-signup-standard.twig
<div class="cr-email-signup-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--standard block--cr-email-signup--step-1 block--cr-email-signup--banner crEMailSignup-processed" data-drupal-selector="cr-email-signup-form" id="block-emailsignupblockstandard">
  <div class="block--cr-email-signup__inner-wrapper">
    <div class="cr-email-signup--messages">
       <div class="esu-title-message">
        <p>Sign-up to our newsletter</p>
      </div>
      <div class="esu-initial-message">
        <p>We’ll keep you up to date with the latest Comic Relief updates, handy fundraising tips & tools as well as exciting news from Red Nose Day and Sport Relief.</p>
      </div>
      <div class="esu-first-success-message">
        <p>ESU Standard: success! (first message)</p>
      </div>
      <div class="esu-second-success-message">
        <p>ESU Standard: success! (second message)</p>
      </div>
    </div>
    <div class="esu-errors messages messages--error"></div>
    <form action="/web/test/esu" method="post" id="cr-email-signup-form" accept-charset="UTF-8" data-drupal-form-fields="edit-email--3,edit-school-phase,edit-step1--3,edit-step2">
      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Banner">
      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
        <label for="edit-email--3">Your email address</label>
        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email--3" name="email" value="" size="60" maxlength="500" placeholder="Enter your email address">
      </div>
      <div class="js-form-item form-item js-form-type-select form-type-select js-form-item-school-phase form-item-school-phase">
        <label for="edit-school-phase-button">Also send me School resources</label>
        <select data-drupal-selector="edit-school-phase" id="edit-school-phase" name="school_phase" class="form-select" style="display: none;">
          <option value="" selected="selected">-- Select age group --</option>
          <option value="EY">Early Years or Nursery</option>
          <option value="PY">Primary</option>
          <option value="SY">Secondary</option>
          <option value="FE">Further Education or Sixth-Form College</option>
          <option value="HE">Higher Education</option>
          <option value="OH">Other</option>
        </select>
        <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="edit-school-phase-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="edit-school-phase-menu" aria-haspopup="true" style="width: 100px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">-- Select age group --</span></span>
      </div>
      <input class="step1 button js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1--3" name="step1" value="Go">
      <input class="step2 button js-form-submit form-submit" data-drupal-selector="edit-step2" type="submit" id="edit-step2" name="step2" value="Go">
      <input data-drupal-selector="form-9b6qb6oimpe9zn500qwm7ijredqzatwi-g3izeutgg4" type="hidden" name="form_build_id" value="form-9B6qb6OIMpe9zn500Qwm7ijreDQZatwi_G3izEutgG4">
      <input data-drupal-selector="edit-cr-email-signup-form-form-token" type="hidden" name="form_token" value="gK9p3T0PfgFJ0-jIiF33q3Wfu4BTHzu5RvYw_A8rlIo">
      <input data-drupal-selector="edit-cr-email-signup-form" type="hidden" name="form_id" value="cr_email_signup_form">
    </form>
    <div class="esu-privacy-message">
      <p>Find out how we will use your information in our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a>
        <br> <br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.
      </p>
    </div>
  </div>
</div>
Source: _shop19-styleguide.scss, line 380
Example
Markup: components/email-signup/email-signup-fundraise.twig
<div class="cr-email-signup-fundraise-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--standard block--cr-email-signup--step-1 block--cr-email-signup--banner crEMailSignup-processed" data-drupal-selector="cr-email-signup-fundraise-form" id="block-emailsignupblockfundraise">
  <div class="block--cr-email-signup__inner-wrapper">
    <div class="cr-email-signup--messages">
      <div class="esu-title-message">
        <p>Sign-up to our newsletter</p>
      </div>
      <div class="esu-initial-message">
        <p>We’ll keep you up to date with the latest Comic Relief updates, handy fundraising tips & tools as well as exciting news from Red Nose Day and Sport Relief.</p>
      </div>
      <div class="esu-first-success-message">
        <p>ESU Fundraise: success message</p>
      </div>
    </div>
    <div class="esu-errors messages messages--error"></div>
    <form action="/web/test/esu" method="post" id="cr-email-signup-fundraise-form" accept-charset="UTF-8" data-drupal-form-fields="edit-email--2,edit-step1--2">
      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Banner">
      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
        <label for="edit-email--2">Your email address</label>
        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email--2" name="email" value="" size="60" maxlength="500" placeholder="Enter your email address">
      </div>
      <input class="step1 button js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1--2" name="step1" value="Sign Up">
      <input data-drupal-selector="form-rqvvpemkcgc5hd7jksv3ludvh6amvd-jgy6vmatcv8e" type="hidden" name="form_build_id" value="form-rqvvpeMkcgc5hd7jKSv3lUdvh6AmVD-JGY6vmaTCv8E">
      <input data-drupal-selector="edit-cr-email-signup-fundraise-form-form-token" type="hidden" name="form_token" value="yg6GwzSbKSwRFrB5Py3ASG3bQr2UbWaltDcoZuUYpx8">
      <input data-drupal-selector="edit-cr-email-signup-fundraise-form" type="hidden" name="form_id" value="cr_email_signup_fundraise_form">
    </form>
    <div class="esu-privacy-message">
      <p>Find out how we will use your information in our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a>
        <br> <br> If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.
      </p>
    </div>
  </div>
</div>
Source: _shop19-styleguide.scss, line 388
Example
Markup: components/email-signup/email-signup-workplace.twig
<div class="cr-email-signup-workplace-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--workplace block--cr-email-signup--step-1 block--cr-email-signup--banner crEMailSignup-processed" data-drupal-selector="cr-email-signup-workplace-form" id="block-emailsignupblockworkplace">
  <div class="block--cr-email-signup__inner-wrapper">
    <div class="cr-email-signup--messages">
      <div class="esu-title-message">
        <p>Sign-up to our newsletter</p>
      </div>
      <div class="esu-initial-message">
        <p>We’ll keep you up to date with the latest Comic Relief updates, handy fundraising tips & tools as well as exciting news from Red Nose Day and Sport Relief.</p>
      </div>
      <div class="esu-first-success-message">
        <p>ESU Workplace: success message</p>
      </div>
    </div>
    <div class="esu-errors messages messages--error">
      <div></div>
    </div>
    <form action="/web/test/esu" method="post" id="cr-email-signup-workplace-form" accept-charset="UTF-8" data-drupal-form-fields="edit-firstname,edit-email--4,edit-step1--4">
      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Banner">
      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-firstname form-item-firstname">
        <label for="edit-firstname">Your first name</label>
        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-firstname" type="text" id="edit-firstname" name="firstName" value="" size="60" maxlength="100" placeholder="Enter your first name">
      </div>
      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
        <label for="edit-email--4">Your email address</label>
        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email--4" name="email" value="" size="60" maxlength="500" placeholder="Enter your email address">
      </div>
      <input class="step1 button btn btn--yellow js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1--4" name="step1" value="Sign Up">
      <input data-drupal-selector="form-ir3piqq75hewphoqjybj-co-i4iwk5-zblgbyc8sqso" type="hidden" name="form_build_id" value="form-ir3PiQq75HEwpHoqjYbJ_cO-I4iwK5-ZBLgbYc8sqso">
      <input data-drupal-selector="edit-cr-email-signup-workplace-form-form-token" type="hidden" name="form_token" value="D5eVtLpvyGoOb9l0MxgyODaD28ouAReO9ExRWopMsk4">
      <input data-drupal-selector="edit-cr-email-signup-workplace-form" type="hidden" name="form_id" value="cr_email_signup_workplace_form">
    </form>
    <div class="esu-privacy-message">
      <p>Find out how we will use your information in our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a>
        <br> <br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.
      </p>
    </div>
  </div>
</div>
Source: _shop19-styleguide.scss, line 394
Example
Markup: components/email-signup/email-signup-interest.twig
<div class="cr-email-signup-register-interest-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--register-interest block--cr-email-signup--step-1 block--cr-email-signup--banner crEMailSignup-processed" data-drupal-selector="cr-email-signup-register-interest-form" id="block-emailsignupblockregisterinterest">
  <div class="block--cr-email-signup__inner-wrapper">
    <div class="cr-email-signup--messages">
      <div class="esu-title-message">
        <p>Sign-up to our newsletter</p>
      </div>
      <div class="esu-initial-message">
        <p>We’ll keep you up to date with the latest Comic Relief updates, handy fundraising tips & tools as well as exciting news from Red Nose Day and Sport Relief.</p>
      </div>
      <div class="esu-first-success-message">
        <p>ESU Register Interest: success message</p>
      </div>
    </div>
    <div class="esu-errors messages messages--error">
      <div></div>
    </div>
    <form action="/web/test/esu" method="post" id="cr-email-signup-register-interest-form" accept-charset="UTF-8" data-drupal-form-fields="edit-email--5,edit-step1--5">
      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Banner">
      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
        <label for="edit-email--5">Your email address</label>
        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email--5" name="email" value="" size="60" maxlength="500" placeholder="Enter your email address">
      </div>
      <input class="step1 button js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1--5" name="step1" value="Subscribe">
      <input data-drupal-selector="form-viyyqd1ny64-7lbarzwycso-2-zsflyjcxuvjyhekuw" type="hidden" name="form_build_id" value="form-VIYYqD1ny64_7lBArzWYcso_2-zsfLYJcxUVjYHeKUw">
      <input data-drupal-selector="edit-cr-email-signup-register-interest-form-form-token" type="hidden" name="form_token" value="7YRPGVfEFSFWIp_igbeaXZBlhOLvbP-8WQZTFyi7EXM">
      <input data-drupal-selector="edit-cr-email-signup-register-interest-form" type="hidden" name="form_id" value="cr_email_signup_register_interest_form">
    </form>
    <div class="esu-privacy-message">
      <p>Find out how we will use your information in our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a>
        <br> <br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.
      </p>
    </div>
  </div>
</div>
Source: _shop19-styleguide.scss, line 400