services error message set correct format

components/AutoPopup.js

@@ -19,7 +19,7 @@ export default function AutoPopup() {
     const [forms, setForms] = useState({
         name: "",
         email: "",
-        subject: "",
+        service: "",
         phone: "",
         message: "",
     });
@@ -63,8 +63,8 @@ export default function AutoPopup() {
                 name: forms.name,
                 email: forms.email,
                 phone: forms.phone,
-                subject: forms.subject,
+                subject: forms.service,
-                message: `Subject: ${forms.subject}\n\nMessage:\n${forms.message}`,
+                message: `Service: ${forms.service}\n\nMessage:\n${forms.message}`,
                 to: "info@janahanlaw.com",
                 senderName: "Janahan Law",
                 recaptchaToken: recaptchaToken,
@@ -80,7 +80,7 @@ export default function AutoPopup() {
                 setForms({
                     name: "",
                     email: "",
-                    subject: "",
+                    service: "",
                     phone: "",
                     message: "",
                 });
@@ -181,8 +181,8 @@ export default function AutoPopup() {
                                         <select
                                             onBlur={changeHandler}
                                             onChange={changeHandler}
-                                            value={forms.subject}
+                                            value={forms.service}
-                                            name="subject"
+                                            name="service"
                                             className="form-select mb-2"
                                         >
                                             <option value="">{t("form.subjectPlaceholder")}</option>
@@ -191,7 +191,7 @@ export default function AutoPopup() {
                                                     <option key={idx}>{opt}</option>
                                                 ))}
                                         </select>
-                                        {validator.message("subject", forms.subject, "required")}
+                                        {validator.message("service", forms.service, "required")}
                                     </div>
 
                                     <div className="col-12">

components/ContactFrom/ContactForm.js

@@ -11,7 +11,7 @@ const ContactForm = () => {
   const [forms, setForms] = useState({
     name: "",
     email: "",
-    subject: "",
+    service: "",
     phone: "",
     message: "",
   });
@@ -55,8 +55,8 @@ const ContactForm = () => {
         name: forms.name,
         email: forms.email,
         phone: forms.phone,
-        subject: forms.subject,
+        subject: forms.service,
-        message: `Subject: ${forms.subject}\n\nMessage:\n${forms.message}`,
+        message: `service: ${forms.service}\n\nMessage:\n${forms.message}`,
         to: "info@janahanlaw.com",
         senderName: "Janahan Law",
         recaptchaToken: recaptchaToken,
@@ -75,7 +75,7 @@ const ContactForm = () => {
         setForms({
           name: "",
           email: "",
-          subject: "",
+          service: "",
           phone: "",
           message: "",
         });
@@ -163,8 +163,8 @@ const ContactForm = () => {
             <select
               onBlur={changeHandler}
               onChange={changeHandler}
-              value={forms.subject}
+              value={forms.service}
-              name="subject"
+              name="service"
             >
               <option value="">{t("form.subjectPlaceholder")}</option>
               {Array.isArray(subjectOptions) &&
@@ -174,10 +174,10 @@ const ContactForm = () => {
             </select>
 
             {validator.message(
-              "subject",
+              "service",
-              forms.subject,
+              forms.service,
               "required",
-              { messages: { required: t("form.requiredMessages.subject") } }
+              { messages: { required: t("form.requiredMessages.service") } }
             )}
           </div>
         </div>

public/locales/en/contact.json

@@ -44,7 +44,7 @@
       "name": "Name is required",
       "email": "Valid email is required",
       "phone": "Phone number is required",
-      "subject": "Please select a subject",
+      "service": "Please select a service",
       "message": "Message is required",
       "recaptcha": "Please complete the ReCAPTCHA"
     }

public/locales/es/contact.json

@@ -44,7 +44,7 @@
       "name": "El nombre es obligatorio",
       "email": "Correo electrónico válido es obligatorio",
       "phone": "El teléfono es obligatorio",
-      "subject": "Por favor selecciona un asunto",
+      "service": "Por favor, seleccione un servicio",
       "message": "El mensaje es obligatorio",
       "recaptcha": "Por favor completa el ReCAPTCHA"
     }