make contact form work

* closes #17

README.md

@@ -185,7 +185,7 @@ Follows [ascribe/javascript](https://github.com/ascribe/javascript) which itself
 
 Try to not use any jQuery, always prefer vanilla JavaScript.
 
-At the moment, jQuery is only used for the newsletter subscription for its simple `$.ajax` functionality, and neither `XMLHttpRequest` or `fetch` seem to work with MailChimp.
+At the moment, jQuery is only used for the form submissions for its simple `$.ajax` functionality, and neither `XMLHttpRequest` or `fetch` seem to work with MailChimp.
 
 # Authors & Contributors
 

_config.yml

@@ -18,7 +18,7 @@ login:
 
 # Form actions
 forms:
-    contact: '#'
+    contact: '//formspree.io/contact@ipdb.io'
     newsletter: "//foundation.us15.list-manage.com/subscribe/post?u=036bac2d4e3a3ea3de876a8dd&id=8a21e3e9ca"
 
 # Urls

_src/_assets/js/page-contact.js

@@ -0,0 +1,37 @@
+/* global jQuery */
+
+jQuery(($) => {
+    const _config = {
+        form: $('#form-contact'),
+        formBtn: $('#form-contact').find('.button'),
+        formURL: $('#form-contact').attr('action'),
+        formMethod: $('#form-contact').attr('method')
+    }
+
+    _config.form.submit((e) => {
+        e.preventDefault()
+
+        $.ajax({
+            url: _config.formURL,
+            method: _config.formMethod,
+            data: $(this).serialize(),
+            dataType: 'json',
+            beforeSend() {
+                _config.formBtn
+                    .addClass('disabled')
+                    .attr('value', 'Sending...')
+            },
+            success(data) {
+                _config.form.find('.form__group').hide()
+                _config.form.find('.alert--success').removeClass('hide')
+                _config.formBtn.removeClass('disabled')
+            },
+            error(err) {
+                _config.form.find('.alert--danger').removeClass('hide')
+                _config.formBtn
+                    .removeClass('disabled')
+                    .attr('value', 'Send')
+            }
+        })
+    })
+})

_src/_assets/scss/page-contact.scss

@@ -1,5 +1,11 @@
 @import 'variables';
 
+.page--contact {
+    .row--narrow {
+        max-width: ($screen-md-min / 1.25);
+    }
+}
+
 .company__name {
     font-size: $font-size-large;
     margin-bottom: $spacer / 4;

_src/_includes/form-contact.html

@@ -1,14 +1,14 @@
 <div class="grid grid--full grid-medium--columns grid--gutters">
     <div class="grid__col grid__col--4">
 
-        <form class="form" action="{{ config.site.forms.contact }}">
+        <form class="form form--contact" id="form-contact" action="{{ config.site.forms.contact }}" method="POST" accept-charset="UTF-8">
             <div class="form__group required">
                 <label class="form__label" for="name">Your Name</label>
                 <input class="form__control" type="text" id="name" name="name" required placeholder=" ">
             </div>
             <div class="form__group required">
                 <label class="form__label" for="email">Your Email</label>
-                <input class="form__control" type="email" id="email" name="email" required placeholder=" ">
+                <input class="form__control" type="email" id="email" name="_replyto" required placeholder=" ">
             </div>
             <div class="form__group required">
                 <label class="form__label" for="comment">Your message</label>
@@ -20,6 +20,21 @@
             <div class="form__group">
                 <input class="button button-primary" type="submit" value="Submit">
             </div>
+
+            <div class="alert alert--success hide">
+                <p>
+                    <strong class="alert__title">Great to hear from  you!</strong>
+                    We’ll get in touch soon.
+                </p>
+            </div>
+            <div class="alert alert--danger hide">
+                <p>
+                    <strong class="alert__title">Oops, there was an error</strong>
+                    Would you mind trying again?
+                </p>
+            </div>
+
+            <input type="hidden" name="_subject" value="New contact form submission" />
         </form>
 
     </div>

_src/contact.md

@@ -6,6 +6,7 @@ subtitle: Get in touch with IPDB Foundation
 
 narrow: true
 css: page-contact
+js: page-contact
 ---
 
 ## Get in touch