From 1f46c2daeeeae671cff5a3f479664f1b03a2fee8 Mon Sep 17 00:00:00 2001
From: Chris Cochrun <chris@cochrun.xyz>
Date: Fri, 12 May 2023 10:03:37 -0500
Subject: [PATCH] forms: updated the contact-form so it is natural and easy

---
 layouts/shortcodes/contact-form.html | 94 +++++++++++++++++++++++++---
 1 file changed, 87 insertions(+), 7 deletions(-)

diff --git a/layouts/shortcodes/contact-form.html b/layouts/shortcodes/contact-form.html
index 9a1b36b..fab3fde 100644
--- a/layouts/shortcodes/contact-form.html
+++ b/layouts/shortcodes/contact-form.html
@@ -1,7 +1,87 @@
-<iframe
-class="contact-form"
-src="https://tbl.tfcconnection.org/dashboard/#/nc/form/97bdb635-2a1e-4df6-90be-2e05a17bb5f5"
-frameborder="0"
-width="100%"
-height="1200"
-style="background: transparent; border: 1px solid #ddd"></iframe>
+{{ $formClasses := "bg-neutral-500 text-neutral-50 placeholder-neutral-300 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-transparent my-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" }}
+{{ $requiredField := "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" }}
+
+<script>
+ function submitForm(e) {
+     e.preventDefault();
+     const form = document.getElementById('form');
+     const data = new FormData(form);
+
+     if (data.get("email") == "") {
+         document.getElementById('warning-email').style.visibility = 'visible';
+         document.getElementById('warning-email').style.height = '';
+         document.getElementById('warning-email').style.margin = '';
+         return false;
+     } else {
+         document.getElementById('warning-email').style.visibility = 'hidden';
+         document.getElementById('warning-email').style.height = '0';
+         document.getElementById('warning-email').style.margin = '0';
+     }
+
+     var xhr = new XMLHttpRequest();
+     xhr.onreadystatechange = function() {
+         if (this.readyState == 4 && this.status == 200) {
+             window.location.href = '/thankyou/';
+
+         }
+     };
+     xhr.open("POST", "https://n8n.tfcconnection.org/webhook/contact-form");
+     xhr.send(data);
+     console.log(data);
+ }
+
+ function process() {
+     /* document.getElementById('mt-form').hidden = false */
+     document.getElementById('warning-email').style.visibility = 'hidden';
+     document.getElementById('warning-email').style.height = '0';
+     document.getElementById('warning-email').style.margin = '0';
+ }
+ document.addEventListener('DOMContentLoaded', process);
+</script>
+
+<div id="mt-form" class="form text-lg w-full">
+    <form id='form' onsubmit="submitForm(event)" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
+        <h3 class="basis-full">Contact Form</h3>
+        <div class="basis-full flex flex-wrap my-4">
+            <label for="firstname" class="basis-full">What is your name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
+            <br/>
+            <input type="text" id="name" name="name"
+                   placeholder="Name" class="flex-1 form-input {{ $formClasses }}">
+        </div>
+
+        <label for="email" class="basis-full">Your Email <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
+        <input type="email" id="email" name="email"
+               pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
+               placeholder="bob@frank.xyz"
+               class="basis-full form-input {{ $formClasses }}">
+
+        <label for="staff" class="basis-full mt-4">Would you like to email a specific staff member? <span class='inline-block text-[#f39] text-sm align-sub'>leave on "any" if you don't need someone specific.</span></label>
+        <select id="staff" name="staff" class="mb-4 flex-auto form-select {{ $formClasses }}">
+            <option value="tfc@tfcconnection.org">Any</option>
+            <option value="ethan@tfcconnection.org">Ethan Rose</option>
+            <option value="lavonne@tfcconnection.org">Lavonne Ponstein</option>
+            <option value="brian@tfcconnection.org">Brian Fischer</option>
+            <option value="janice@tfcconnection.org">Janice Lundquist</option>
+            <option value="april@tfcconnection.org">April Teves</option>
+            <option value="chris@tfcconnection.org">Chris Cochrun</option>
+            <option value="rob@tfcconnection.org">Rob Lewis</option>
+            <option value="lewis@tfcconnection.org">Lewis Smith</option>
+            <option value="billy@tfcconnection.org">Billy Cayou</option>
+            <option value="dani@tfcconnection.org">Dani Rouse</option>
+        </select>
+
+        <label for="message" class="basis-full mt-4">Message <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
+        <textarea type="message" id="message" name="message"
+                  class="basis-full form-input h-48 {{ $formClasses }}"></textarea>
+        <div class="basis-full mt-8">
+            <button type="submit" class="content-right rounded-lg bg-primary-700 h-12 w-24 focus:bg-primary-900 focus:ring focus:ring-primary-700 hover:bg-primary-900 float-right">Submit</button>
+        </div>
+
+        <div id="warning-email" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
+            <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
+                {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} Make sure you have included an email so we can contact you.
+            </span>
+        </div>
+
+    </form>
+</div>