Worked on the form validation

src/assets/css/style.css

@@ -3521,6 +3521,28 @@ header.fix_style.white_header {
   margin-bottom: 20px;
 }
 
+/* For the err msg */
+.contact_page_section .contact_inner .contact_form form .form-group span{
+  font-size: 12px;
+  color: tomato;
+  padding: 3px;
+  display: none;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{
+  display: block;
+}
+
+/* 
+input:invalid[focused="true"]{
+    border: 1px solid red;
+}
+
+input:invalid[focused="true"] ~ span{
+    display: block;
+}
+*/
+
 .contact_page_section
   .contact_inner
   .contact_form

src/component/Contact/Main.js

@@ -7,18 +7,71 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
 
 import SiteService from "../../vendors/service/siteService";
 
-const Main = ({ brdcum }) => {
-  let [countries, setCountries] = useState([]) // initial state for country dropdown
-  let countryClass = new SiteService() // instantiating the class
+// Form Inputs
+const FormInput = (props) => {
+  let {
+    name,
+    type,
+    placeholder,
+    required,
+    maxLenght,
+    errorMessage,
+    value,
+    onChange,
+  } = props;
   
+  return (
+    <div className="form-group">
+      <input
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        className="form-control"
+        maxLength={maxLenght}
+        required={required}
+        value={value}
+        onChange={onChange}
+      />
+      <span>{errorMessage}</span>
+    </div>
+  );
+};
+
+const Main = ({ brdcum }) => {
+  // Form Validation
+  const [values, setValues] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    msg: "",
+  }); //initial state values
+  const [countries, setCountries] = useState([]); // initial state for country dropdown
+
+  // Gave a generic name for multiple calls
+  const API_CALL = new SiteService(); // instantiating the class
+
   const allCountry = () => {
-    return countryClass.countryData();
-  }
+    return API_CALL.countryData();
+  };
+
+  const contactForm = () => {
+    return API_CALL.contactData();
+  };
+
+  // Submitting form
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  const onChange = (e) => {
+    setValues({ ...values, [e.target.name]: e.target.value });
+  };
 
   //CALLS THE API AFTER COMPONENT LOADS
-  useEffect(()=>{
-    allCountry().then((data)=> setCountries(Object.values(data.data)))
-  },[])
+  useEffect(() => {
+    allCountry().then((data) => setCountries(Object.values(data.data)));
+    console.log(values);
+  }, []);
 
   return (
     <>
@@ -77,44 +130,64 @@ const Main = ({ brdcum }) => {
             <div className="contact_form">
               <div className="section_title">
                 <h2>
-                  Leave a <span>message</span>
+                  <span>Leave a</span> message
                 </h2>
                 <p>Fill up form below, our team will get back soon</p>
               </div>
-              <form action="">
-                <div className="form-group">
-                  <input
-                    type="text"
-                    placeholder="Name"
-                    className="form-control"
-                  />
-                </div>
-                <div className="form-group">
-                  <input
-                    type="email"
-                    placeholder="Email"
-                    className="form-control"
-                  />
-                </div>
+
+              {/* Contact Form */}
+              <form onSubmit={handleSubmit}>
+                <FormInput
+                  name="name"
+                  type="text"
+                  placeholder="Name"
+                  errorMessage="Please enter your name"
+                  required={true}
+                  maxLenght={35}
+                  value={values.name}
+                  onChange={onChange}
+                />
+
+                <FormInput
+                  name="email"
+                  type="email"
+                  placeholder="Email"
+                  errorMessag="It should be a valid email address!"
+                  required={true}
+                  maxLenght={35}
+                  value={values.email}
+                  onChange={onChange}
+                />
 
                 <div className="form-group">
                   <select className="form-control">
                     <option value="">Country</option>
-                    {countries.length > 0 && countries.map((country, index) => <option key={index} value={country}>{country}</option>)}
+                    {countries.length > 0 &&
+                      countries.map((country, index) => (
+                        <option key={index} value={country}>
+                          {country}
+                        </option>
+                      ))}
                   </select>
                 </div>
-                <div className="form-group">
-                  <input
-                    type="text"
-                    placeholder="Phone"
-                    className="form-control"
-                  />
-                </div>
+
+                <FormInput
+                  name="phone"
+                  type="text"
+                  placeholder="Phone"
+                  errorMessage="It should be a valid phone number!"
+                  maxLenght={15}
+                  value={values.phone}
+                  onChange={onChange}
+                />
 
                 <div className="form-group">
                   <textarea
+                    name="msg"
                     className="form-control"
                     placeholder="Your message"
+                    value={values.msg}
+                    onChange={onChange}
                   ></textarea>
                 </div>
                 <div className="form-group term_check">
@@ -130,6 +203,8 @@ const Main = ({ brdcum }) => {
                 </div>
               </form>
             </div>
+
+            {/* Contact Info */}
             <div className="contact_info">
               <div className="icon">
                 <img src="assets/images/contact_message_icon.png" alt="image" />
@@ -153,7 +228,9 @@ const Main = ({ brdcum }) => {
                   </div>
                   <div className="text">
                     <span>Email Us</span>
-                    <Link to="#">example@gmail.com</Link>
+                    <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                      {process.env.REACT_APP_SUPPORT_EMAIL}
+                    </a>
                   </div>
                 </li>
                 <li>
@@ -162,7 +239,9 @@ const Main = ({ brdcum }) => {
                   </div>
                   <div className="text">
                     <span>Call Us</span>
-                    <Link to="#">+1 (888) 553-46-11</Link>
+                    <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
+                      {process.env.REACT_APP_US_PHONE}
+                    </a>
                   </div>
                 </li>
                 <li>
@@ -171,7 +250,7 @@ const Main = ({ brdcum }) => {
                   </div>
                   <div className="text">
                     <span>Visit Us</span>
-                    <p>5687, Business Avenue, New York, USA 5687</p>
+                    <p>{process.env.REACT_APP_US_ADDRESS}</p>
                   </div>
                 </li>
               </ul>

src/vendors/service/siteService.js

@@ -13,11 +13,15 @@ class SiteService {
     return this.getAuxEnd("/country", null);
   }
 
+  contactData() {
+    return this.postAuxEnd("/contact", null)
+  }
+
   faqData() {}
-  
+
   //----------------------------------------  -----
   //----------------------------------------  -----
-  // Unified call below 
+  // Unified call below
   //----------------------------------------  -----
   //----------------------------------------  -----
   getAuxEnd(uri, reqData) {