pages/_includes/scripts/newsletter.liquid

<div
  class="newsletter-form-container"
  {% if include.center %}
    style="margin: 20px"
  {% endif %}
>
  <form
    class="newsletter-form"
    action="https://app.loops.so/api/newsletter-form/{{ site.newsletter.endpoint }}"
    method="POST"
    style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
  >
    <input
      class="newsletter-form-input"
      name="newsletter-form-input"
      type="email"
      placeholder="user@example.com"
      required=""
    >

    <button
      type="submit"
      class="newsletter-form-button"
      style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
    >
      subscribe
    </button>

    <button
      type="button"
      class="newsletter-loading-button"
      style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
    >
      Please wait...
    </button>
  </form>

  <div
    class="newsletter-success"
    style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
  >
    <p class="newsletter-success-message">You're subscribed!</p>
  </div>

  <div
    class="newsletter-error"
    style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
  >
    <p class="newsletter-error-message">Oops! Something went wrong, please try again</p>
  </div>

  <button
    class="newsletter-back-button"
    type="button"
    onmouseout='this.style.textDecoration="none"'
    onmouseover='this.style.textDecoration="underline"'
  >
    &larr; Back
  </button>
</div>

<script>
  function submitHandler(event) {
    event.preventDefault();
    var container = event.target.parentNode;
    var form = container.querySelector('.newsletter-form');
    var formInput = container.querySelector('.newsletter-form-input');
    var success = container.querySelector('.newsletter-success');
    var errorContainer = container.querySelector('.newsletter-error');
    var errorMessage = container.querySelector('.newsletter-error-message');
    var backButton = container.querySelector('.newsletter-back-button');
    var submitButton = container.querySelector('.newsletter-form-button');
    var loadingButton = container.querySelector('.newsletter-loading-button');

    const rateLimit = () => {
      errorContainer.style.display = 'flex';
      errorMessage.innerText = 'Too many signups, please try again in a little while';
      submitButton.style.display = 'none';
      formInput.style.display = 'none';
      backButton.style.display = 'block';
    };

    // Compare current time with time of previous sign up
    var time = new Date();
    var timestamp = time.valueOf();
    var previousTimestamp = localStorage.getItem('loops-form-timestamp');

    // If last sign up was less than a minute ago
    // display error
    if (previousTimestamp && Number(previousTimestamp) + 60000 > timestamp) {
      rateLimit();
      return;
    }
    localStorage.setItem('loops-form-timestamp', timestamp);

    submitButton.style.display = 'none';
    loadingButton.style.display = 'flex';

    var formBody = 'userGroup=&email=' + encodeURIComponent(formInput.value);
    fetch(event.target.action, {
      method: 'POST',
      body: formBody,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
      .then((res) => [res.ok, res.json(), res])
      .then(([ok, dataPromise, res]) => {
        if (ok) {
          // If response successful
          // display success
          success.style.display = 'flex';
          form.reset();
        } else {
          // If response unsuccessful
          // display error message or response status
          dataPromise.then((data) => {
            errorContainer.style.display = 'flex';
            errorMessage.innerText = data.message ? data.message : res.statusText;
          });
        }
      })
      .catch((error) => {
        // check for cloudflare error
        if (error.message === 'Failed to fetch') {
          rateLimit();
          return;
        }
        // If error caught
        // display error message if available
        errorContainer.style.display = 'flex';
        if (error.message) errorMessage.innerText = error.message;
        localStorage.setItem('loops-form-timestamp', '');
      })
      .finally(() => {
        formInput.style.display = 'none';
        loadingButton.style.display = 'none';
        backButton.style.display = 'block';
      });
  }
  function resetFormHandler(event) {
    var container = event.target.parentNode;
    var formInput = container.querySelector('.newsletter-form-input');
    var success = container.querySelector('.newsletter-success');
    var errorContainer = container.querySelector('.newsletter-error');
    var errorMessage = container.querySelector('.newsletter-error-message');
    var backButton = container.querySelector('.newsletter-back-button');
    var submitButton = container.querySelector('.newsletter-form-button');

    success.style.display = 'none';
    errorContainer.style.display = 'none';
    errorMessage.innerText = 'Oops! Something went wrong, please try again';
    backButton.style.display = 'none';
    formInput.style.display = 'flex';
    submitButton.style.display = 'flex';
  }

  var formContainers = document.getElementsByClassName('newsletter-form-container');

  for (var i = 0; i < formContainers.length; i++) {
    var formContainer = formContainers[i];
    var handlersAdded = formContainer.classList.contains('newsletter-handlers-added');
    if (handlersAdded) continue;
    formContainer.querySelector('.newsletter-form').addEventListener('submit', submitHandler);
    formContainer.querySelector('.newsletter-back-button').addEventListener('click', resetFormHandler);
    formContainer.classList.add('newsletter-handlers-added');
  }
</script>

<noscript>
  <style>
    .newsletter-form-container {
      display: none;
    }
  </style>
</noscript>