embed the google form

## What
This embeds the registration form into our site so that we can get google analytics about how many people make it through to the form itself. This also modifies all of the join links to just go to the new /form endpoint which is literally just the embedded google form.

Going forward, this let's us see how many impressions of the form we're getting versus how many direct impressions of the site we're getting to give us an estimate of how many people really click through to the form and are interested in joining. This combined with number of intake means we can try and calculate if a change to the site has actual effects to conversion.

_data/strings.yml

@@ -25,7 +25,6 @@ join:
   title: Attend our next group
   subtitle: No commitment, come sit in and see how you feel.
   button: Join
-  join_url: https://forms.gle/L64N8goVx42bHz7F7
 
 # Testimonials
 testimonials:
@@ -39,3 +38,6 @@ faqs:
   title: FAQs
   subtitle: Find answers to frequently asked questions
 
+form:
+  id: form
+  join_url: https://forms.gle/L64N8goVx42bHz7F7?embedded=true

_includes/form.html

@@ -0,0 +1,28 @@
+{% assign s = site.data.strings['form'] %}
+<section id="{{ s.id }}">
+    <style>
+        .spinner {
+            position:absolute;
+            text-align: center;
+        }
+
+        .loader {
+            border: 16px solid #f3f3f3; /* Light grey */
+            border-top: 16px solid #3498db; /* Blue */
+            border-radius: 50%;
+            width: 120px;
+            height: 120px;
+            animation: spin 1s linear infinite;
+            text-align: center;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+    <div id="spinner" class="spinner">
+        <div class="loader"></div>
+    </div>
+    <iframe src="{{ s.join_url }}" width="100%" height="3200px" frameborder="0" marginheight="0" marginwidth="0" onload="document.getElementById('spinner').style.display='none';">Loading…</iframe>
+</section>

_includes/header.html

@@ -6,7 +6,7 @@
             <div class="intro-text col-md-6">
                 <div class="intro-heading">{{ s.short_mission }}</div>
                 <div class="button-container">
-                    <a href="{{ '/#join' | prepend: site.baseurl }}" class="page-scroll btn btn-xl">
+                    <a href="{{ '/form' | prepend: site.baseurl }}" class="page-scroll btn btn-xl">
                         {{ s.join_button }}</a>
                     <div class="intro-subtext">{{s.meeting_date}}</div>
                 </div>

_includes/join.html

@@ -5,7 +5,7 @@
             <h2 class="section-heading">{{ s.title }}</h2>
             <h3 class="section-subheading">{{ s.subtitle }}</h3>
             <div class="button-container">
-                <a href="{{ s.join_url }}" class="btn btn-xl mx-auto">{{ s.button }}</a>
+                <a href="{{ '/form' | prepend: site.baseurl }}" class="btn btn-xl mx-auto">{{ s.button }}</a>
             </div>
         </section>
     </div>

_includes/nav.html

@@ -25,7 +25,7 @@
                         <a class="page-scroll" href="{{ '/#benefits' | prepend: site.baseurl}}">{{s.about_title}}</a>
                     </li>
                     <li>
-                        <a class="page-scroll" href="{{ '/#join' | prepend: site.baseurl}}">{{s.join_title}}</a>
+                        <a class="page-scroll" href="{{ '/form' | prepend: site.baseurl}}">{{s.join_title}}</a>
                     </li>
                     <li>
                         <a href="{{ '/agreements' | prepend: site.baseurl }}">{{s.agreements_title}}</a>

form.md

@@ -0,0 +1,8 @@
+---
+layout: single
+navbarClass: 'navbar-shrink'
+permalink: /form/
+title: The Mankind Project Japan Registration Form
+---
+
+{% include form.html %}