My Form submission not working

Hi Team,

I have the below code used in my HTML for forms, But somehow netlify not detecting it. I uploaded the files manually and hosted it using my DNS.

<section class="waitlist">
    <h2>Join Our Waitlist</h2>
    <!-- Netlify Form Configuration -->
    <form name="waitlist" method="POST" data-netlify="true" id="waitlistForm">
        <input type="hidden" name="form-name" value="waitlist"> <!-- Hidden field for Netlify form identification -->

        <label for="name">Company Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your company name" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
        
        <button type="submit" id="joinNowBtn">Join Now</button>

        <!-- Page Break Section -->
        <div class="page-break"></div> <!-- Added for page break effect -->
    </form>

    <!-- Success Message -->
    <div id="successMessage" class="success-message">Thank you for joining our waitlist!</div> <!-- Success message container -->
</section>

<!-- Include the Netlify Forms script for handling spam protection -->
<!-- <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> -->

<!-- JavaScript to Handle Form Submission -->
<script>
    document.getElementById('waitlistForm').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission
        
        // Display the success message
        const successMessage = document.getElementById('successMessage');
        successMessage.style.display = 'block'; // Show the message
        
        // Hide the success message after 5 seconds
        setTimeout(function() {
            successMessage.style.display = 'none';
        }, 10000);
        
        // Reset the form fields
        document.getElementById('waitlistForm').reset();
    });
</script>

I appreciate the support and guidance to fix this issue.

@Febin56 When you say:

Do you mean:

  • Not detecting the form during build?
    or
  • Not receiving the submission?

Looking at the code snippet that you’ve provided, the JavaScript would completely break the form.

It will:

  • Prevent the default form behavior (which prevents the form sending its values)
  • Find and show a success message (which is already hidden on the page)
  • Wait for 10 seconds and then hide the success message
  • Empty the form input fields

It quite simply never submits the form.

If you need further assistance debugging the form you’ll need to supply a link to the form, it’s much easier to debug an actual form, on an actual site instance, than try to debug from code snippets and screenshots.

1 Like