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

For my site, 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">
    <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">
    <div class="background-image"></div>
    <div class="picture-credit">
        <p>Photo by <a href="">Stoica Ionela</a> on <a href="">Unsplash</a>
    <div class="hero-section">
        <h1>Don't call us, we'll call you</h1>
        <button id="contactBtn">Leave a message</button>

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

    <!-- 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">

    <!-- 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="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

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



// Functions to show other popups

// Custom form submit handling
const handleSubmit = (event) => {
    const myForm =;
    const formData = new FormData(myForm);
    fetch("#", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(formData).toString(),
    .then(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

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" />