HTML form POST to Google Sheet when two forms are present instead of one

Issue

Below I have my HTML code that includes two forms, they are both the same except for the name field that only does what it is intended to do when a form is before it (doesn't matter if it's displayable or not).

    <div class="contact-right">
        <form class="contact-form" style="display: none;">
            <input id="form-name" name="Name" type="text" placeholder="Your Name" required>
            <input id="form-email" name="Email" type="email" placeholder="Your Email" required>
            <textarea id="form-message" name="Message" type="text" placeholder="Your Message"></textarea>
            <button id="send-button" type="submit">Send</button>
        </form>
        <form name="submit-to-google-sheet" class="contact-form">
            <input id="form-name" name="Name" type="text" placeholder="Your Name" required>
            <input id="form-email" name="Email" type="email" placeholder="Your Email" required>
            <textarea id="form-message" name="Message" type="text" placeholder="Your Message"></textarea>
            <button id="send-button" type="submit">Send</button>
        </form>
    </div>
</section>
<div class="footer">
    <p>Stuff Here</p>
</div>

<script>
    const scriptURL = '<SCRIPT URL>'
    const form = document.forms['submit-to-google-sheet']
  
    form.addEventListener('submit', e => {
      e.preventDefault()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response => console.log('Success!', response))
        .catch(error => console.error('Error!', error.message))
    })
  </script>

** I used to protect the URL I was using

The intended use is to have a single form that gets the text elements of the form inputs and stores it on a Google Sheet (followed: https://github.com/jamiewilson/form-to-google-sheets). I've tried so many angles and it always seems to be that the form with the submit-to-google-sheet doesn't run if it's the only form.

Solution

Turns out my javascript which was purposefully getting HTML elements by id would inhibit the actions that the form component was trying to do (I put in my own email checkers).

I ended up deleting the prior form and javascript portion of my code that references those components, I'm pretty sure because it detected the prior form the second one was unaffected.

Answered By - Kevin Lizarazu-Ampuero