Custom form submission using js fetch returns 404 on plain html site

Support
1

For my site https://graceful-sprite-f7174d.netlify.app, I wanted to have a custom success window appear on form submission without taking the user to another page. The success window appears, but when I use browser to inspect the fetch/xhr from @handleSubmit I see they get 404’d. And the submissions do not reach me, they dont appear in Netlify Forms admin page.

Here’s the HTML and Javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OK Consulting - We make IT</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="background-image"></div>
    <div class="picture-credit">
        <p>Photo by <a href="https://unsplash.com/@pupile_gustative?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Stoica Ionela</a> on <a href="https://unsplash.com/photos/two-donuts-CoNsEK5iHug?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
        </p>
    </div>
    <div class="hero-section">
        <h1>Don't call us, we'll call you</h1>
        <button id="contactBtn">Leave a message</button>
    </div>

    <footer>
        <p>OK Consulting © 2024 | All Rights Reserved | We make IT 🤖 | <a href="#" id="playAudioLink" class="no-style">▶️</a></p>
    </footer>


    <!-- Popup Contact Form -->
    <div class="form-popup">
        <div class="popup-content">
            <span class="close">&times;</span>
            <h2>Contact Form</h2>
            <form id="contactForm" action="#" method="post" netlify onSubmit={handleSubmit}>
                <input type="hidden" name="form-name" value="OKConsultingContactForm" />
                <label for="name">Name:</label><br>
                <input type="text" id="name" name="name" required><br>
                <label for="email">Email:</label><br>
                <input type="email" id="email" name="email"><br>
                <label for="phone">Phone Number:</label><br>
                <input type="tel" id="phone" name="phone" pattern="\+?[0-9\s]{8,}" title="Phone number format: [country code] [phone number]"><br>
                <label for="message">Message:</label><br>
                <textarea id="message" name="message" rows="4" required></textarea><br>
                <input type="submit" value="Submit">
            </form>
        </div>
    </div>

    <!-- Popup YouTube Audio Player autoplay=1&mute=0&controls=0&showinfo=0&autohide=1 allow="autoplay; encrypted-media" -->
    <div id="audioPlayer" class="yt-popup">
        <div class="popup-content">
            <span class="close">&times;</span>
            <iframe id="if-audioPlayer" width="300" height="200" src="https://www.youtube-nocookie.com/embed/Q9fYQFtNst0?autoplay=1&controls=1&loop=0&modestbranding=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>

    <script src="script.js"></script>

</body>
</html>

Javascript

// Functions to show other popups
//...

// Custom form submit handling
const handleSubmit = (event) => {
    event.preventDefault();
  
    const myForm = event.target;
    const formData = new FormData(myForm);
    
    fetch("#", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(formData).toString(),
    })
    .then(response => {
        console.log(response)})
    .then(() => {
        // Draw a custom confirmation popup on form submit and add eventlistener to delete it again
        // ...
        })
    .catch((error) => alert(error))
    .finally(() => {
        document.querySelector(".form-popup").style.display = "none";
    });

};

// Add submit event listener to the form
document.querySelector(".form-popup").addEventListener("submit", handleSubmit);

// Function to close popups
//...
2

Doh!
I read this article [Support Guide] Form problems, form debugging, 404 when submitting and How to Integrate Netlify’s Form Handling in a React App and it got me thinking if the form-name had to be the same value as the <form id=...

Apparently so, now it works again :slight_smile:

Code change

        <form id="OKConsultingContactForm" action="#" method="post" netlify onSubmit={handleSubmit}>
                <input type="hidden" name="form-name" value="OKConsultingContactForm" />