all the form interaction, prepare ajax submitting, ref #2

_src/_assets/javascripts/bigchain.js

@@ -6,6 +6,8 @@
 //=include bigchain/forms.js
 //=include bigchain/smoothscroll.js
 
+//=include bigchain/form-earlyaccess.js
+
 jQuery(function($) {
 
     //
@@ -14,6 +16,7 @@ jQuery(function($) {
     GoogleAnalytics.init();
     Forms.init();
     SmoothScroll.init();
+    FormEarlyAccess.init();
 
     $('.hero .logo').on('animationend webkitAnimationEnd oAnimationEnd',
         function(e) {

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

@@ -0,0 +1,58 @@
+
+var FormEarlyAccess = (function(w, d, $) {
+
+    'use strict';
+
+    var app, _private, _config;
+
+    _config = {
+        form:       $('#form-earlyaccess'),
+        formBtn:    $('#form-earlyaccess').find('.btn'),
+        formURL:    $('#form-earlyaccess').attr('action'),
+        formMethod: $('#form-earlyaccess').attr('metthod')
+    };
+
+    _private = {
+        formSubmit: function() {
+            _config.form.submit(function(e) {
+                e.preventDefault();
+
+                if ( $(this).parsley().isValid() ) {
+                    $.ajax({
+                        url: _config.formURL,
+                        method: _config.formMethod,
+                        data: $(this).serialize(),
+                        // dataType: 'json',
+                        // contentType: 'application/json',
+                        // 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');
+
+                            //GoogleAnalytics.gaEventEarlyAccess();
+                        },
+                        error: function(err) {
+                            _config.form.find('.alert-danger').removeClass('hide');
+                            _config.formBtn.removeClass('disabled');
+                        }
+                    });
+                }
+            });
+        }
+    };
+
+    app = {
+        init: function() {
+            _private.formSubmit();
+        }
+    };
+
+    return app;
+
+})(window, document, jQuery);

_src/_assets/styles/bigchain.scss

@@ -24,6 +24,7 @@
 @import 'bigchain/_sections';
 @import 'bigchain/_alerts';
 @import 'bigchain/_footer';
+@import 'bigchain/_utilities';
 
 // Content types
 //@import 'bigchain/content-page';

_src/_assets/styles/bigchain/_forms.scss

@@ -75,7 +75,7 @@
     &:invalid:not(.is-empty) ~ .form-label,
     &.parsley-error ~ .form-label,
     &.parsley-success ~ .form-label {
-        transform: translate3d(0, -1rem, 0) scale(.75);
+        transform: translate3d(0, -($spacer), 0) scale(.75);
         transform-origin: left top;
     }
 }

_src/_assets/styles/bigchain/_sections.scss

@@ -38,7 +38,7 @@
 .section-title {
     font-size: $font-size-h3;
     margin-top: 0;
-    margin-bottom: 0;
+    margin-bottom: ($spacer * 2);
 
     &:after {
         content: "";

_src/_assets/styles/bigchain/_utilities.scss

@@ -0,0 +1,21 @@
+//
+// Utilities
+// ---
+// bigchain.io
+//
+
+.invisible {
+    visibility: hidden !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+.text-hide {
+    font: "0/0" a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+}

_src/_assets/styles/bigchain/_variables.scss

@@ -46,7 +46,7 @@ $font-size-root:            18px !default;
 
 $font-size-base:            1rem !default;
 $font-size-lg:              1.25rem !default;
-$font-size-sm:              0.875rem !default;
+$font-size-sm:              0.75rem !default;
 $font-size-xs:              0.75rem !default;
 
 $font-size-h1:              3rem !default;

_src/index.html

@@ -56,13 +56,12 @@ front_page: true
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">Whitepaper</h1>
+            <p class="section-description">Coming soon</p>
         </header>
-        <p class="section-description">
+        
-            <svg class="icon">
+        <svg class="icon">
-                <use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
+            <use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
-            </svg>
+        </svg>
-            Coming soon
-        </p>
     </div>
 </section>
 
@@ -70,10 +69,10 @@ front_page: true
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">Early Access</h1>
+            <p class="section-description">For early access and inquiries, enter your contact information below</p>
         </header>
-        <p class="section-description">For early access and inquiries, enter your contact information below</p>
 
-        <form action="" id="form-earlyaccess" class="js-parsley">
+        <form id="form-earlyaccess" class="js-parsley" action="" method="POST">
             <p class="form-group">
                 <input class="form-control" type="text" id="name" name="name" required>
                 <label class="form-label" for="name">Your Name</label>
@@ -89,6 +88,25 @@ front_page: true
             <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>
     </div>
 </section>