Page Not Found Error with Netlify Form on Sapper/Svelte page

Support
,
1

Hi there,

I’m having problems getting a Netlify form to work on this page: https://fervent-thompson-1b8733.netlify.app/

Submitting the app returns a page not found error. At least it does for me in Chrome, FF Dev, and Firefox. However, it sometimes works on Chrome if I refresh the page, though this is sporadic. Note that I am using UIKit components. I’ve tried the following fixes:

  1. Move to pure HTML form instead of using javascript
  2. Use ‘data-netlify=“true”’ instead of just netlify - It appeared that though Netlify is recognizing the form, it is not stripping out the “data-netlify-true” attribute, so I can switch back to demonstrate this if needed.
  3. I have removed that action attribute entirely.
  4. Set the action attribute to:
  1. Tried different sapper export features, pointing to both the index.svelte and thankyou.svelte pages
  2. Pointed to the sapper/build folder instead of sapper/export
  3. Deleted the service worker
  4. Added names to all of the input fields.
  5. Stripped all JS from my page.
  6. Added in <input type='hidden' name='form-name' value='Contact Form' /> to my form.

None of this has helped. Not sure what to do.

Here is the current iteration of the form:

<!--Contact Form-->
<form
  name="contact-form"
  id="contact-form"
  data-netlify="true"
  netlify-honeypot="botfield"
  class="uk-form-horizontal uk-margin-medium"
  method="POST"
  action="/"
>
<div class="hidden">
  <label
    >Don’t fill this out if you’re human: <input type="hidden"
      name="botfield"
    /></label
  >
</div>
<input type='hidden' name='form-name' value='Contact Form' />
  <div class="uk-margin">
    <label class="uk-form-label" for="name">Full Name</label>
    <div class="uk-form-controls">
      <input
        class="uk-input"
        id="fullName"
        name="fullName"
        type="text"
        placeholder="First and Last name"
        aria-required="true"
        required="true"
      />
    </div>
  </div>
  <div class="uk-margin">
    <label class="uk-form-label" for="email">Email Address</label>
    <div class="uk-form-controls">
      <input
        class="uk-input"
        id="emailAddress"
        name="emailAddress"
        type="email"
        placeholder="Email"
        aria-required="true"
        required="true"
      />
    </div>
  </div>
  <div class="uk-margin">
    <label class="uk-form-label" for="phone">Phone Number</label>
    <div class="uk-form-controls">
      <input
        class="uk-input"
        id="phone"
        name="phone"
        type="tel"
        placeholder="Phone Number"
        aria-required="false"
        required="false"
      />
    </div>
  </div>
  <div class="uk-margin">
    <label class="uk-form-label" for="about">Tell Me About Yourself</label>
    <div class="uk-form-controls">
      <textarea
        rows="5"
        class="uk-textarea"
        id="about"
        name="about"
        type="text"
        placeholder="Tell me about yourself"
        aria-required="true"
        required="true"
      />
    </div>
  </div>
  <div class="button-wrapper">
    <button
      form="contact-form"
      type="submit"
      class="uk-button uk-button-primary">Submit</button
    >
  </div>
</form>

Any help would be appreciated! Thanks!

4

Hey there, @snax

Thanks for reaching out! Sorry to hear you’re meeting some obstacles, and I see you have changed how your form is running.

I have taken a look at your last deploy with a Netlify form, https://604bd119f9c47c00083a09d8--fervent-thompson-1b8733.netlify.app/ , and run some tests. I can see on our end that you have deployed forms with “form 1” and “contact-form” (you can see this here: Netlify App ). However, submissions to your form are going to a to a third name, “Contact Form.” I believe that this is causing your error.

Check out these screenshots below:

Screenshot_3_17_21__11_54
Screenshot_3_17_21__11_54944×310 41.2 KB

image

We believe that fixing this code will fix this issue for you.

5

Well I’ll be danged, that worked! Thanks so much Hillary!

So from what I’ve learned, it seems that using Svelte and/or Sapper requires a slightly different approach than just using a standard HTML form, and seems more akin to using a Javascript rendered form?

I ask because the line in question here: <input type='hidden' name='form-name' value='contact-form' /> isn’t required for just an HTML form, but is required for a Javascript form? Or am I mistaken?

Also, I just want to point this out to anyone who happens across this question because this was not clear to me in some of the other forum questions, the “name” attribute of the hidden is fixed to “form-name”, it is not the name of your form. Whereas the “value” attribute of the same is whatever the name of your form is, in my case it is “contact-form”.

2 Likes
6

thanks for sharing, @snax !