updating the ui and endpoint of the mt-form

assets/css/compiled/main.css

@@ -1940,6 +1940,10 @@ select {
   margin-top: -2px;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .box-content {
   box-sizing: content-box;
 }
@@ -5388,6 +5392,10 @@ pre {
     max-width: 65ch;
   }
 
+  .sm\:basis-full {
+    flex-basis: 100%;
+  }
+
   .sm\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -5502,6 +5510,10 @@ pre {
     flex-basis: 25%;
   }
 
+  .md\:basis-full {
+    flex-basis: 100%;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -5579,6 +5591,10 @@ pre {
     display: block;
   }
 
+  .lg\:flex {
+    display: flex;
+  }
+
   .lg\:grid {
     display: grid;
   }
@@ -5615,6 +5631,14 @@ pre {
     max-width: none;
   }
 
+  .lg\:basis-1\/2 {
+    flex-basis: 50%;
+  }
+
+  .lg\:basis-1\/4 {
+    flex-basis: 25%;
+  }
+
   .lg\:grid-flow-col-dense {
     grid-auto-flow: column dense;
   }

layouts/shortcodes/mt-form.html

@@ -77,18 +77,27 @@
 </div>
 
 <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">
+    <form id='form'
+          hx-post="http://localhost:4242/mt-form"
+          hx-encoding="multipart/form-data"
+          autocomplete="on"
+          method="post"
+          target="_parent"
+          class="w-full items-center flex flex-wrap">
         <h3 class="basis-full">Mission Trip Application</h3>
         <div class="basis-full flex flex-wrap my-4">
-            <label for="firstname" class="basis-full mx-2">What is your first and last name?</label>
+            <label for="firstname" class="basis-full mx-2">What is your first and last name?
+<span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
             <br/>
-            <input type="text" id="firstname" name="firstname"
+            <input type="text" id="firstname" name="firstname" required
                    placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
             <input type="text" id="lastname" name="lastname"
                    placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}">
         </div>
         <div class="basis-full flex flex-wrap my-4">
-            <label for="parentfirstname" class="basis-full mx-2">What is your parent's first and last name?</label>
+            <label for="parentfirstname" class="basis-full mx-2">What is your parent's first and last name?
+<span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
+
             <input type="text" id="parentfirstname" name="parentfirstname"
                    class="flex-1 form-input {{ $formClasses }}"
                    placeholder="First Name">
@@ -96,13 +105,13 @@
                    class="flex-1 form-input {{ $formClasses }}"
                    placeholder="Last Name">
         </div>
-        <div class="basis-full my-4">
+        <div class="basis-full my-4 lg:flex md:flex">
-            <div class="">
+            <div class="lg:basis-1/2">
                 <label for="birthdate" class="">When were you born?</label>
                 <input type="date" id="birthdate" name="birthdate"
                        class="form-date {{ $formClasses }}">
             </div>
-            <div class="">
+            <div class="lg:basis-1/2">
                 <label for="gender" class="">Gender</label>
                 <select id="gender" name="gender" class="form-select {{ $formClasses }}">
                     <option value="Male">Male</option>
@@ -125,27 +134,27 @@
                    class="flex-auto form-input {{ $formClasses }}"
                    placeholder="Zip Code" required>
         </div>
-        <div class="flex-auto flex flex-wrap items-center">
+        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
-            <label for="cellphone" class="basis-1/4 mr-4">Cell phone</label>
+            <label for="cellphone" class="lg:basis-1/4 basis-full mr-4 ml-2">Cell phone</label>
             <input type="tel" id="cellphone" name="cellphone"
                    class="flex-auto form-input {{ $formClasses }}">
         </div>
-        <div class="flex-auto flex flex-wrap items-center">
+        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
-            <label for="parentphone" class="basis-1/4 mr-4">Parent phone</label>
+            <label for="parentphone" class="lg:basis-1/4 basis-full mr-4 ml-2">Parent phone</label>
             <input type="tel" id="parentphone" name="parentphone"
                    class="flex-auto form-input {{ $formClasses }}">
         </div>
-        <div class="basis-full flex items-center">
+        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
-            <label for="email" class="basis-1/4 mr-4">Email</label>
+            <label for="email" class="lg:basis-1/4 basis-full mr-4 ml-2">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="basis-3/4 form-input {{ $formClasses }}">
+                   class="flex-auto form-input {{ $formClasses }}">
         </div>
-        <div class="basis-full flex items-center">
+        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
-            <label for="parentemail" class="basis-1/4 mr-4">Parent's email?</label>
+            <label for="parentemail" class="lg:basis-1/4 basis-full mr-4 ml-2">Parent's email?</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="basis-3/4 form-input {{ $formClasses }}">
+                   class="flex-auto form-input {{ $formClasses }}">
         </div>
 
         <label for="school" class="basis-full mx-2 mt-12">What school do you go to?</label>