From 82b4527d08933006bbb2507b959d2f3c2e8e6b31 Mon Sep 17 00:00:00 2001
From: Chris Cochrun <chris@cochrun.xyz>
Date: Tue, 8 Nov 2022 15:23:11 -0600
Subject: [PATCH] a lot of updating to the mt-form... making my own...

---
 assets/css/compiled/main.css    | 470 ++++++++++++++++++++++++++++++++
 layouts/shortcodes/mt-form.html | 147 +++++++++-
 2 files changed, 614 insertions(+), 3 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 1c06548..366568e 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1349,6 +1349,139 @@ select {
   margin-bottom: 0;
 }
 
+.form-input,.form-textarea,.form-select,.form-multiselect {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-shadow: 0 0 #0000;
+}
+
+.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #2563eb;
+}
+
+.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+.form-input::placeholder,.form-textarea::placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+.form-input::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+.form-input::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+
+.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+}
+
+.form-checkbox,.form-radio {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #2563eb;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  --tw-shadow: 0 0 #0000;
+}
+
+.form-checkbox {
+  border-radius: 0px;
+}
+
+.form-checkbox:focus,.form-radio:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+.form-checkbox:checked,.form-radio:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.form-checkbox:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+.form-checkbox:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1449,6 +1582,10 @@ select {
   margin: 1rem;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -1771,6 +1908,22 @@ select {
   flex-grow: 1;
 }
 
+.basis-1\/2 {
+  flex-basis: 50%;
+}
+
+.basis-1 {
+  flex-basis: 0.25rem;
+}
+
+.basis-full {
+  flex-basis: 100%;
+}
+
+.basis-1\/4 {
+  flex-basis: 25%;
+}
+
 .-translate-y-8 {
   --tw-translate-y: -2rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1810,6 +1963,22 @@ select {
   flex-wrap: wrap;
 }
 
+.place-content-center {
+  place-content: center;
+}
+
+.place-items-center {
+  place-items: center;
+}
+
+.content-center {
+  align-content: center;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1956,6 +2125,11 @@ select {
   background-color: rgba(var(--color-neutral), 0.5);
 }
 
+.bg-neutral-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
+}
+
 .bg-neutral-100\/50 {
   background-color: rgba(var(--color-neutral-100), 0.5);
 }
@@ -2046,6 +2220,11 @@ select {
      object-position: left;
 }
 
+.object-center {
+  -o-object-position: center;
+     object-position: center;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -2054,6 +2233,10 @@ select {
   padding: 0.5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -2303,6 +2486,11 @@ select {
   color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
 }
 
+.text-\[\#fff\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .text-primary-300 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-300), var(--tw-text-opacity));
@@ -2338,6 +2526,16 @@ select {
   color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
 }
 
+.text-neutral-100 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
+}
+
+.text-neutral-50 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-50), var(--tw-text-opacity));
+}
+
 .\!no-underline {
   text-decoration-line: none !important;
 }
@@ -2354,6 +2552,26 @@ select {
   text-decoration-color: rgba(var(--color-neutral-300), 1);
 }
 
+.placeholder-neutral-100::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(var(--color-neutral-100), var(--tw-placeholder-opacity));
+}
+
+.placeholder-neutral-100::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(var(--color-neutral-100), var(--tw-placeholder-opacity));
+}
+
+.placeholder-neutral-300::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(var(--color-neutral-300), var(--tw-placeholder-opacity));
+}
+
+.placeholder-neutral-300::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(var(--color-neutral-300), var(--tw-placeholder-opacity));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2378,6 +2596,24 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-offset-2 {
+  --tw-ring-offset-width: 2px;
+}
+
+.ring-offset-neutral-50 {
+  --tw-ring-offset-color: rgba(var(--color-neutral-50), 1);
+}
+
+.ring-offset-neutral-500 {
+  --tw-ring-offset-color: rgba(var(--color-neutral-500), 1);
+}
+
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px);
   -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);
@@ -3123,10 +3359,137 @@ body:has(#menu-controller:checked) {
   }
 }
 
+.file\:m-4::file-selector-button {
+  margin: 1rem;
+}
+
+.file\:mr-4::file-selector-button {
+  margin-right: 1rem;
+}
+
+.file\:rounded-full::file-selector-button {
+  border-radius: 9999px;
+}
+
+.file\:rounded-lg::file-selector-button {
+  border-radius: 0.5rem;
+}
+
+.file\:border-0::file-selector-button {
+  border-width: 0px;
+}
+
+.file\:border-2::file-selector-button {
+  border-width: 2px;
+}
+
+.file\:bg-neutral-50::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity));
+}
+
+.file\:bg-primary-50::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-50), var(--tw-bg-opacity));
+}
+
+.file\:bg-neutral-500::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
+}
+
+.file\:bg-primary-500::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
+}
+
+.file\:bg-primary-100::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
+}
+
+.file\:bg-neutral-400::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-400), var(--tw-bg-opacity));
+}
+
+.file\:bg-neutral-100::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity));
+}
+
+.file\:bg-neutral-200::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-200), var(--tw-bg-opacity));
+}
+
+.file\:p-4::file-selector-button {
+  padding: 1rem;
+}
+
+.file\:py-2::file-selector-button {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.file\:px-4::file-selector-button {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.file\:py-4::file-selector-button {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.file\:text-sm::file-selector-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.file\:font-semibold::file-selector-button {
+  font-weight: 600;
+}
+
+.file\:text-neutral-700::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
+}
+
+.file\:text-primary-700::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-700), var(--tw-text-opacity));
+}
+
+.file\:text-primary-300::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-300), var(--tw-text-opacity));
+}
+
+.file\:text-neutral-100::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
+}
+
 .first\:mt-8:first-child {
   margin-top: 2rem;
 }
 
+.checked\:bg-primary-500:checked {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
+}
+
+.checked\:bg-neutral-500:checked {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
+}
+
+.checked\:text-neutral-500:checked {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
+}
+
 .hover\:border-transparent:hover {
   border-color: transparent;
 }
@@ -3151,6 +3514,11 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
 }
 
+.hover\:bg-neutral-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
+}
+
 .hover\:text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@@ -3192,6 +3560,75 @@ body:has(#menu-controller:checked) {
   text-underline-offset: 2px;
 }
 
+.hover\:ring-2:hover {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.hover\:ring-primary-500:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity));
+}
+
+.hover\:file\:bg-neutral-100::file-selector-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity));
+}
+
+.hover\:file\:bg-primary-300::file-selector-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
+}
+
+.hover\:file\:p-9::file-selector-button:hover {
+  padding: 2.25rem;
+}
+
+.hover\:file\:px-5::file-selector-button:hover {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.hover\:file\:px-6::file-selector-button:hover {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.hover\:file\:text-primary-100::file-selector-button:hover {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-100), var(--tw-text-opacity));
+}
+
+.hover\:file\:text-primary-700::file-selector-button:hover {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-700), var(--tw-text-opacity));
+}
+
+.hover\:file\:text-primary-500::file-selector-button:hover {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-500), var(--tw-text-opacity));
+}
+
+.hover\:file\:ring-2::file-selector-button:hover {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.hover\:file\:ring-primary-500::file-selector-button:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity));
+}
+
+.hover\:file\:ring-offset-2::file-selector-button:hover {
+  --tw-ring-offset-width: 2px;
+}
+
+.hover\:file\:ring-offset-transparent::file-selector-button:hover {
+  --tw-ring-offset-color: transparent;
+}
+
 .focus\:translate-y-0:focus {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3202,6 +3639,16 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
 }
 
+.focus\:text-primary-500:focus {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-500), var(--tw-text-opacity));
+}
+
+.focus\:text-primary-200:focus {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-200), var(--tw-text-opacity));
+}
+
 .focus\:outline-dotted:focus {
   outline-style: dotted;
 }
@@ -3214,6 +3661,29 @@ body:has(#menu-controller:checked) {
   outline-color: transparent;
 }
 
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus\:ring-offset-neutral-500:focus {
+  --tw-ring-offset-color: rgba(var(--color-neutral-500), 1);
+}
+
+.focus\:ring-offset-transparent:focus {
+  --tw-ring-offset-color: transparent;
+}
+
 .group:hover .group-hover\:text-primary-600 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
diff --git a/layouts/shortcodes/mt-form.html b/layouts/shortcodes/mt-form.html
index 1073204..0c6b1f9 100644
--- a/layouts/shortcodes/mt-form.html
+++ b/layouts/shortcodes/mt-form.html
@@ -1,3 +1,4 @@
+{{ $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 m-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" }}
 
 <script>
   function process() {
@@ -6,11 +7,12 @@
       var parentAgree = document.getElementById("adult-agree").checked;
       console.log(parentAgree);
       if (studentAgree && parentAgree) {
-          document.getElementById('form').hidden = false
+          document.getElementById('mt-form').hidden = false
           console.log("WOOHOO");
       }
       else {
           document.getElementById('form').hidden = true
+          document.getElementById('mt-form').hidden = false
           console.log("NEGATORY");
       }
   }
@@ -19,15 +21,154 @@
 
 <div class="m-4">
   <div class="p-2">
-    <input type="checkbox" name="student-agree" id="student-agree" onclick="process()" />
+      <input type="checkbox" name="student-agree" id="student-agree"
+             onclick="process()" class="form-checkbox {{ $formClasses }}" />
     <label for="student-agree">I agree to the above</label>
   </div>
   <div class="p-2">
-    <input type="checkbox" name="adult-agree" id="adult-agree" onclick="process()" />
+      <input type="checkbox" name="adult-agree" id="adult-agree"
+             onclick="process()" class="form-checkbox {{ $formClasses }}" />
     <label for="adult-agree">Parent agrees to the above</label>
   </div>
 </div>
 
+<div id="mt-form" class="form text-lg">
+    <form action="" autocomplete="on" method="post" target="_parent" class="items-center flex flex-wrap">
+        <h3 class="basis-full">Mission Trip Application</h3>
+        <div class="basis-1/2">
+            <label for="firstname" class="">What is your first name?</label>
+            <br/>
+            <input type="text" id="firstname" name="firstname"
+                   placeholder="First Name" class="form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2">
+            <label for="lastname" class="">What is your last name</label>
+            <br/>
+            <input type="text" id="lastname" name="lastname"
+                   placeholder="Last Name" class="form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2">
+            <label for="parentfirstname" class="">What is your parent's first name?</label>
+            <input type="text" id="parentfirstname" name="parentfirstname"
+                   class="form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2">
+            <label for="parentlastname" class="">What is your parent's last name?</label>
+            <input type="text" id="parentlastname" name="parentlastname"
+                   class="form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2">
+            <label for="birthday" class="">When were you born?</label>
+            <input type="date" id="birthday" name="birthday"
+                   class="form-date {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2">
+            <label for="age" class="">Age</label>
+            <input type="number" id="age" name="age" class="form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2">
+            <label for="gender" class="">Gender</label>
+            <select id="gender" name="gender" class="form-select {{ $formClasses }}">
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+            </select>
+        </div>
+        <div class="basis-1/2"></div>
+        <div class="basis-1/2 mt-10">
+            <label for="street" class="">Street Address</label>
+            <input type="text" id="street" name="street" class="form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2">
+                <label for="city" class="basis-1/4">City</label>
+                <input type="text" id="city" name="city" class="basis-1/4 form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2">
+                <label for="state" class="basis-1/4">State</label>
+                <input type="text" id="state" name="state" class="basis-1/4 form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2 mb-10">
+                <label for="zip" class="basis-1/4">Zip Code</label>
+                <input type="text" id="zip" name="zip" class="basis-1/4 form-input {{ $formClasses }}">
+        </div>
+        <label for="image" class="">Please give us a picture you'd like to use on prayer cards.</label>
+        <input type="file" id="image" name="image" class="file:m-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500 ">
+        <br/>
+        <label for="cellphone" class="">Cell phone</label>
+        <input type="tel" id="cellphone" name="cellphone"
+               pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-input {{ $formClasses }}">
+        <label for="homephone" class="">Home phone</label>
+        <input type="tel" id="homephone" name="homephone"
+               pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-input {{ $formClasses }}">
+        <label for="email" class="">Email</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]+)*$"
+               class="form-input {{ $formClasses }}">
+        <label for="school" class="">School</label>
+        <input type="text" id="school" name="school" class="form-input {{ $formClasses }}">
+
+        <div class="basis-full">
+            <label for="grade" class="">Grade</label>
+            <br/>
+            <input type="radio" id="grade" name="grade" value="8" class="form-input {{ $formClasses }}">
+            <label for="grade" class="">8th</label>
+            <br/>
+            <input type="radio" id="grade" name="grade" value="freshman" class="form-input {{ $formClasses }}">
+            <label for="grade" class="">Freshman</label>
+            <br/>
+            <input type="radio" id="grade" name="grade" value="sophomore" class="form-input {{ $formClasses }}">
+            <label for="grade" class="">Sophomore</label>
+            <br/>
+            <input type="radio" id="grade" name="grade" value="junior" class="form-input {{ $formClasses }}">
+            <label for="grade" class="">Junior</label>
+            <br/>
+            <input type="radio" id="grade" name="grade" value="senior" class="form-input {{ $formClasses }}">
+            <label for="grade" class="">Senior</label>
+        </div>
+        <label for="parentemail" class="">ParentEmail</label>
+        <input type="email" id="parentemail" name="parentemail"
+               pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
+               class="form-input {{ $formClasses }}">
+        <div class="basis-1/2">
+            <label for="pastorfirstname" class="">What is your pastor's first name?</label>
+            <input type="text" id="pastorfirstname" name="pastorfirstname"
+                   class="form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-1/2">
+            <label for="pastorlastname" class="">What is your pastor's last name?</label>
+            <input type="text" id="pastorlastname" name="pastorlastname"
+                   class="form-input {{ $formClasses }}">
+        </div>
+        <div class="basis-full">
+            <label for="churchattendance" class="">Do you attend church regularly?</label>
+            <br/>
+            <input type="radio" id="churchattendance" name="churchattendance"
+                   value="yes" class="form-input {{ $formClasses }}">
+            <label for="churchattendance" class="">Yes</label>
+            <br/>
+            <input type="radio" id="churchattendance" name="churchattendance"
+                   value="no" class="form-input {{ $formClasses }}">
+            <label for="churchattendance" class="">No</label>
+            <br/>
+            <input type="radio" id="churchattendance" name="churchattendance"
+                   value="other" class="form-input {{ $formClasses }}">
+            <label for="churchattendance" class="">Other</label>
+        </div>
+        <div class="basis-1/2">
+            <label for="tfcgroup" class="">TFC Group</label>
+            <select id="tfcgroup" name="tfcgroup" class="form-select {{ $formClasses }}">
+                <option value="phillipsburg">Phillipsburg</option>
+                <option value="atwood">Atwood</option>
+                <option value="northern-valley">Northern Valley</option>
+                <option value="southern-valley">Southern Valley</option>
+                <option value="thunder-ridge">Thunder Ridge</option>
+                <option value="logan">Logan</option>
+                <option value="codell">Codell</option>
+                <option value="colby">Colby</option>
+            </select>
+        </div>
+    </form>
+</div>
+
 <div class="h-12" style="display: flex;"></div>
 
 <iframe