Contact form

bower.json

@@ -14,7 +14,8 @@
   ],
   "dependencies": {
     "normalize-css": "normalize.css#^4.1.1",
-    "autosize": "^3.0.18"
+    "autosize": "^3.0.18",
+    "jquery": "^3.1.1"
   },
   "install": {
     "path": "theme/static/lib"

content/pages/contact.md

@@ -6,3 +6,10 @@ Please reach out and I'll do my best to reply in a timely manner.
 Write to [mail@ant.sr](mailto:mail@ant.sr) or leave a message at 848-228-3802.
 
 Looking forward to hearing from you!
+
+<form class="xhr" action="https://api.ant.sr/api/contact" method="post">
+    <input name="name" placeholder="Name">
+    <input name="email" type="email" placeholder="Email" required>
+    <textarea name="text" placeholder="Your message" required></textarea>
+    <input type="submit" value="Send">
+</form>

theme/static/js/script.js

@@ -16,3 +16,19 @@
     nav.insertBefore(toggle, nav.firstChild);
     nav.className += "collapsed";
 })("body > div > nav");
+
+/* Submit forms using XHR */
+(function(selector) {
+    $(selector).submit(function(e) {
+        $.ajax({
+            type: 'POST',
+            url: $(selector).attr("action"),
+            data: $(selector).serialize(),
+            success: function(response) {
+                $(selector + " :input").prop("disabled", true);
+                $(selector).prepend(response);
+            }
+        });
+        return false;
+    });
+})("form.xhr");

theme/templates/base.html

@@ -89,6 +89,7 @@
     <script src="{{ SITEURL }}/theme/lib/autosize/autosize.js"></script>
     <script>autosize(document.querySelectorAll('textarea'));</script>
     {% endif %}
+    <script src="{{ SITEURL }}/theme/lib/jquery/jquery.js"></script>
     <script src="{{ SITEURL }}/theme/js/script.js"></script>
     {% include 'analytics.html' %}
 </body>