basic contact page & form

_config.yml

@@ -12,6 +12,11 @@ email:
 twitter:                BigchainDB
 disqus:                 bigchain
 
+address:
+    street:             Wichertstr. 17
+    zip:                10439
+    city:               Berlin
+    country:            Germany
 
 # Track all the things
 # --------------------

_src/_assets/javascripts/bigchain.js

@@ -8,6 +8,7 @@
 //=include bigchain/dnt.js
 
 //=include bigchain/form-earlyaccess.js
+//=include bigchain/form-contact.js
 
 jQuery(function($) {
 

_src/_assets/javascripts/bigchain/form-contact.js

@@ -0,0 +1,59 @@
+
+var FormContact = (function(w, d, $) {
+
+    'use strict';
+
+    var app, _private, _config;
+
+    _config = {
+        form:       $('#form-contact'),
+        formBtn:    $('#form-contact').find('.btn'),
+        formURL:    $('#form-contact').attr('action'),
+        formMethod: $('#form-contact').attr('method')
+    };
+
+    _private = {
+        formSubmit: function() {
+            _config.form.submit(function(e) {
+                e.preventDefault();
+
+                if ( $(this).parsley().isValid() ) {
+                    $.ajax({
+                        url: _config.formURL,
+                        type: _config.formMethod,
+                        accept: {
+                            javascript: 'application/javascript'
+                        },
+                        data: _config.form.serialize(),
+                        crossDomain: true,
+                        beforeSend: function() {
+                            _config.formBtn
+                                .addClass('disabled')
+                                .attr('value', 'Sending...');
+                        },
+                        success: function(data) {
+                            _config.form.find('.form-group').addClass('hide');
+                            _config.form.find('.alert-success').removeClass('hide');
+                            _config.formBtn.removeClass('disabled');
+                        },
+                        error: function(err) {
+                            _config.form.find('.alert-danger').removeClass('hide');
+                            _config.formBtn
+                                .removeClass('disabled')
+                                .attr('value', 'Send');
+                        }
+                    });
+                }
+            });
+        }
+    };
+
+    app = {
+        init: function() {
+            _private.formSubmit();
+        }
+    };
+
+    return app;
+
+})(window, document, jQuery);

_src/_assets/styles/bigchain.scss

@@ -45,3 +45,4 @@
 @import 'page-about';
 @import 'page-features';
 @import 'page-community';
+@import 'page-contact';

_src/_assets/styles/page-contact.scss

@@ -0,0 +1,9 @@
+//
+// Page: Contact
+// ---
+// bigchain.io
+//
+
+.contactlist {
+    p { margin-bottom: 0 }
+}

_src/_includes/form-contact.html

@@ -0,0 +1,37 @@
+
+<form id="form-contact" class="js-parsley" action="//formspree.io/{{ site.email.contact }}" method="POST" accept-charset="UTF-8">
+    <p class="form-group">
+        <input class="form-control" type="text" id="name" name="name" required>
+        <label class="form-label" for="name">Your Name</label>
+    </p>
+    <p class="form-group">
+        <input class="form-control" type="email" id="email" name="_replyto" required>
+        <label class="form-label" for="email">Your Email</label>
+    </p>
+    <p class="form-group">
+        <textarea class="form-control" id="comment" name="comment" rows="1" required></textarea>
+        <label class="form-label" for="comment">Your Message</label>
+    </p>
+    <p class="form-group">
+        <input class="btn btn-primary" type="submit" value="Send">
+    </p>
+
+    <div class="alert alert-success animation-slide-in-from-bottom hide">
+        <svg class="alert__icon icon icon-success">
+            <use xlink:href="/assets/img/sprite.svg#icon-success"></use>
+        </svg>
+        <p>
+            <strong class="alert__title">Great to hear you’re interested!</strong>
+            We’ll get in touch soon to discuss how we can work together.
+        </p>
+    </div>
+    <div class="alert alert-danger hide">
+        <svg class="alert__icon icon icon-fail">
+            <use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
+        </svg>
+        <p>
+            <strong class="alert__title">Ops, there was an error</strong>
+            Would you mind trying again?
+        </p>
+    </div>
+</form>

_src/contact.html

@@ -0,0 +1,27 @@
+---
+layout: page
+
+title: Contact
+---
+
+<section class="section section-contactform">
+    <div class="row">
+        <header class="section-header">
+            <h1 class="section-title">Get in touch</h1>
+        </header>
+
+        <div class="grid grid--full grid-small--fit grid--gutters">
+            <div class="grid__col">
+                {% include/form-contact.html %}
+            </div>
+            <div class="grid__col">
+                <div class="contactlist">
+                    <p>{{ site.address.street }}</p>
+                    <p>{{ site.address.zip }} {{ site.address.city }}</p>
+                    <p>{{ site.address.country }}</p>
+                    <p>{{ site.email.contact }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

_src/contact.md

@@ -1,5 +0,0 @@
----
-layout: page
-
-title: Contact
----