"Page Not Found" when submitting form

needed_documentation
answered
#1

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>
#2

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?

Fetching data from Formik form using Gatsby and use Netlify functions to post into Sanity
#3

I have followed the Forms articles but nothing seems to work for my case.

#4

Thanks for confirming that. So, next step would be for you to share a link to your live form, so we can take a look at it to help debug.

#5

https://www.danielfilimon.com Thank you!

#6

I have same issue. Did you manage to fix yours ?

#7

Nope, even tried this route as well - https://fourhourwindow.wordpress.com/2018/05/30/using-netlify-form-in-angular/ Implementing jQuery, but no luck yet.

#8

@fool Any update on this? Maybe you can provide some Angular 2.0^ documentation on the matter?

#9

Maybe we can provide that documentation someday! It’s a good suggestion that I’ll get in front of our documentation team.

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.