Conact form updation completed

app/contact/ContactClient.js

@@ -4,11 +4,11 @@ import { useState, useEffect } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
 import axios from "axios";
 import Link from "next/link";
+import { servicesList } from "@/utils/Services.utils";
 
 export default function ContactClient() {
   const [formData, setFormData] = useState({
     username: "",
-    lname: "",
     email: "",
     phone: "",
     service: "",
@@ -19,24 +19,23 @@ export default function ContactClient() {
   const [captchaToken, setCaptchaToken] = useState(null);
   const [alert, setAlert] = useState({ show: false, type: "", message: "" });
 
-  // Handle input changes
   const handleChange = (e) => {
     const { name, value } = e.target;
+    // console.log("Input Changed:", name, value);
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
-  // Handle captcha
   const handleCaptchaChange = (token) => {
+    // console.log("Captcha Token:", token);
     setCaptchaToken(token);
   };
 
-  // Form submit handler
   const handleSubmit = async (e) => {
     e.preventDefault();
+    // console.log("Form Submitted:", formData);
 
     const errors = {};
-    if (!formData.username.trim()) errors.username = "First Name is required.";
-    if (!formData.lname.trim()) errors.lname = "Last Name is required.";
+    if (!formData.username.trim()) errors.username = "Name is required.";
     if (!formData.email.trim()) errors.email = "Email is required.";
     if (!formData.phone.trim()) errors.phone = "Phone is required.";
     if (!formData.service.trim()) errors.service = "Please select a service.";
@@ -44,6 +43,7 @@ export default function ContactClient() {
     if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
 
     setFormErrors(errors);
+    // console.log("Form Errors:", errors);
     if (Object.keys(errors).length > 0) return;
 
     const emailData = {
@@ -55,9 +55,11 @@ export default function ContactClient() {
     };
 
     try {
-      const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
+      // console.log("Sending email:", emailData);
+      const res = await axios.post("/api/sendMail", emailData, {
         headers: { "Content-Type": "application/json" },
       });
+      // console.log("Email Response:", res.data);
 
       setAlert({
         show: true,
@@ -67,7 +69,6 @@ export default function ContactClient() {
 
       setFormData({
         username: "",
-        lname: "",
         email: "",
         phone: "",
         service: "",
@@ -76,7 +77,7 @@ export default function ContactClient() {
       setCaptchaToken(null);
       setFormErrors({});
     } catch (error) {
-      console.error("❌ Error sending email:", error);
+      // console.error("❌ Error sending email:", error);
       setAlert({
         show: true,
         type: "danger",
@@ -85,7 +86,7 @@ export default function ContactClient() {
     }
   };
 
-  // Auto-hide alert
+
   useEffect(() => {
     if (alert.show) {
       const timer = setTimeout(() => {
@@ -97,7 +98,6 @@ export default function ContactClient() {
 
   return (
     <div>
-      {/* Contact Info Section */}
       <section className="contact-info-section pt_90">
         <div className="auto-container">
           <div className="row clearfix">
@@ -139,7 +139,6 @@ export default function ContactClient() {
         </div>
       </section>
 
-      {/* Contact Form Section */}
       <section className="contact-style-three pt_90 pb_90">
         <div className="auto-container">
           <div className="row clearfix">
@@ -163,24 +162,13 @@ export default function ContactClient() {
                       <input
                         type="text"
                         name="username"
-                        placeholder="First Name"
+                        placeholder="Name"
                         value={formData.username}
                         onChange={handleChange}
                       />
                       {formErrors.username && <small className="text-danger">{formErrors.username}</small>}
                     </div>
 
-                    <div className="col-lg-6 col-md-6 col-sm-12 form-group">
-                      <input
-                        type="text"
-                        name="lname"
-                        placeholder="Last Name"
-                        value={formData.lname}
-                        onChange={handleChange}
-                      />
-                      {formErrors.lname && <small className="text-danger">{formErrors.lname}</small>}
-                    </div>
-
                     <div className="col-lg-6 col-md-6 col-sm-12 form-group">
                       <input
                         type="text"
@@ -203,7 +191,6 @@ export default function ContactClient() {
                       {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                     </div>
 
-                    {/* Services Dropdown */}
                     <div className="col-lg-6 col-md-6 col-sm-12 form-group">
                       <select
                         name="service"
@@ -212,17 +199,16 @@ export default function ContactClient() {
                         className="form-control"
                       >
                         <option value="">Select Service</option>
-                        <option value="Physio">Physio</option>
-                        <option value="Chiro">Chiro</option>
-                        <option value="Massage">Massage</option>
-                        <option value="Acupuncture">Acupuncture</option>
-                        <option value="Osteo">Osteo</option>
-                        <option value="Orthotics">Orthotics</option>
+                        {servicesList.map((service) => (
+                          <option key={service.slug} value={service.shortTitle}>
+                            {service.shortTitle}
+                          </option>
+                        ))}
                       </select>
                       {formErrors.service && <small className="text-danger">{formErrors.service}</small>}
                     </div>
 
-                    <div className="col-lg-6 col-md-6 col-sm-12 form-group">
+                    <div className="col-lg-12 col-md-6 col-sm-12 form-group">
                       <textarea
                         name="message"
                         placeholder="Message"
@@ -259,7 +245,6 @@ export default function ContactClient() {
         </div>
       </section>
 
-      {/* Google Map */}
       <section className="google-map-section">
         <div className="map-inner">
           <iframe

components/ContactFloat.js

@@ -6,7 +6,7 @@ import axios from "axios";
 export default function ContactFloat() {
   const [open, setOpen] = useState(false);
   const [showChat, setShowChat] = useState(false);
-  const [showSocial, setShowSocial] = useState(false); // 👈 NEW: toggle social icons
+  const [showSocial, setShowSocial] = useState(false); 
 
   /** Contact actions */
   const extraIcons = [
@@ -14,7 +14,7 @@ export default function ContactFloat() {
       href: "tel:647-722-3434",
       src: "/assets/images/icons/call.png",
       label: "Call",
-      newTab: true, // 👈 added
+      newTab: true, 
     },
     {
       action: () => setShowChat(true),
@@ -219,7 +219,7 @@ export default function ContactFloat() {
 function ChatForm({ onClose }) {
   const [formData, setFormData] = useState({
     username: "",
-    lname: "",
+    // lname: "",
     email: "",
     phone: "",
     service: "",
@@ -235,15 +235,18 @@ function ChatForm({ onClose }) {
   };
 
   const handleCaptchaChange = (token) => {
+    // console.log("ReCAPTCHA token:", token); 
     setCaptchaToken(token);
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
 
+    // console.log("Form submitted:", formData);
+
     const errors = {};
     if (!formData.username.trim()) errors.username = "First Name is required.";
-    if (!formData.lname.trim()) errors.lname = "Last Name is required.";
+    // if (!formData.lname.trim()) errors.lname = "Last Name is required.";
     if (!formData.email.trim()) errors.email = "Email is required.";
     if (!formData.phone.trim()) errors.phone = "Phone is required.";
     if (!formData.service.trim()) errors.service = "Please select a service.";
@@ -251,7 +254,10 @@ function ChatForm({ onClose }) {
     if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
 
     setFormErrors(errors);
-    if (Object.keys(errors).length > 0) return;
+    if (Object.keys(errors).length > 0) {
+      // console.log("Form validation errors:", errors);
+      return;
+    }
 
     const emailData = {
       ...formData,
@@ -266,6 +272,8 @@ function ChatForm({ onClose }) {
         headers: { "Content-Type": "application/json" },
       });
 
+      // console.log("Server response:", res.data);
+
       setAlert({
         show: true,
         type: "success",
@@ -274,7 +282,7 @@ function ChatForm({ onClose }) {
 
       setFormData({
         username: "",
-        lname: "",
+        // lname: "",
         email: "",
         phone: "",
         service: "",
@@ -283,6 +291,7 @@ function ChatForm({ onClose }) {
       setCaptchaToken(null);
       setFormErrors({});
     } catch (error) {
+      // console.error("Error sending message:", error);
       setAlert({
         show: true,
         type: "danger",
@@ -321,14 +330,14 @@ function ChatForm({ onClose }) {
           <input
             type="text"
             name="username"
-            placeholder="First Name"
+            placeholder="Name"
             value={formData.username}
             onChange={handleChange}
             className="form-control mb-2"
           />
           {formErrors.username && <small className="text-danger">{formErrors.username}</small>}
 
-          <input
+          {/* <input
             type="text"
             name="lname"
             placeholder="Last Name"
@@ -336,7 +345,7 @@ function ChatForm({ onClose }) {
             onChange={handleChange}
             className="form-control mb-2"
           />
-          {formErrors.lname && <small className="text-danger">{formErrors.lname}</small>}
+          {formErrors.lname && <small className="text-danger">{formErrors.lname}</small>} */}
 
           <input
             type="text"
@@ -358,8 +367,6 @@ function ChatForm({ onClose }) {
           />
           {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
 
-
-
           <select
             name="service"
             value={formData.service}

public/assets/css/bootstrap.css

@@ -1993,14 +1993,16 @@ progress {
 .form-control {
   display: block;
   width: 100%;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
+     padding: 20px 30px;
+ font-size: 18px;
+   color: #676767;
   font-weight: 400;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   line-height: 1.5;
-  color: #212529;
+  /* color: #212529; */
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #ced4da;
+  /* border: 1px solid #ced4da; */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;