added required tag to address

assets/css/compiled/main.css

@@ -2478,6 +2478,10 @@ select {
   vertical-align: text-bottom;
 }
 
+.align-super {
+  vertical-align: super;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -2646,6 +2650,75 @@ select {
   color: rgba(var(--color-primary-800), var(--tw-text-opacity));
 }
 
+.text-secondary-500 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
+}
+
+.text-\[\#aaa\] {
+  --tw-text-opacity: 1;
+  color: rgb(170 170 170 / var(--tw-text-opacity));
+}
+
+.text-\[\#f00\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 0 0 / var(--tw-text-opacity));
+}
+
+.text-\[\#f22\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 34 34 / var(--tw-text-opacity));
+}
+
+.text-\[\#d22\] {
+  --tw-text-opacity: 1;
+  color: rgb(221 34 34 / var(--tw-text-opacity));
+}
+
+.text-\[\#b22\] {
+  --tw-text-opacity: 1;
+  color: rgb(187 34 34 / var(--tw-text-opacity));
+}
+
+.text-\[\#baa\] {
+  --tw-text-opacity: 1;
+  color: rgb(187 170 170 / var(--tw-text-opacity));
+}
+
+.text-\[\#b44\] {
+  --tw-text-opacity: 1;
+  color: rgb(187 68 68 / var(--tw-text-opacity));
+}
+
+.text-\[\#f44\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 68 68 / var(--tw-text-opacity));
+}
+
+.text-\[\#f66\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 102 102 / var(--tw-text-opacity));
+}
+
+.text-\[\#f26\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 34 102 / var(--tw-text-opacity));
+}
+
+.text-\[\#f29\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 34 153 / var(--tw-text-opacity));
+}
+
+.text-\[\#f39\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 51 153 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
 .\!no-underline {
   text-decoration-line: none !important;
 }

layouts/shortcodes/mt-form.html

@@ -1,4 +1,5 @@
 {{ $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" }}
+{{ $requiredField := "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" }}
 
 <script>
  function submitForm(e) {
@@ -107,19 +108,19 @@
             </div>
         </div>
         <div class="basis-full flex flex-wrap my-4">
-            <label for="street" class="basis-full">What is your address?</label>
+            <label for="street" class="basis-full">What is your address? {{ $requiredField }}</label>
             <input type="text" id="street" name="street"
                    class="basis-full form-input {{ $formClasses }}"
-                   placeholder="Street Address">
+                   placeholder="Street Address" required>
             <input type="text" id="city" name="city"
                    class="flex-auto form-input {{ $formClasses }}"
-                   placeholder="City">
+                   placeholder="City" required>
             <input type="text" id="state" name="state"
                    class="flex-auto form-input {{ $formClasses }}"
-                   placeholder="State">
+                   placeholder="State" required>
             <input type="text" id="zip" name="zip"
                    class="flex-auto form-input {{ $formClasses }}"
-                   placeholder="Zip Code">
+                   placeholder="Zip Code" required>
         </div>
         <div class="basis-full flex flex-wrap items-center my-8">
             <div class="flex-auto flex flex-wrap items-center">