diff --git a/bower.json b/bower.json index ddec0832c332c39627198465a587fa7034e2362e..a67615ffd837d467f58c5251e6c2c7e023517b76 100644 --- a/bower.json +++ b/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" diff --git a/content/pages/contact.md b/content/pages/contact.md index 856e92e0c8e76742e4d60bd53a2eb12cfd200724..64ac4d3dca49aaef03bfd5bebb6eadbc60417020 100644 --- a/content/pages/contact.md +++ b/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> diff --git a/theme/static/js/script.js b/theme/static/js/script.js index db623969bea8c91f3cb93f287f99a578a800facb..2722547487c26b24baa5157723592acf723abe16 100644 --- a/theme/static/js/script.js +++ b/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"); diff --git a/theme/templates/base.html b/theme/templates/base.html index 6450c32ef22d6d5a4fea1a1f5aa7f91cddec5ca6..6c15fe20dd5dd72ba079b0b8310030014eca9b75 100644 --- a/theme/templates/base.html +++ b/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>