fix(form): enhance error handling and status display in CommonForm and ContactForm

Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

Author: Manishnemade12

src/components/CommonForm/index.js

@@ -96,18 +96,19 @@ const CommonForm = ({ form, title, submit_title, submit_body, submit_button_titl
         role: role,
         form: form,
       }}
-      onSubmit={async (values) => {
+      onSubmit={async (values, { setStatus }) => {
         if (isValidRole(values.role) && isValidEmail(values.email)) {
           const { success } = await submitForm({ memberFormOne: values });
           if (success) {
+            setStatus(null);
             setMemberFormOne(values);
             setStepNumber(1);
             setSubmit(true);
             // window.scrollTo(0,window.scrollY - 800);
             // confirmationMessageRef.current.scrollIntoView({ behavior: 'smooth' })
             scrollElementIntoView(confirmationMessageRef.current, navBarOffset);
           } else {
-            alert("Submission failed. Please try again.");
+            setStatus({ submitError: "Submission failed. Please try again." });
           }
         } else {
           // if (!(values.google || values.github || values.twitter || values.linkedin)) {
@@ -128,7 +129,11 @@ const CommonForm = ({ form, title, submit_title, submit_body, submit_button_titl
         }
       }}
     >
-      <Form className="form" method="post">
+      {({ status }) => (
+        <Form className="form" method="post" aria-describedby="common-form-status">
+          <div id="common-form-status" className="form-error" role="alert" aria-live="assertive">
+            {status?.submitError || ""}
+          </div>
         <label htmlFor="firstname" className="form-name">First Name <span className="required-sign">*</span></label>
         <Field type="text" className="text-field" id="firstname" name="firstname" maxLength="32" pattern="^[\p{L}]+('[\p{L}]*)?(?:-[\p{L}]+)*([\s][\p{L}]+('[\p{L}]*)?(?:-[\p{L}]+)*){0,31}$" required />
         <label htmlFor="lastname" className="form-name">Last Name <span className="required-sign">*</span></label>
@@ -288,6 +293,7 @@ const CommonForm = ({ form, title, submit_title, submit_body, submit_button_titl
 
         <Button $secondary className="btn" title={submit_button_title || "Submit"} />
       </Form>
+      )}
     </Formik>
   </div>
       }

src/components/ContactForm/index.js

@@ -36,18 +36,23 @@ const ContactForm = () => {
             scope: "",
             form: "contact",
           }}
-          onSubmit={async (values) => {
+          onSubmit={async (values, { setStatus }) => {
             const { success } = await submitForm({ memberFormOne: values });
             if (success) {
+              setStatus(null);
               setmemberFormOne(values);
               setSubmit(true);
               window.scrollTo(0, 700);
             } else {
-              alert("Submission failed. Please try again.");
+              setStatus({ submitError: "Submission failed. Please try again." });
             }
           }}
         >
-          <Form className="form" method="post">
+          {({ status }) => (
+            <Form className="form" method="post" aria-describedby="contact-form-status">
+              <div id="contact-form-status" className="form-error" role="alert" aria-live="assertive">
+                {status?.submitError || ""}
+              </div>
             <div className="title">
               <img className="layer5-logo" src={logo} alt="Layer5 Logo" />
             </div>
@@ -209,7 +214,8 @@ const ContactForm = () => {
                 />
               </div>
             </div>
-          </Form>
+            </Form>
+          )}
         </Formik>
       </div>
     </ContactFormWrapper>