Form Validation for Contact Form

src/assets/css/style.css

@@ -3521,28 +3521,6 @@ 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,71 +7,18 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
 
 import SiteService from "../../vendors/service/siteService";
 
-// 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
-
+  let [countries, setCountries] = useState([]) // initial state for country dropdown
+  let countryClass = new SiteService() // instantiating the class
+  
   const allCountry = () => {
-    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 });
-  };
+    return countryClass.countryData();
+  }
 
   //CALLS THE API AFTER COMPONENT LOADS
-  useEffect(() => {
-    allCountry().then((data) => setCountries(Object.values(data.data)));
-    console.log(values);
-  }, []);
+  useEffect(()=>{
+    allCountry().then((data)=> setCountries(Object.values(data.data)))
+  },[])
 
   return (
     <>
@@ -130,64 +77,44 @@ const Main = ({ brdcum }) => {
             <div className="contact_form">
               <div className="section_title">
                 <h2>
-                  <span>Leave a</span> message
+                  Leave a <span>message</span>
                 </h2>
                 <p>Fill up form below, our team will get back soon</p>
               </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}
-                />
+              <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>
 
                 <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>
-
-                <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">
+                  <input
+                    type="text"
+                    placeholder="Phone"
+                    className="form-control"
+                  />
+                </div>
 
                 <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">
@@ -203,8 +130,6 @@ 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" />
@@ -228,9 +153,7 @@ const Main = ({ brdcum }) => {
                   </div>
                   <div className="text">
                     <span>Email Us</span>
-                    <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
-                      {process.env.REACT_APP_SUPPORT_EMAIL}
-                    </a>
+                    <Link to="#">example@gmail.com</Link>
                   </div>
                 </li>
                 <li>
@@ -239,9 +162,7 @@ const Main = ({ brdcum }) => {
                   </div>
                   <div className="text">
                     <span>Call Us</span>
-                    <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
-                      {process.env.REACT_APP_US_PHONE}
-                    </a>
+                    <Link to="#">+1 (888) 553-46-11</Link>
                   </div>
                 </li>
                 <li>
@@ -250,7 +171,7 @@ const Main = ({ brdcum }) => {
                   </div>
                   <div className="text">
                     <span>Visit Us</span>
-                    <p>{process.env.REACT_APP_US_ADDRESS}</p>
+                    <p>5687, Business Avenue, New York, USA 5687</p>
                   </div>
                 </li>
               </ul>

src/vendors/service/siteService.js

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