fix: not clean form after send

contato/index.html

@@ -80,14 +80,57 @@ <h1>Contato</h1>
                     <label for="message">Message:</label>
                     <textarea id="message" name="message" rows="5" required></textarea>
 
-                    <button type="submit">Submit</button>
+                    <button id="submit" type="submit">Submit</button>
                 </form>
                 <div id="successMessage" class="hidden">Thank you for contacting us!</div>
                 <!-- Popup Modal -->
 
             </div>
             </div>
         </div>
+        <footer class="footer">
+            <div class="footer-container">
+             <div class="row">
+               <div class="footer-col">
+                 <h4>company</h4>
+                 <ul>
+                   <li><a href="#">about us</a></li>
+                   <li><a href="#">our services</a></li>
+                   <li><a href="#">privacy policy</a></li>
+                   <li><a href="#">affiliate program</a></li>
+                 </ul>
+               </div>
+               <div class="footer-col">
+                 <h4>get help</h4>
+                 <ul>
+                   <li><a href="#">FAQ</a></li>
+                   <li><a href="#">shipping</a></li>
+                   <li><a href="#">returns</a></li>
+                   <li><a href="#">order status</a></li>
+                   <li><a href="#">payment options</a></li>
+                 </ul>
+               </div>
+               <div class="footer-col">
+                 <h4>online shop</h4>
+                 <ul>
+                   <li><a href="#">watch</a></li>
+                   <li><a href="#">bag</a></li>
+                   <li><a href="#">shoes</a></li>
+                   <li><a href="#">dress</a></li>
+                 </ul>
+               </div>
+               <div class="footer-col">
+                 <h4>follow us</h4>
+                 <div class="social-links">
+                   <a href="#"><i class="fab fa-facebook-f"></i></a>
+                   <a href="#"><i class="fab fa-twitter"></i></a>
+                   <a href="#"><i class="fab fa-instagram"></i></a>
+                   <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                 </div>
+               </div>
+             </div>
+            </div>
+         </footer>
 
         <h1></h1>
         <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>

contato/script.js

@@ -3,21 +3,20 @@ document
   .addEventListener("submit", function (event) {
     event.preventDefault();
 
-    var name = document.getElementById("name").value;
-    var email = document.getElementById("email").value;
-    var subject = document.getElementById("subject").value;
-    var message = document.getElementById("message").value;
+    let name = document.getElementById("name").value;
+    let email = document.getElementById("email").value;
+    let submit = document.getElementById("submit").value;
+    let message = document.getElementById("message").value;
 
-    if (name && email && subject && message) {
+    if (name && email && submit && message) {
       // Simulate form submission
       setTimeout(function () {
         document.getElementById("successMessage").classList.remove("hidden");
-        document.getElementById("errorMessage").classList.add("hidden");
         document.getElementById("contactForm").reset();
       }, 1000);
     } else {
       document.getElementById("successMessage").classList.add("hidden");
-      document.getElementById("errorMessage").classList.remove("hidden");
+      console.log("contactform", contactForm);
     }
   });
 
@@ -33,16 +32,12 @@ document
     if (name && email && message) {
       document.getElementById("successMessage").classList.remove("hidden");
       document.getElementById("successMessage").classList.add("visible");
-      document.getElementById("errorMessage").classList.remove("visible");
-      document.getElementById("errorMessage").classList.add("hidden");
 
       // Clear the form fields
       document.getElementById("contactForm").reset();
     } else {
       document.getElementById("successMessage").classList.remove("visible");
       document.getElementById("successMessage").classList.add("hidden");
-      document.getElementById("errorMessage").classList.remove("hidden");
-      document.getElementById("errorMessage").classList.add("visible");
     }
   });
 

contato/style.css

@@ -184,3 +184,92 @@ a {
     opacity: 0;
   }
 }
+
+footer {
+  line-height: 1;
+  font-family: "Poppins", sans-serif;
+}
+
+.footer-container {
+  max-width: 1170px;
+  margin: auto;
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+}
+ul {
+  list-style: none;
+}
+.footer {
+  background-color: rgba(36, 38, 43, 0.9);
+  padding: 50px 0;
+}
+.footer-col {
+  width: 25%;
+  padding: 0 15px;
+}
+.footer-col h4 {
+  font-size: 18px;
+  color: #ffffff;
+  text-transform: capitalize;
+  margin-bottom: 35px;
+  font-weight: 500;
+  position: relative;
+}
+.footer-col h4::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -10px;
+  background-color: #e91e63;
+  height: 2px;
+  box-sizing: border-box;
+  width: 50px;
+}
+.footer-col ul li:not(:last-child) {
+  margin-bottom: 10px;
+}
+.footer-col ul li a {
+  font-size: 16px;
+  text-transform: capitalize;
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 300;
+  color: #bbbbbb;
+  display: block;
+  transition: all 0.3s ease;
+}
+.footer-col ul li a:hover {
+  color: #ffffff;
+  padding-left: 8px;
+}
+.footer-col .social-links a {
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+  background-color: rgba(255, 255, 255, 0.2);
+  margin: 0 10px 10px 0;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 50%;
+  color: #ffffff;
+  transition: all 0.5s ease;
+}
+.footer-col .social-links a:hover {
+  color: #24262b;
+  background-color: #ffffff;
+}
+
+/*responsive*/
+@media (max-width: 767px) {
+  .footer-col {
+    width: 50%;
+    margin-bottom: 30px;
+  }
+}
+@media (max-width: 574px) {
+  .footer-col {
+    width: 100%;
+  }
+}