Fix message sending

_includes/send_message.html

@@ -1,17 +1,37 @@
-<iframe
-  width="0"
-  height="0"
-  border="0"
-  name="dummyframe"
-  id="dummyframe"
-  style="display:none !important"
-></iframe>
+<script>
+  async function handleSendMessage(event) {
+    event.preventDefault();
+    const form = event.target;
+    const formData = new FormData(form);
+    const jsonData = Object.fromEntries(formData.entries());
+    const btn = document.getElementById("btnSendMessage");
+    const btnOriginalValue = btn.value;
+    btn.disabled = true;
+    btn.value = "Sending...";
+    document.body.style.cursor = "wait";
+
+    try {
+      const response = await fetch(form.action, {
+        method: form.method,
+        body: JSON.stringify(jsonData),
+      });
+      const result = await response.text();
+      alert(result);
+      form.reset();
+    } catch (error) {
+      alert(error);
+    } finally {
+      document.body.style.cursor = "default";
+      btn.disabled = false;
+      btn.value = btnOriginalValue;
+    }
+  }
+</script>
 
 <form
   action="https://u0cr80njxa.execute-api.us-east-1.amazonaws.com/deploy/send-message"
   method="post"
-  onsubmit="this.submit(); alert('Your message was sent, thanks.'); this.reset(); return false;"
-  target="dummyframe"
+  onsubmit="handleSendMessage(event)"
 >
   <table style="width: 100%;display: table;max-width:600px;">
     <tr>
@@ -29,7 +49,7 @@
       </td>
     </tr>
     <tr>
-      <td colspan="2"><input type="submit" value="Send" /></td>
+      <td colspan="2"><input type="submit" value="Send" id="btnSendMessage" /></td>
     </tr>
   </table>
 </form>

about.md

@@ -38,6 +38,9 @@ You can find my current contact info on Github at [dzirtusss](https://github.com
 </div>
 
 <br />
+Or send me a message via the form below:
+
+{% include send_message.html %}
 
 <div class="contact-info">
 Some old articles about me from pre-dev life as published in: