From 1ffe5276bc9bcddf9ffb0954c07376c036cb9e74 Mon Sep 17 00:00:00 2001
From: Allan Montilla <allan.montilla@herodigital.com>
Date: Tue, 22 Apr 2025 23:03:15 -0600
Subject: [PATCH] STERICMS-840-am: Add Informative Text to the Form.

---
 blocks/form/form.css | 14 ++++++++++++++
 blocks/form/form.js  | 16 ++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/blocks/form/form.css b/blocks/form/form.css
index 457dce30..5cbd9ddd 100644
--- a/blocks/form/form.css
+++ b/blocks/form/form.css
@@ -525,12 +525,26 @@ main .form .button-wrapper button:hover {
     border: 2px solid var(--form-button-background-color);
 }
 
+ main .form .button-wrapper.submit-wrapper .required-fields-label {
+    color: var(--color-text-primary);
+    font-size: 14px;
+    letter-spacing: 0.14px;
+    margin-top: 24px;
+    margin-bottom: 16px;
+}
+
+main .section.hero-banner-container .form .button-wrapper.submit-wrapper .required-fields-label {
+    margin-top: 16px;
+}
+
 main .form .button-wrapper.wizard-button-next button, main .form .button-wrapper.submit-wrapper button{
     background-color: var(--color-secondary-4);
     border: none;
     outline: 1px solid var(--color-bg-secondary);
     color: var(--color-text-primary);
     margin-left: auto;
+    margin-bottom: 16px;
+    margin-top: 16px;
 }
 
 main .form .button-wrapper button[disabled], main .form .button-wrapper.wizard-button-next button:disabled {
diff --git a/blocks/form/form.js b/blocks/form/form.js
index 9d096b0e..7c6fd497 100644
--- a/blocks/form/form.js
+++ b/blocks/form/form.js
@@ -52,5 +52,21 @@ export default async function decorate(block) {
         });
       }, { once: true });
     }
+    // create a label for required fields
+    const submitButton = form.querySelector('button[type="submit"]');
+    if (submitButton) {
+      const label = document.createElement('div');
+      label.classList.add('required-fields-label');
+      label.innerHTML = '<span class="required-indicator">*</span>Indicated required field';
+      const isHeroBannerForm = form.closest('.section.hero-banner-container');
+
+      if (isHeroBannerForm) {
+        // Insert before button for bigger form
+        submitButton.insertAdjacentElement('beforebegin', label);
+      } else {
+        // Insert after button for smaller form
+        submitButton.insertAdjacentElement('afterend', label);
+      }
+    }
   }
 }