index.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>Email Subscription Form</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="hero">
      <h3>Coming Soon!</h3>
      <h1>
        OurBrand New <br />
        Website Is On It's Way
      </h1>
      <p>Subscribe for more details</p>
      <form action="" name="submit-to-google-sheet">
        <input
          type="email"
          name="Email"
          id=""
          placeholder="Your Email Id"
          required
        />
        <button type="submit">
          <img width="30px" src="image/send-icon.png" alt="send" />
        </button>
      </form>
      <span id="msg"></span>
    </div>

    <script>
      const scriptURL =
        'https://script.google.com/macros/s/AKfycbxkw_zpkbW7TkpGIkTrU-jZyJaGnwcKaakeU48SIrCizEJtYhUvUpFClZcexnRLmROoww/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 = 'Thank You For Subscribing!';
            setTimeout(function () {
              msg.innerHTML = '';
            }, 5000);
            form.reset();
          })
          .catch((error) => console.error('Error!', error.message));
      });
    </script>
  </body>
</html>