fix: better consent error required visability and constant presence of labels (#655)

Author: ivke995

apps/website/src/components/BaseContactForm.astro

@@ -178,7 +178,11 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
         const errorSpan = form?.querySelector(`#error-text-value-${input.id}`);
         const placeholderSpan = form?.querySelector(`#label-value-${input.id}`);
 
-        placeholderSpan?.classList.add("hidden");
+        placeholderSpan?.classList.add(
+          "-translate-y-[37px]",
+          "-translate-x-[17px]",
+          "absolute",
+        );
         errorSpan?.classList.add("!inline", "text-red-500");
         if (errorSpan) errorSpan.textContent = errorMessage;
       };
@@ -213,23 +217,35 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
         form?.querySelector<HTMLInputElement>("#form-full-name");
       const consentInput =
         form?.querySelector<HTMLInputElement>("#form-consent");
+      const consentLabel =
+        form?.querySelector<HTMLLabelElement>("#form-consent-text");
 
       if (form && nameInput && emailInput && messageInput && consentInput) {
         form.addEventListener("click", (e) => {
           if (!(e.currentTarget instanceof HTMLFormElement)) return;
-          const isInputTarget = e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
+          const isInputTarget =
+            e.target instanceof HTMLInputElement ||
+            e.target instanceof HTMLTextAreaElement;
           if (isInputTarget && e.target.type !== "checkbox") {
             const errorSpan = e.currentTarget.querySelector(
               `#error-text-value-${e.target.id}`,
             );
             const placeholderSpan = e.currentTarget.querySelector(
               `#label-value-${e.target.id}`,
             );
-            placeholderSpan?.classList.remove("hidden");
+            placeholderSpan?.classList.remove(
+              "-translate-y-[37px]",
+              "-translate-x-[17px]",
+              "absolute",
+            );
             errorSpan?.classList.remove("!inline", "text-red-500");
           }
           if (isInputTarget && e.target.type === "checkbox") {
             consentInput.classList.replace("border-red-600", "border-gray-300");
+            consentLabel?.classList.replace(
+              "text-red-600",
+              "[&_b]:text-[#67a807]",
+            );
             consentInput.classList.remove("border-2");
           }
         });
@@ -284,6 +300,10 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
                 "border-gray-300",
                 "border-red-600",
               );
+
+              consentLabel?.classList.remove("text-secondary", "text-neutral-50", "[&_b]:text-[#67a807]");
+              consentLabel?.classList.add("text-red-600");
+
               consentInput?.classList.add("border-2");
             }
             return;

apps/website/src/components/Field.astro

@@ -122,7 +122,7 @@ const fieldId = isTextArea ? props.textAreaProps.id : props.inputProps.id
       },
     )}
   >
-    <span id=`label-value-${fieldId}`>{label}</span>
+    <span id=`label-value-${fieldId}` class="transition-transform">{label}</span>
     <span id=`error-text-value-${fieldId}` class="truncate text-ellipsis">{errorText || "Invalid field"}</span>
   </label>
   <div

apps/website/src/components/staff-agmentation/GetYourPlanForm.astro

@@ -5,7 +5,9 @@ import "../../styles/loader.css";
 import * as formContent from "../../content/contact/get-your-plan-form.md";
 ---
 
-<div class="col-span-6 lg:col-span-6 lg:col-start-1 md:row-start-2 xl:col-start-2 xl:col-span-5">
+<div
+  class="col-span-6 lg:col-span-6 lg:col-start-1 md:row-start-2 xl:col-start-2 xl:col-span-5"
+>
   <form
     id="get-your-plan-form"
     class="group/contact-us mx-auto bg-white rounded-xl flex-col py-7 gap-2 px-7"
@@ -59,7 +61,8 @@ import * as formContent from "../../content/contact/get-your-plan-form.md";
           set:html={formContent.frontmatter.consent}
           id="form-consent-text"
           for="form-consent"
-          class="text-[#3C3843] [&>em]:not-italic [&>em]:font-semibold cursor-pointer"
+          class="[&>em]:not-italic [&_b]:text-[#67a807] [&>em]:font-semibold cursor-pointer text-sm sm:text-base"
+          ,
         />
       </div>
       <button
@@ -139,7 +142,11 @@ import * as formContent from "../../content/contact/get-your-plan-form.md";
         const errorSpan = form?.querySelector(`#error-text-value-${input.id}`);
         const placeholderSpan = form?.querySelector(`#label-value-${input.id}`);
 
-        placeholderSpan?.classList.add("hidden");
+        placeholderSpan?.classList.add(
+          "-translate-y-[37px]",
+          "-translate-x-[17px]",
+          "absolute",
+        );
         errorSpan?.classList.add("!inline", "text-red-500");
         if (errorSpan) errorSpan.textContent = errorMessage;
       };
@@ -166,6 +173,8 @@ import * as formContent from "../../content/contact/get-your-plan-form.md";
         form?.querySelector<HTMLInputElement>("#form-full-name");
       const consentInput =
         form?.querySelector<HTMLInputElement>("#form-consent");
+      const consentLabel =
+        form?.querySelector<HTMLLabelElement>("#form-consent-text");
 
       if (form && emailInput && nameInput && consentInput) {
         form.addEventListener("click", (e) => {
@@ -178,11 +187,19 @@ import * as formContent from "../../content/contact/get-your-plan-form.md";
             const placeholderSpan = e.currentTarget.querySelector(
               `#label-value-${e.target.id}`,
             );
-            placeholderSpan?.classList.remove("hidden");
+            placeholderSpan?.classList.remove(
+              "-translate-y-[37px]",
+              "-translate-x-[17px]",
+              "absolute",
+            );
             errorSpan?.classList.remove("!inline", "text-red-500");
           }
           if (isInputTarget && e.target.type === "checkbox") {
             consentInput.classList.replace("border-red-600", "border-gray-300");
+            consentLabel?.classList.replace(
+              "text-red-600",
+              "[&_b]:text-[#67a807]",
+            );
             consentInput.classList.remove("border-2");
           }
         });
@@ -229,6 +246,10 @@ import * as formContent from "../../content/contact/get-your-plan-form.md";
                 "border-gray-300",
                 "border-red-600",
               );
+              consentLabel?.classList.replace(
+                "[&_b]:text-[#67a807]",
+                "text-red-600",
+              );
               consentInput?.classList.add("border-2");
             }
             return;