Form on static page only submitting successfully when on /index.html

[krnr]

I’ve created a form on https://ozzy-tester.netlify.app that fails on submit, leading to “Page Not Found”.

However, it succeeds in submitting when I’m on https://ozzy-tester.netlify.app/index.html.

How do I fix this?

[perry]

hi there, sounds like it might be an issue with the path you are pointing towards. We would show the “page not found” if you used a relative path vs. an absolute one or something like that - if you were indeed pointing the visitor to something that wasn’t there. I’d check that you are absolutely sure that the page you are redirecting to exists, given that the form syntax is likely correct (as it works in the case you described)

maybe this guide is helpful?

[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…

[krnr]

Hi Perry. Thanks for your reply. I’ve read through that guide, but it didn’t help.

I didn’t specify a path to redirect to, so I assume it redirects to the root path(?). Which points to /index.html – which indeed exists.

[tomrutgers]

Can you post the code of your form?

[krnr]

Hi Tom. Of course:

<form method='POST' name='tester-email'><input type='hidden' name='form-name' value='tester-email' />
    <div class="svelte-hfszzn form-content">
        <p class="svelte-hfszzn label"><label for=email>Send os din email så kontakter vi dig:</label></p>
        <div class="svelte-hfszzn controls-group"><input class=svelte-hfszzn name=email placeholder="Din email-adresse…" type=email>
            <p class="svelte-hfszzn hidden"><label>Don’t fill this out if you’re human: <input class=svelte-hfszzn name=bot-field></label></p> <button class=svelte-hfszzn type=submit>Send</button></div>
    </div>
</form>

[tomrutgers]

Did you copy this from the inspect element code or from the one in your repo? There’s a difference, as Netlify converts your forms on build.

For what you’re trying to do, this should work:

<form method='POST' name='tester-email' data-netlify="true"  netlify-honeypot="bot-field">
  <div class="svelte-hfszzn form-content">
    <p class="svelte-hfszzn label">
      <label for=email>Send os din email så kontakter vi dig:</label>
    </p>
    <div class="svelte-hfszzn controls-group">
      <input class=svelte-hfszzn name=email placeholder="Din email-adresse…" type=email>
      <p class="svelte-hfszzn hidden">
        <label>Don’t fill this out if you’re human: 
          <input class=svelte-hfszzn name=bot-field>
        </label>
      </p>
      <button class=svelte-hfszzn type=submit>Send</button>
    </div>
  </div>
</form>

[krnr]

The previous code is from the Netlify build. The code in my repo is identical to the code you posted.

[hrishikesh]

Hi @krnr,

Sorry for taking time to get back to you on this. It’s a really strange problem. I’m passing this on to the devs for further info. Thank you for the patience.

[luke]

Hi, @krnr. I tried submitting that form and when I did so, the form-name field isn’t submitted. This what the browser sent:

email=luke%2Btesting-only%40netlify.com&bot-field=

However, their is a required “form-name” field which should also be sent above and that didn’t happen. That is why the form submission isn’t working.

Netlify automatically adds this to the HTML so it works for HTML forms. For javascript submitted forms, your site’s javascript will need to include this input as well.

Here is the original site HTML (before our post-processing is done but reformatted for readablity):

<form data-netlify=true method=POST name=tester-email netlify-honeypot=bot-field>
  <div class="svelte-hfszzn form-content">
    <p class="svelte-hfszzn label"><label for=email>Send os din email så kontakter vi dig:</label></p>
    <div class="svelte-hfszzn controls-group"><input class=svelte-hfszzn name=email placeholder="Din email-adresse…" type=email>
      <p class="svelte-hfszzn hidden"><label>Don’t fill this out if you’re human: <input class=svelte-hfszzn name=bot-field></label></p> <button class=svelte-hfszzn type=submit>Send</button>
    </div>
  </div>
</form>

This is the same form after post-processing (again, reformatted for readability):

<form method='POST' name='tester-email'><input type='hidden' name='form-name' value='tester-email' />
  <div class="svelte-hfszzn form-content">
    <p class="svelte-hfszzn label"><label for=email>Send os din email så kontakter vi dig:</label></p>
    <div class="svelte-hfszzn controls-group"><input class=svelte-hfszzn name=email placeholder="Din email-adresse…" type=email>
      <p class="svelte-hfszzn hidden"><label>Don’t fill this out if you’re human: <input class=svelte-hfszzn name=bot-field></label></p> <button class=svelte-hfszzn type=submit>Send</button>
    </div>
  </div>
</form>

There are two big differences. One is that the netlify-honeypot=bot-field attribute is removed. The other is the adding of the 'form-name' input/field. If you get this site’s code to always include that input name and value when submitting this form, that will resolve the issue.

If there are other questions about this, please let us know.

[krnr]

Got it working now. Thanks a lot everyone!