Newsletter Signup Inline

<link rel="stylesheet" href="path/to/newsletter-signup-inline/styles.css">

<!-- Default style -->
<section class="nsi nsi--default" id="my-newsletter">
  <h2 class="nsi__headline">Get the weekly essay</h2>
  <p class="nsi__description">One piece on B2B pricing, every Thursday.</p>

  <form class="nsi__form" novalidate>
    <label class="nsi__label nsi__label--visually-hidden" for="nsi-email">
      Email address
    </label>
    <input
      id="nsi-email"
      class="nsi__input"
      type="email"
      placeholder="you@company.com"
      autocomplete="email"
      required
    >
    <button class="nsi__button" type="submit">Subscribe</button>
  </form>

  <p class="nsi__disclaimer">Unsubscribe anytime. No spam.</p>
  <p class="nsi__success" hidden aria-live="polite">Thanks for subscribing.</p>
  <p class="nsi__error" hidden role="alert"></p>
</section>

<script>
(function () {
  var section = document.getElementById('my-newsletter');
  var form = section.querySelector('.nsi__form');
  var input = section.querySelector('.nsi__input');
  var button = section.querySelector('.nsi__button');
  var success = section.querySelector('.nsi__success');
  var error = section.querySelector('.nsi__error');

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var email = input.value.trim();
    if (!email) return;

    input.disabled = true;
    button.disabled = true;
    error.hidden = true;

    // Place your fetch() call here.
    fetch('/api/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: email }),
    })
      .then(function (res) {
        if (!res.ok) throw new Error('Request failed');
        success.hidden = false;
        form.reset();
      })
      .catch(function () {
        error.textContent = 'Something went wrong. Check your entry and try again.';
        error.hidden = false;
        input.disabled = false;
        button.disabled = false;
      });
  });
}());
</script>