kimsible/submitter.html

## submitter.html
<!DOCTYPE html>
<html>
<head>
<title>Muletter</title>
<meta name=robots content=noindex>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
</head>
<body>
  <form id=form action=https://url-to-server/subscribers method=POST>
    <fieldset>
      <legend><label for=email>Email</label></legend>
      <input id=email placeholder=you@host.com type=email name=email>
      <button name=submit type=submit>Subscribe</button>
    </fiedlset>
  </form>
  <style>
  body, h1 {
    text-align: center;
  }
  h1, fieldset {
    display: inline-block;
    text-align: left;
  }
  @media all and (max-width: 300px) {
    input, button, img {
      width: 100%;
    }
  }
  </style>
  <!--[if IE]>
  <style>
  #form {
    display: none;
  }
  #ie {
    font-size: 13px;
  }
  </style>
  <div id="ie">
    <p>Your web browser is outdated.</p>
    <a href="http://outdatedbrowser.com">http://outdatedbrowser.com</a>
  </div>
  <![endif]-->
  <script>
  var form = document.getElementById('form');

  form.addEventListener('submit', function (event) {
    var xhr, onfail;

    event.preventDefault();

    if (form.email.value.trim() === '') {
      return;
    }

    form.email.disabled = true;
    form.submit.disabled = true;

    xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
      if(xhr.readyState === XMLHttpRequest.DONE) {
        try {
          xhr.responseJSON = JSON.parse(xhr.responseText);
        } catch(e) {
          xhr.responseJSON = null;
        }
      }
    };

    xhr.addEventListener('load', function () {
      if (this.status === 200) {
        form.email.labels[0].style = 'color: green; font-style: italic';
        form.email.labels[0].innerText = 'Subscribed';
      } else {
        form.submit.disabled = '';
        form.email.disabled = '';
        form.email.focus();
        form.email.labels[0].style = 'color: red; font-style: italic';
        form.email.labels[0].innerText = this.responseJSON.message;
      }
    });

    onfail = function () {
      form.submit.disabled = '';
      form.email.disabled = '';
      form.email.focus();
      form.email.labels[0].style = 'color: orange; font-style: italic';
      form.email.labels[0].innerText = 'Failed Subscription';
    };

    xhr.addEventListener('abort', onfail);
    xhr.addEventListener('error', onfail);
    xhr.addEventListener('timeout', onfail);
    xhr.open(form.method, form.action);
    xhr.send('email=' + form.email.value);
  });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Muletter</title>
	<meta name=robots content=noindex>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
	</head>
	<body>
	<form id=form action=https://url-to-server/subscribers method=POST>
	<fieldset>
	<legend><label for=email>Email</label></legend>
	<input id=email placeholder=you@host.com type=email name=email>
	<button name=submit type=submit>Subscribe</button>
	</fiedlset>
	</form>
	<style>
	body, h1 {
	text-align: center;
	}
	h1, fieldset {
	display: inline-block;
	text-align: left;
	}
	@media all and (max-width: 300px) {
	input, button, img {
	width: 100%;
	}
	}
	</style>
	<!--[if IE]>
	<style>
	#form {
	display: none;
	}
	#ie {
	font-size: 13px;
	}
	</style>
	<div id="ie">
	<p>Your web browser is outdated.</p>
	<a href="http://outdatedbrowser.com">http://outdatedbrowser.com</a>
	</div>
	<![endif]-->
	<script>
	var form = document.getElementById('form');

	form.addEventListener('submit', function (event) {
	var xhr, onfail;

	event.preventDefault();

	if (form.email.value.trim() === '') {
	return;
	}

	form.email.disabled = true;
	form.submit.disabled = true;

	xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function () {
	if(xhr.readyState === XMLHttpRequest.DONE) {
	try {
	xhr.responseJSON = JSON.parse(xhr.responseText);
	} catch(e) {
	xhr.responseJSON = null;
	}
	}
	};

	xhr.addEventListener('load', function () {
	if (this.status === 200) {
	form.email.labels[0].style = 'color: green; font-style: italic';
	form.email.labels[0].innerText = 'Subscribed';
	} else {
	form.submit.disabled = '';
	form.email.disabled = '';
	form.email.focus();
	form.email.labels[0].style = 'color: red; font-style: italic';
	form.email.labels[0].innerText = this.responseJSON.message;
	}
	});

	onfail = function () {
	form.submit.disabled = '';
	form.email.disabled = '';
	form.email.focus();
	form.email.labels[0].style = 'color: orange; font-style: italic';
	form.email.labels[0].innerText = 'Failed Subscription';
	};

	xhr.addEventListener('abort', onfail);
	xhr.addEventListener('error', onfail);
	xhr.addEventListener('timeout', onfail);
	xhr.open(form.method, form.action);
	xhr.send('email=' + form.email.value);
	});
	</script>
	</body>
	</html>