making mt-form work

assets/css/compiled/main.css

@@ -1554,10 +1554,6 @@ select {
   top: 0px;
 }
 
-.right-0 {
-  right: 0px;
-}
-
 .top-20 {
   top: 5rem;
 }
@@ -1566,6 +1562,10 @@ select {
   z-index: 30;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1687,6 +1687,10 @@ select {
   margin-right: 1rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .-mr-2 {
   margin-right: -0.5rem;
 }
@@ -1715,18 +1719,10 @@ select {
   margin-bottom: 0.75rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .mb-12 {
   margin-bottom: 3rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1767,18 +1763,14 @@ select {
   margin-top: 0.5rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .\!mb-9 {
   margin-bottom: 2.25rem !important;
 }
 
-.ml-auto {
-  margin-left: auto;
-}
-
-.mr-auto {
-  margin-right: auto;
-}
-
 .mb-\[2px\] {
   margin-bottom: 2px;
 }
@@ -1847,24 +1839,8 @@ select {
   height: 2rem;
 }
 
-.h-\[120px\] {
+.h-\[300px\] {
-  height: 120px;
+  height: 300px;
-}
-
-.h-\[100px\] {
-  height: 100px;
-}
-
-.h-\[150px\] {
-  height: 150px;
-}
-
-.h-\[800px\] {
-  height: 800px;
-}
-
-.h-\[1000px\] {
-  height: 1000px;
 }
 
 .max-h-\[5rem\] {
@@ -1875,10 +1851,6 @@ select {
   min-height: 0px;
 }
 
-.min-h-\[148px\] {
-  min-height: 148px;
-}
-
 .w-12 {
   width: 3rem;
 }
@@ -1911,10 +1883,6 @@ select {
   min-width: 0px;
 }
 
-.min-w-full {
-  min-width: 100%;
-}
-
 .min-w-\[1\.8rem\] {
   min-width: 1.8rem;
 }
@@ -1947,18 +1915,10 @@ select {
   max-width: 36rem;
 }
 
-.max-w-\[1600px\] {
-  max-width: 1600px;
-}
-
 .max-w-3xl {
   max-width: 48rem;
 }
 
-.max-w-\[64rem\] {
-  max-width: 64rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1967,14 +1927,14 @@ select {
   flex: 1 1 auto;
 }
 
-.flex-initial {
-  flex: 0 1 auto;
-}
-
 .flex-none {
   flex: none;
 }
 
+.flex-initial {
+  flex: 0 1 auto;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -2252,10 +2212,6 @@ select {
   --tw-gradient-to: rgba(var(--color-secondary-700), 1);
 }
 
-.to-neutral {
-  --tw-gradient-to: rgba(var(--color-neutral), 1);
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -2351,11 +2307,6 @@ select {
   padding-right: 0.5rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .py-\[1px\] {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -2396,22 +2347,6 @@ select {
   padding-left: 1rem;
 }
 
-.pl-8 {
-  padding-left: 2rem;
-}
-
-.pr-8 {
-  padding-right: 2rem;
-}
-
-.pt-4 {
-  padding-top: 1rem;
-}
-
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2420,12 +2355,8 @@ select {
   padding-bottom: 1rem;
 }
 
-.pl-\[24px\] {
+.pt-4 {
-  padding-left: 24px;
+  padding-top: 1rem;
-}
-
-.pr-\[24px\] {
-  padding-right: 24px;
 }
 
 .text-center {
@@ -2602,11 +2533,6 @@ select {
   color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
 }
 
-.text-primary-800 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
 .\!no-underline {
   text-decoration-line: none !important;
 }
@@ -2637,14 +2563,6 @@ select {
   opacity: 0;
 }
 
-.opacity-30 {
-  opacity: 0.3;
-}
-
-.opacity-70 {
-  opacity: 0.7;
-}
-
 .mix-blend-normal {
   mix-blend-mode: normal;
 }
@@ -2659,12 +2577,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-2xl {
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2683,12 +2595,6 @@ select {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-.backdrop-blur-2xl {
-  --tw-backdrop-blur: blur(40px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3369,13 +3275,6 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
-.thumbnail_card {
-  height: 250px;
-  background-repeat:no-repeat;
-  background-size:cover;
-  background-position:center;
-}
-
 .single_hero_basic {
   background-repeat:no-repeat;
   background-size:cover;
@@ -3406,14 +3305,6 @@ body:has(#menu-controller:checked) {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 
-.anchor {
-  display: block;
-  position: relative;
-  top: -100px;
-  height: 0px;
-  visibility: hidden;
-}
-
 @media (min-width: 640px) {
   .thumbnail {
     min-width: 100%;
@@ -3868,10 +3759,6 @@ body:has(#menu-controller:checked) {
   --tw-gradient-to: rgba(var(--color-secondary-800), 1);
 }
 
-.dark .dark\:to-neutral-800 {
-  --tw-gradient-to: rgba(var(--color-neutral-800), 1);
-}
-
 .dark .dark\:prose-invert {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -3944,15 +3831,6 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
 }
 
-.dark .dark\:text-primary-200 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-200), var(--tw-text-opacity));
-}
-
-.dark .dark\:opacity-60 {
-  opacity: 0.6;
-}
-
 .dark .dark\:mix-blend-multiply {
   mix-blend-mode: multiply;
 }
@@ -4115,10 +3993,6 @@ body:has(#menu-controller:checked) {
     height: 18rem;
   }
 
-  .md\:h-\[200px\] {
-    height: 200px;
-  }
-
   .md\:h-56 {
     height: 14rem;
   }
@@ -4303,9 +4177,3 @@ body:has(#menu-controller:checked) {
     width: 25%;
   }
 }
-
-@media (min-width: 1536px) {
-  .\32xl\:w-1\/5 {
-    width: 20%;
-  }
-}

content/mt-form.md

@@ -5,6 +5,8 @@ layout: simple
 sharingLinks: false
 
 ---
+Here are the [parent](/mt-parent-form), [teacher](/mt-teacher-form), and [church-related](/mt-church-form) references forms! Please click the appropriate one for them!
+
 ## Mission Trip Agreement
 > We cannot accept your application if you can't agree to the following.
 

layouts/shortcodes/mt-form.html

@@ -12,7 +12,7 @@
      data.append("age", age);
 
      var xhr = new XMLHttpRequest();
-     xhr.open("POST", "https://n8n.tfcconnection.org/webhook-test/mt-application");
+     xhr.open("POST", "https://n8n.tfcconnection.org/webhook/mt-application");
      xhr.send(data);
      console.log(data);
      console.log("Hallo!");
@@ -157,28 +157,37 @@
             <label for="grade" class="">Senior</label>
         </div>
         <div class="basis-full flex flex-wrap my-4">
-            <label for="pastorfirstname" class="basis-full">What is your pastor's first and last name?</label>
+            <label for="pastorfirstname" class="basis-full">What is your pastor's name and number?</label>
             <input type="text" id="pastorfirstname" name="pastorfirstname"
                    class="flex-auto form-input {{ $formClasses }}"
                    placeholder="First Name">
             <input type="text" id="pastorlastname" name="pastorlastname"
                    class="flex-auto form-input {{ $formClasses }}"
                    placeholder="Last Name">
+            <input type="text" id="pastorphone" name="pastorphone"
+                   class="flex-auto form-input {{ $formClasses }}"
+                   placeholder="Phone Number">
         </div>
-        <div class="basis-full my-4">
+        <div class="basis-full my-4 flex flex-wrap items-center">
-            <label for="churchattendance" class="">Do you attend church regularly?</label>
+            <label for="church" class="basis-full">What church do you attend?</label>
-            <br/>
+            <input type="text" id="church" name="church"
+                   class="basis-full form-input {{ $formClasses }}">
+            <label for="churchattendance" class="basis-full mt-8">Do you attend church regularly?</label>
+            <div class="basis-full flex flex-wrap items-center">
                 <input type="radio" id="churchattendance" name="churchattendance"
-                   value="yes" class="form-input {{ $formClasses }}" checked>
+                       value="yes" class="flex-none form-input {{ $formClasses }}" checked>
-            <label for="churchattendance" class="">Yes</label>
+                <label for="churchattendance" class="flex-auto">Yes</label>
-            <br/>
+            </div>
+            <div class="basis-full flex flex-wrap items-center">
                 <input type="radio" id="churchattendance" name="churchattendance"
-                   value="no" class="form-input {{ $formClasses }}">
+                       value="no" class="flex-none form-input {{ $formClasses }}">
-            <label for="churchattendance" class="">No</label>
+                <label for="churchattendance" class="flex-auto">No</label>
-            <br/>
+            </div>
+            <div class="basis-full flex flex-wrap items-center">
                 <input type="radio" id="churchattendance" name="churchattendance"
-                   value="other" class="form-input {{ $formClasses }}">
+                       value="other" class="flex-none form-input {{ $formClasses }}">
-            <label for="churchattendance" class="">Other</label>
+                <input type="text" class="flex-auto form-input {{ $formClasses }}" placeholder="Other">
+            </div>
         </div>
         <div class="basis-full flex flex-wrap my-4">
             <div class="basis-1/2 flex flex-wrap items-center">
@@ -304,6 +313,24 @@
                       class="form-input w-full h-64 {{ $formClasses }}"
                       placeholder=""></textarea>
         </div>
+        <label for="registration" class="my-4 basis-full">
+            Would you like to pay the registration fee now or later?
+        </label>
+        <div class="basis-full">
+            <input type="radio" value="now" id="registration" name="registration"
+                   class="form-input {{ $formClasses }}">
+            <label for="registration" class="">
+                Now - $25
+            </label>
+        </div>
+        <div class="basis-full">
+            <input type="radio" value="later" id="registration" name="registration"
+                   class="form-input {{ $formClasses }}">
+            <label for="registration" class="">
+                Later - Send $25 to the TFC Office
+            </label>
+        </div>
+
         <div class="basis-full">
             <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>