"Page Not Found" when submitting form

[dfili8]

Anyone know what I’m possibly missing that would trigger a “Page Not Found” message after clicking submit on this form?

<button class="email" (click)="onOpen()">
  <i class="far fa-paper-plane"></i>
</button>

<!-- Modal for contact form -->

<div class="modal {{ active }} is-mobile">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="form">
      <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
        <input type="hidden" name="form-name" value="contact"/>
        <div class="field">
          <label class="label">Name</label>
          <div class="control has-icons-left has-icons-right">
            <input class="input" type="text" name="name">
            <span class="icon is-small is-left">
              <i class="fas fa-user"></i>
            </span>
          </div>
        </div>
        
        <div class="field">
          <label class="label">Email</label>
          <div class="control has-icons-left has-icons-right">
            <input class="input" type="email" name="email" required>
            <span class="icon is-small is-left">
              <i class="fas fa-envelope"></i>
            </span>
          </div>
        </div>
        
        <div class="field">
          <label class="label">Development Needs</label>
          <div class="control">
            <div class="select">
              <select name="dev needs[]">
                <option disabled="disabled">Select one</option>
                <option value="website">Website</option>
                <option value="mobile app">Mobile App</option>
                <option value="other">Other</option>
              </select>
            </div>
          </div>
        </div>
        
        <div class="field">
          <label class="label">Message</label>
          <div class="control">
            <textarea class="textarea" placeholder="How can I help?" name="message"></textarea>
          </div>
        </div>

        <div class="field">
          <div data-netlify-recaptcha="true"></div>
        </div>
        
        <div class="field is-grouped">
          <div class="control">
            <button class="button is-link" type="submit">Submit</button>
          </div>
          <div class="control">
            <button class="button is-danger" (click)="onExit()">Cancel</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close" (click)="onExit()"></button>
</div>

[perry]

Hi there, did you have a chance to read through these two articles on forms and see if there is anything in here that might help?

[Support Guide] I don't see form submissions when using JavaScript

Last reviewed by Netlify Support on May 25, 2022 I have a form rendered using JavaScript, but it’s not submitting. What’s going on? There are a few things to consider when using JavaScript with a Netlify-handled form: If you have rendered your form using JavaScript and are not using a Static Site Generator (or, your generator does not render it down to HTML such as Gatsby does), you will need to make sure you have a hidden, pure HTML version of your form somewhere in your site. This means …

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

[fool]

At a high level a 404 on submission likely means one of two things:

1. we never processed the form (so you won’t see the form in our dashboard - this is step 0 in the troubleshooting guide so I guess it isn’t your problem? If so stop trying to debug why submission isn’t working, and start debugging why we didn’t see your form instead :))

2. you are POSTing to a URL that we are not expecting you to. Usually you’d have an action=/path parameter pointing to some file or route in your site in the html form definition EVEN IF IT IS AN AJAX FORM that is used in production. If we don’t see that action then posting to /path (or if we see it pointing to a DIFFERENT path), the submission will not work, since we aren’t expecting it and our service returns 404’s to unexpected POSTs.

[SuhadJihad]

My problem has been fixed by Enable Form Detection then I reuploaded my site (this is the trick). You can update the site after enable the form detection, by uploading the site again. I hope this will work for Page Not Found issue.

[benomatis]

I know this is old, but there is a possibility that this may not be working because the form is not present at build time considering it’s a modal, so one would assume it’s hidden by default, and would only show upon a button click, so netlify would have no way to parse it. It’s just my assumption, but I ran into a similar situation, moving the form onto the page instead of a popup started to make it work.