ctnr.net demo

HTML

<form onsubmit="submitForm(event);">
  <textarea name="msg" rows="5" maxlength="200" placeholder="Your Message"></textarea>
  <input type="text" name="tel" autocomplete="email tel" maxlength="40" placeholder="Phone/Email" />
  <div>
    <strong aria-live="polite"></strong>
    <button name="send" type="submit">Send</button>
  </div>
</form>

CSS

body {
  background: #ccc;
}
form {
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
  align-items: stretch;
  max-width: 25rem;
  margin: 0 auto;
}
form > div {
  display: flex;
  flex-flow: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
form *[name] {
  padding: 0.2rem 0.5rem;
  font: inherit;
}

JavaScript

function submitForm(e) {
  e.preventDefault();
  let form = e.target;
  let msg = form.tel.value.replace(/\s/g, "") +
    " " + form.msg.value;

  let status = form.querySelector("[aria-live]");

  if (msg.length > 1) {
    form.send.disabled = true;
    status.textContent = "Sending...";

    fetch("https://api.ctnr.net/api/websites/alert", {
        method: "POST",
        headers: {
          "x-requested-with": "XMLHttpRequest",
          "content-type": "application/json",
        },
        body: JSON.stringify({
          id: "ay7m6_NdAhPohpNhRBLvj",
          msg: msg,
        }),
      })
      .then(res => res.json())
      .then(res => (status.textContent = res.error || "Sent."))
      .catch(err => (status.textContent = "Unknown error"))
      .finally(() => (form.send.disabled = false));
  } else {
    form.msg.focus();
  }
}