Frontend/contact.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <link rel="stylesheet" href="./style/contact.css">
</head>
<body>
    <div id="nav">
        <div class="logo">
        <div class="logoimg">
           
           <a href="index.html"><img src="./images/mirror mate.png" alt=""></a>
         </div>
    </div>
    <div class="navele">
       <h5><a class="navtxt" href="./about.html"><b>ABOUT</b></a></h5>
       <h5><a class="navtxt" href="./contact.html"><b>CONTACT US</b></a></h5>
       <h5><a class="navtxt" href="./help.html"><b>HELP</b></a></h5>
       
       
    </div>
    <div class="bar">
        <div id="butt">
            <button class="login"><a href="./signup login Frontend/login.html"> <b>LOG IN </b> </a> </button>
            <button class="signup"><a href="./signup login Frontend/signup.html"> <b> SIGN UP </b></a> </button>
        </div>
        </div>
    </div>
   
    <!-- nav bar -->
    <div id="contact" >
        <h1 class="sub-title">Contact US</h1>
        <div id="inside-contact">
           
            <div id="contact-left">
                <p id="contact-email"><i class="fa-sharp fa-solid fa-envelope"></i><b> MirrorMate@gmail.com</b></p>
                <p id="contact-phone"><i class="fa-solid fa-phone"></i><b>MirrorMate</b></p>
               <img src="./images/mirror mate.png">
        
            </div>
            <div id="contact-right">
                <form name="submit-to-google-sheet">
                    <input type="text" name="Name" placeholder="Your Name" required/>
                    <input type="email" name="Email" placeholder="Your Email" required/>
                    <textarea name="Message" rows="6" placeholder="Your Message"></textarea>
                    <button class="btn" type="submit">Submit</button>
                </form>
                <span id="msg"></span>
            </div>
           </div>
</div>
    
</body>
<script>
    const scriptURL = 'https://script.google.com/macros/s/AKfycbxKz0UA5U-_QyLI_F1-RdwwO-mv-_X-8z9cpDK5LSuN0N4CujeH-xwo_8L0gsz2kLcLtw/exec'
    const form = document.forms['submit-to-google-sheet']
    const msg=document.getElementById("msg")
  
    form.addEventListener('submit', e => {
      e.preventDefault()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response => {
            msg.innerHTML="Message Sent Successfully!"
            setTimeout(function(){
                msg.innerHTML=""

            },5000)
            form.reset()
        })
        .catch(error => console.error('Error!', error.message))
    })
  </script>
</html>