Get an endpoint
Get an endpoint Sign in

Docs AJAX without writing JavaScript

Bay 05One script tag

#AJAX without writing JavaScript

Want the stay-on-the-page feel without writing the fetch yourself? Add our tiny helper script and a data-sendm8 attribute to your form. It sends the form in the background (file uploads included), disables the button while it’s sending, and shows a message when it’s done.

contact.html
<script src="https://sendm8.com/s/v1.js" defer></script>

<form action="https://sendm8.com/f/k3x9q2m7ab" method="POST"
      data-sendm8 data-sendm8-success="Thanks! We’ll be in touch.">
  <label>Your email <input name="email" type="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button>Send</button>
</form>
  • No JavaScript? Still works. The form posts the normal way and visitors land on your thank-you page, so nobody gets stuck.
  • data-sendm8-success: the message to show, or a selector like #thanks for an element to reveal. The default is “Thanks! Message sent.” The form is cleared afterwards.
  • data-sendm8-error: a selector for where errors go. Without it we add a role="alert" paragraph to the form. The text is the API’s own plain-English error, like “This form isn’t accepting submissions right now.”
  • Listen for sendm8:success (event.detail.id) and sendm8:error (event.detail.message, code, status) on the form. Call event.preventDefault() to skip the built-in message and do your own thing.
  • Opt a form out with data-sendm8="off". For a manual send, window.sendm8.submit(form) returns a promise of { ok, id, error }.
optional.js
const form = document.querySelector("form[data-sendm8]");

form.addEventListener("sendm8:success", (event) => {
  console.log("Stored as", event.detail.id);
});

form.addEventListener("sendm8:error", (event) => {
  console.warn(event.detail.code, event.detail.message);
});