From 0957b2cd700a83cac0d016eb67cbcb018591edfe Mon Sep 17 00:00:00 2001
From: Yannick <musayann@octangrp.com>
Date: Wed, 29 Apr 2020 14:56:57 +0200
Subject: [PATCH] Submit the contact us form using javascript

Added tinyforms js compatibitlity with the form and added different form
submission stages such as the loading and success stage
---
 app/views/home/index.html.erb | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index a164553..110502d 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -14,7 +14,9 @@
           ].sample %>
         </h1>
         <p class="tag-line is-size-5">
-          Link your online forms to <span class="google-sheets backend-logo"><%= image_tag 'google_sheets-icon.svg' %> Google Sheets</span> or <span class="airtable backend-logo"><%= image_tag 'airtable-icon.svg' %> Airtable</span> and receive form submissions in your favorite spreadsheet tool.
+          Link your online forms to <span class="google-sheets backend-logo"><%= image_tag 'google_sheets-icon.svg' %>
+            Google Sheets</span> or <span class="airtable backend-logo"><%= image_tag 'airtable-icon.svg' %>
+            Airtable</span> and receive form submissions in your favorite spreadsheet tool.
         </p>
         <p class="call-to-action">
           <%= link_to "Get started", signup_url, class: 'is-uppercase button is-rounded is-primary has-text-white a-menu' %>
@@ -186,7 +188,8 @@
       <p class="paragraph">
         We are building tinyforms to make your work easier! Let us know what we can do for you.
       </p>
-      <form method="POST" class="contact-form has-text-left" action="https://tinyforms.herokuapp.com/s/mT4qT3SjGczmKpFhKXdw4YRW">
+      <form data-tinyforms="true" data-tinyforms-submitted="myCallback" id="contact-us-form" method=" POST"
+        action="https://tinyforms.herokuapp.com/s/mT4qT3SjGczmKpFhKXdw4YRW" enctype="multipart/form-data">
         <div class="columns is-centered">
           <div class="column is-one-third">
             <div class="field">
@@ -202,13 +205,36 @@
               </div>
             </div>
             <div class="control has-text-centered">
-              <button class="button is-primary">Submit</button>
+              <button id="contact-us-form-submit-button" class="button is-primary">Submit</button>
+              <span id="contact-us-form-loading-state" style="display: none">Loading...</span>
             </div>
           </div>
         </div>
       </form>
+      <div id="contact-us-form-success-message" style="display: none">
+        <div class="columns is-centered">
+          <div class="column is-one-third">
+            <h3 class="is-size-5">
+              Thank you for reaching out!
+            </h3>
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 
 </div>
+<script>
+  var form = document.getElementById('contact-us-form');
+  form.addEventListener('submit', function (e) {
+    document.getElementById("contact-us-form-submit-button").style.display = 'none';
+    document.getElementById("contact-us-form-loading-state").style.display = 'inline-block';
+  });
 
+  function myCallback(submission) {
+    document.getElementById("contact-us-form").style.display =
+    'none'; // the event detail.submission holds the submission data
+    document.getElementById("contact-us-form-success-message").style.display =
+    'block'; // the event detail.submission holds the submission data
+  }
+</script>
\ No newline at end of file