Form Bots not stripping "netlify" from form (Svelte / Sapper / Forms)

currently trying to get forms working on this sapper site https://evergreenfitness.net/contact/. If you look at the build log below, you’ll see that Netlify is detecting the form, but the bots aren’t stripping the β€œnetlify” attribute from the html. It’s also not creating the form-name hidden input. The form is showing up in the BE, but I get a 404 on submit. I’ve read every post in this forum about Svelte/ Sapper to no avail.

I have a different sapper site that is using forms and is working fine with essentially the same form code and deploy config (running sapper’s static export)

Build Log
4:07:57 PM: Build ready to start
4:07:59 PM: build-image version: d84c79427e8f83c1ba17bcdd7b3fe38059376b68
4:07:59 PM: build-image tag: v3.6.1
4:07:59 PM: buildbot version: 4c3d8713ccd4c98ab9180f79a013d42d2076d9ff
4:07:59 PM: Fetching cached dependencies
4:08:00 PM: Starting to download cache of 145.3MB
4:08:02 PM: Finished downloading cache in 2.659870151s
4:08:02 PM: Starting to extract cache
4:08:07 PM: Finished extracting cache in 4.67658783s
4:08:07 PM: Finished fetching cache in 7.450481865s
4:08:07 PM: Starting to prepare the repo for build
4:08:07 PM: Preparing Git Reference refs/heads/master
4:08:10 PM: Different functions path detected, going to use the one specified in the Netlify configuration file: β€˜functions’ versus β€˜β€™ in the Netlify UI
4:08:10 PM: Starting build script
4:08:10 PM: Installing dependencies
4:08:10 PM: Python version set to 2.7
4:08:11 PM: Started restoring cached node version
4:08:13 PM: Finished restoring cached node version
4:08:14 PM: v12.18.0 is already installed.
4:08:14 PM: Now using node v12.18.0 (npm v6.14.4)
4:08:14 PM: Started restoring cached build plugins
4:08:14 PM: Finished restoring cached build plugins
4:08:15 PM: Attempting ruby version 2.7.1, read from environment
4:08:16 PM: Using ruby version 2.7.1
4:08:16 PM: Using PHP version 5.6
4:08:16 PM: Started restoring cached node modules
4:08:16 PM: Finished restoring cached node modules
4:08:16 PM: Started restoring cached go cache
4:08:16 PM: Finished restoring cached go cache
4:08:16 PM: go version go1.14.4 linux/amd64
4:08:16 PM: go version go1.14.4 linux/amd64
4:08:16 PM: Installing missing commands
4:08:16 PM: Verify run directory
4:08:18 PM: ​
4:08:18 PM: ────────────────────────────────────────────────────────────────
4:08:18 PM: Netlify Build
4:08:18 PM: ────────────────────────────────────────────────────────────────
4:08:18 PM: ​
4:08:18 PM: ❯ Version
4:08:18 PM: netlify/build 9.4.0
4:08:18 PM: ​
4:08:18 PM: ❯ Flags
4:08:18 PM: deployId: 603d65bdbeb5670008e176ad
4:08:18 PM: mode: buildbot
4:08:18 PM: ​
4:08:18 PM: ❯ Current directory
4:08:18 PM: /opt/build/repo
4:08:18 PM: ​
4:08:18 PM: ❯ Config file
4:08:18 PM: /opt/build/repo/netlify.toml
4:08:18 PM: ​
4:08:18 PM: ❯ Context
4:08:18 PM: production
4:08:18 PM: ​
4:08:18 PM: ────────────────────────────────────────────────────────────────
4:08:18 PM: 1. build.command from netlify.toml
4:08:18 PM: ────────────────────────────────────────────────────────────────
4:08:18 PM: ​
4:08:18 PM: $ npm run export
4:08:18 PM: > TODO0.0.1 export /opt/build/repo
4:08:18 PM: > sapper export --legacy --entry β€˜/ /challenge’
4:08:18 PM: > Building…
4:08:24 PM: β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
4:08:24 PM: β”‚ built client β”‚
4:08:24 PM: β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
4:08:24 PM: 31 kB client.1c318959.js
4:08:24 PM: β”‚ node_modules/svelte/internal/index.mjs (26.2%)
4:08:24 PM: β”‚ src/node_modules/@sapper/app.mjs (22.8%)
4:08:24 PM: β”‚ src/components/Header.svelte (17.5%)
4:08:24 PM: β”‚ src/node_modules/@sapper/internal/App.svelte (9.5%)
4:08:24 PM: β”‚ src/routes/_error.svelte (4.6%)
4:08:24 PM: β”‚ node_modules/svelte-icons/components/IconBase.svelte (4.1%)
4:08:24 PM: β”‚ src/routes/_layout.svelte (3.2%)
4:08:24 PM: β”‚ node_modules/svelte-icons/fa/FaFacebookF.svelte (2.9%)
4:08:24 PM: β”‚ node_modules/svelte-icons/io/IoMdPerson.svelte (2.9%)
4:08:24 PM: β”‚ node_modules/svelte/store/index.mjs (2.1%)
4:08:24 PM: β”‚ src/node_modules/@sapper/internal/manifest-client.mjs (1.7%)
4:08:24 PM: β”‚ src/components/MobileLogo.svelte (1.1%)
4:08:24 PM: β”‚ src/components/Logo.svelte (1.0%)
4:08:24 PM: β”‚ node_modules/svelte/transition/index.mjs (0.3%)
4:08:24 PM: β”‚ src/client.js (0.1%)
4:08:24 PM: β”” src/node_modules/@sapper/internal/shared.mjs (0.0%)
4:08:24 PM: 559 B inject_styles.5607aec6.js
4:08:24 PM: β”” inject_styles.js
4:08:24 PM: 11.5 kB index.bcc1d9a7.js
4:08:24 PM: β”‚ src/routes/index.svelte (76.0%)
4:08:24 PM: β”‚ src/components/PopupLong.svelte (22.0%)
4:08:24 PM: β”” src/components/Content.svelte (2.0%)
4:08:24 PM: 6.97 kB Modal.b3b92b92.js
4:08:24 PM: β”” src/components/Modal.svelte
4:08:24 PM: 3.11 kB Nav.d0eed1e9.js
4:08:24 PM: β”” src/components/Nav.svelte
4:08:24 PM: 2.33 kB Footer.3bbbb2ef.js
4:08:24 PM: β”” src/components/Footer.svelte
4:08:24 PM: 22.2 kB membership.7e2617e0.js
4:08:24 PM: β”‚ src/routes/membership.svelte (59.1%)
4:08:24 PM: β”‚ src/components/Card.svelte (28.9%)
4:08:24 PM: β”‚ src/components/MembershipMessage.svelte (9.4%)
4:08:24 PM: β”” src/components/MembershipContent.svelte (2.6%)
4:08:24 PM: 53.3 kB challenge.35ccb5eb.js
4:08:24 PM: β”‚ src/components/ChallengeLogo.svelte (58.9%)
4:08:24 PM: β”” src/routes/challenge.svelte (41.1%)
4:08:24 PM: 4.57 kB contact.d086268f.js
4:08:24 PM: β”‚ src/routes/contact.svelte (85.4%)
4:08:24 PM: β”” src/components/SimpleFooter.svelte (14.6%)
4:08:34 PM: β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
4:08:34 PM: β”‚ built client (legacy) β”‚
4:08:34 PM: β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
4:08:34 PM: 49.6 kB client.7063e565.js
4:08:34 PM: β”‚ node_modules/regenerator-runtime/runtime.js (19.0%)
4:08:34 PM: β”‚ src/node_modules/@sapper/app.mjs (17.9%)
4:08:34 PM: β”‚ node_modules/svelte/internal/index.mjs (15.9%)
4:08:34 PM: β”‚ src/components/Header.svelte (13.1%)
4:08:34 PM: β”‚ src/node_modules/sapper/internal/App.svelte (7.3%)
4:08:34 PM: β”‚ src/routes/_error.svelte (4.0%)
4:08:34 PM: β”‚ node_modules/svelte-icons/components/IconBase.svelte (3.8%)
4:08:34 PM: β”‚ src/routes/_layout.svelte (3.0%)
4:08:34 PM: β”‚ node_modules/svelte-icons/fa/FaFacebookF.svelte (2.8%)
4:08:34 PM: β”‚ node_modules/svelte-icons/io/IoMdPerson.svelte (2.8%)
4:08:34 PM: β”‚ src/components/MobileLogo.svelte (1.5%)
4:08:34 PM: β”‚ src/components/Logo.svelte (1.4%)
4:08:34 PM: β”‚ node_modules/svelte/store/index.mjs (1.2%)
4:08:34 PM: β”‚ src/node_modules/sapper/internal/manifest-client.mjs (1.1%)
4:08:34 PM: β”‚ node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js (0.6%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/iterableToArrayLimit.js (0.4%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/createClass.js (0.4%)
4:08:34 PM: β”‚ node_modules/svelte/transition/index.mjs (0.4%)
4:08:34 PM: β”‚ node_modules/@babel/runtime/helpers/esm/get.js (0.4%)
4:08:34 PM: β”‚ node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js (0.3%)
4:08:34 PM: β”‚ node_modules/@babel/runtime/helpers/esm/inherits.js (0.3%)
4:08:34 PM: β”‚ commonjsHelpers.js (0.3%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/typeof.js (0.3%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/getPrototypeOf.js (0.2%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/superPropBase.js (0.2%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/arrayLikeToArray.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/nonIterableRest.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/nonIterableSpread.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/possibleConstructorReturn.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/setPrototypeOf.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/assertThisInitialized.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/classCallCheck.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/slicedToArray.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/toConsumableArray.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/iterableToArray.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/arrayWithoutHoles.js (0.1%)
4:08:34 PM: β”‚ node_modules/babel/runtime/helpers/esm/arrayWithHoles.js (0.1%)
4:08:34 PM: β”‚ src/client.js (0.0%)
4:08:34 PM: β”‚ node_modules/babel/runtime/regenerator/index.js (0.0%)
4:08:34 PM: β”” src/node_modules/sapper/internal/shared.mjs (0.0%)
4:08:34 PM: 559 B inject_styles.fe622066.js
4:08:34 PM: β”” inject_styles.js
4:08:34 PM: 13.2 kB index.b69ae547.js
4:08:34 PM: β”‚ src/routes/index.svelte (71.5%)
4:08:34 PM: β”‚ src/components/PopupLong.svelte (23.1%)
4:08:34 PM: β”” src/components/Content.svelte (5.4%)
4:08:34 PM: 9.05 kB Modal.46b31374.js
4:08:34 PM: β”‚ src/components/Modal.svelte (99.0%)
4:08:34 PM: β”” node_modules/babel/runtime/helpers/esm/defineProperty.js (1.0%)
4:08:34 PM: 3.71 kB Nav.61c9ec3b.js
4:08:34 PM: β”” src/components/Nav.svelte
4:08:34 PM: 2.93 kB Footer.1b13f029.js
4:08:34 PM: β”” src/components/Footer.svelte
4:08:34 PM: 26.2 kB membership.6dcc2a95.js
4:08:34 PM: β”‚ src/routes/membership.svelte (57.4%)
4:08:34 PM: β”‚ src/components/Card.svelte (28.5%)
4:08:34 PM: β”‚ src/components/MembershipMessage.svelte (10.1%)
4:08:34 PM: β”” src/components/MembershipContent.svelte (4.0%)
4:08:34 PM: 54.4 kB challenge.8d3f724a.js
4:08:34 PM: β”‚ src/components/ChallengeLogo.svelte (57.2%)
4:08:34 PM: β”” src/routes/challenge.svelte (42.8%)
4:08:34 PM: 5.67 kB contact.131bc3b8.js
4:08:34 PM: β”‚ src/routes/contact.svelte (79.7%)
4:08:34 PM: β”” src/components/SimpleFooter.svelte (20.3%)
4:08:35 PM: β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
4:08:35 PM: β”‚ built server β”‚
4:08:35 PM: β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
4:08:36 PM: β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
4:08:36 PM: β”‚ built serviceworker β”‚
4:08:36 PM: β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
4:08:36 PM: > Built in 17.4s
4:08:36 PM: > Crawling http://localhost:3000/
4:08:36 PM: > Crawling http://localhost:3000/challenge/
4:08:36 PM: 9.3 kB index.html
4:08:36 PM: 5.45 kB service-worker-index.html
4:08:36 PM: 44.8 kB challenge/index.html
4:08:36 PM: 7.97 kB favicon.png
4:08:36 PM: 3.38 kB client/client-64810f1f.css
4:08:36 PM: 1.2 kB client/Nav-ecf9315f.css
4:08:36 PM: 752 B client/Footer-8d1d0569.css
4:08:36 PM: 1.97 kB client/Modal-7af76547.css
4:08:36 PM: 2.71 kB client/index-1bc27457.css
4:08:36 PM: 2.53 kB global.css
4:08:36 PM: 324 B manifest.json
4:08:36 PM: 3.11 kB client/Nav.d0eed1e9.js
4:08:36 PM: 2.34 kB client/Footer.3bbbb2ef.js
4:08:36 PM: 11.5 kB client/index.bcc1d9a7.js
4:08:36 PM: 85.7 kB pdf/holiday-hours.pdf
4:08:36 PM: 31 kB client/client.1c318959.js
4:08:36 PM: 6.97 kB client/Modal.b3b92b92.js
4:08:36 PM: 559 B client/inject_styles.5607aec6.js
4:08:36 PM: 9.77 kB membership/index.html
4:08:36 PM: 6.98 kB contact/index.html
4:08:36 PM: 147 kB pdf/covid.pdf
4:08:36 PM: 6.13 kB client/challenge-09933d5b.css
4:08:36 PM: 3.68 kB client/membership-6cb6803d.css
4:08:36 PM: 53.3 kB client/challenge.35ccb5eb.js
4:08:36 PM: 22.2 kB client/membership.7e2617e0.js
4:08:36 PM: 1.95 kB client/contact-aeeaa86e.css
4:08:36 PM: 4.57 kB client/contact.d086268f.js
4:08:36 PM: > Finished in 18.2s. Type npx serve sapper/export to run the app.
4:08:37 PM: ​
4:08:37 PM: (build.command completed in 18.7s)
4:08:37 PM: ​
4:08:37 PM: ────────────────────────────────────────────────────────────────
4:08:37 PM: 2. Functions bundling
4:08:37 PM: ────────────────────────────────────────────────────────────────
4:08:37 PM: ​
4:08:37 PM: Packaging Functions from functions directory:
4:08:37 PM: - membership/membership.js
4:08:37 PM: - occupancy/occupancy.js
4:08:37 PM: ​
4:08:37 PM: (Functions bundling completed in 237ms)
4:08:37 PM: ​
4:08:37 PM: ────────────────────────────────────────────────────────────────
4:08:37 PM: 3. Deploy site
4:08:37 PM: ────────────────────────────────────────────────────────────────
4:08:37 PM: ​
4:08:37 PM: Starting to deploy site from β€˜sapper/export’
4:08:37 PM: Creating deploy tree
4:08:37 PM: Creating deploy upload records
4:08:37 PM: 22 new files to upload
4:08:37 PM: 0 new functions to upload
4:08:38 PM: Site deploy was successfully initiated
4:08:38 PM: ​
4:08:38 PM: (Deploy site completed in 943ms)
4:08:38 PM: ​
4:08:38 PM: ────────────────────────────────────────────────────────────────
4:08:38 PM: Netlify Build Complete
4:08:38 PM: ────────────────────────────────────────────────────────────────
4:08:38 PM: ​
4:08:38 PM: (Netlify Build completed in 20s)
4:08:38 PM: Caching artifacts
4:08:38 PM: Started saving node modules
4:08:38 PM: Finished saving node modules
4:08:38 PM: Started saving build plugins
4:08:38 PM: Finished saving build plugins
4:08:38 PM: Started saving pip cache
4:08:38 PM: Starting post processing
4:08:38 PM: Finished saving pip cache
4:08:38 PM: Started saving emacs cask dependencies
4:08:38 PM: Post processing - HTML
4:08:38 PM: Finished saving emacs cask dependencies
4:08:38 PM: Started saving maven dependencies
4:08:38 PM: Finished saving maven dependencies
4:08:38 PM: Started saving boot dependencies
4:08:38 PM: Finished saving boot dependencies
4:08:38 PM: Started saving rust rustup cache
4:08:38 PM: Finished saving rust rustup cache
4:08:38 PM: Started saving go dependencies
4:08:38 PM: Finished saving go dependencies
4:08:38 PM: Build script success
4:08:38 PM: Processing form - Contact-Form
4:08:38 PM: Detected form fields:
4:08:38 PM: - name
4:08:38 PM: - email
4:08:38 PM: - message
4:08:39 PM: Post processing - header rules
4:08:39 PM: Post processing - redirect rules
4:08:39 PM: Post processing done
4:08:39 PM: Site is live :sparkles:
4:08:59 PM: Finished processing build request in 1m0.102163369s

No help from Netlify at all on this?

Hey there, @stordahl :wave:

Welcome to the Netlify Forums! Thanks for reaching out with these questions. I am sorry to hear you’ve encountered an obstacle.

Do you mind sharing your API ID and Netlify site name? These are both safe to share publicly. Additionally, I see you have read our posts about Svelte and Sapper, which was a great first step. Have you also read our Support Guide regarding our Form Debugging?

Hi @hillary ! Sorry for the late reply, hope you can still help with this issue. Here are those details
API ID: 41af8d62-5062-4961-b3c9-e6d5e7bbdb57
Site Name: evergreen-fitness

Currently the main deploy has the form removed but I’ll get a branch deploy up with the form asap and share it here!

Hi, @stordahl. I’m showing the deploy 603d65bdbeb5670008e176ad was the active deploy when this topic was created. I’m not showing any occurrences of β€œnetlify” in the HTML when I check that deploy. Below is the HTML sent for that path (/contact/) and deploy id:

<!doctype html> <html lang=en> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=#333333 name=theme-color> <meta content="Evergreen Fitness, located in Port Townsend, is dedicated to fitness
		in the community. A diverse range of classes are offered by our certified professional
		instructors including Les Mills. Evergreen offers a variety of memberships to help you accomplish
		your goals.  Amenities include, massage table, juice and coffee bar, tanning beds,
		sauna, and steam room.  Free child care with membership." name=description> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-131585737-1"></script> <script> window.dataLayer = window.dataLayer || [];
		function gtag() { dataLayer.push(arguments); }
		gtag('js', new Date());

		gtag('config', 'UA-131585737-1'); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=AW-771338235"></script> <script> window.dataLayer = window.dataLayer || [];
		function gtag() { dataLayer.push(arguments); }
		gtag('js', new Date());

		gtag('config', 'AW-771338235'); </script> <script> gtag('config', 'AW-771338235/9074CPnZvKsBEPvf5u8C', {
			'phone_conversion_number': '360-385-3036'
		}); </script> <base href=/ > <link href=global.css rel=stylesheet> <link href=manifest.json rel=manifest crossorigin=use-credentials> <link href=favicon.png rel=icon type=image/png> <script>__SAPPER__={baseUrl:"",preloaded:[void 0,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js');(function(){try{eval("async function x(){}");var main="/client/client.1c318959.js"}catch(e){main="/client/legacy/client.7063e565.js"};var s=document.createElement("script");try{new Function("if(0)import('')")();s.src=main;s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/client/shimport@2.0.4.js";s.setAttribute("data-main",main);}document.head.appendChild(s);}());</script> <link href=client/client-64810f1f.css rel=stylesheet><link href=client/Nav-ecf9315f.css rel=stylesheet><link href=client/contact-aeeaa86e.css rel=stylesheet> <title>Evergreen Fitness in Port Townsend, Washington</title> <link href=/client/client.1c318959.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/client-64810f1f.css rel=preload as=style><link href=/client/contact.d086268f.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/Nav.d0eed1e9.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/inject_styles.5607aec6.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/Nav-ecf9315f.css rel=preload as=style><link href=/client/contact-aeeaa86e.css rel=preload as=style></head> <body> <div id=sapper> <div class="svelte-1l7etts header-row row"><div class="svelte-1l7etts logo"><img alt="Mobile Logo" class=svelte-wm31kf src=https://res.cloudinary.com/ddud5cvlo/image/upload/v1604535381/FC-Horiz_Evergreen_Logo_ftizhd.png> <img alt=logo class=svelte-11patyv src=https://res.cloudinary.com/ddud5cvlo/image/upload/v1604695742/EF-Logo_wlz2gh.png></div> <div class="svelte-1l7etts location"><a class=svelte-1l7etts href="https://www.google.com/maps/place/22+Tahlequah+Rd,+Port+Townsend,+WA+98368/@48.0814498,-122.820412,15.32z/data=!4m5!3m4!1s0x548fec0093e1eff3:0x59135c94dedf50bf!8m2!3d48.0817878!4d-122.8152541">22 Tahlequah Rd <br>Port Townsend, WA 98368 </a></div> <div class="svelte-1l7etts login-register"><a class="svelte-1l7etts login-button" href=http://www.myiclubonline.com/ ><p class="svelte-1l7etts button-p">Login / Register</p> <div class="svelte-1l7etts icon"><svg class=svelte-c8tyih viewBox="0 0 512 512" xmlns=http://www.w3.org/2000/svg><path d="M256 256c52.805 0 96-43.201 96-96s-43.195-96-96-96-96 43.201-96 96 43.195 96 96 96zm0 48c-63.598 0-192 32.402-192 96v48h384v-48c0-63.598-128.402-96-192-96z"></path></svg></div></a> <div class="svelte-1l7etts icon"><a class=svelte-1l7etts href=https://facebook.com/evergreenfitnesswa><svg class=svelte-c8tyih viewBox="0 0 320 512" xmlns=http://www.w3.org/2000/svg><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></a></div></div> <div class="svelte-1l7etts phone-hours"><a class=svelte-1l7etts href=tel:3603853036 id=phone>360.385.3036</a> <p class=svelte-1l7etts>Monday-Thursday 5:30am-8:30pm</p> <p class=svelte-1l7etts>Friday 5:30am-7:30pm</p> <p class=svelte-1l7etts>Saturday & Sunday 8:00am-3:00pm</p> <a class=svelte-1l7etts href=/pdf/holiday-hours.pdf id=holiday-hours download>View Holiday Hours</a></div> <div class="svelte-1l7etts occupancy"><div class=svelte-1l7etts id=occ-box><p class=svelte-1l7etts id=occ-title>Current Occupancy:</p> <p>...loading</div> <p class=svelte-1l7etts id=check-in-promo> <a class=svelte-1l7etts href="https://signup.myiclubonline.com/iclub/signup/home#plans?clubNumber=7021">Promo Code</a></div> </div> <main class=svelte-92lrbf> <div class="svelte-12uhanf hero row" style=background-image:url(https://res.cloudinary.com/ddud5cvlo/image/upload/v1604535113/forwebphoto-10_gizuvs.jpg)><nav class=svelte-12uhanf><ul style=--menuDisplay:none><li class="svelte-12uhanf menuTab">Menu</li> <li class=svelte-12uhanf><a class=svelte-12uhanf href=.>home</a></li> <li class=svelte-12uhanf><a class=svelte-12uhanf href=membership>membership</a></li> <li class=svelte-12uhanf><a class=svelte-12uhanf href=/old-site/classes.html>classes</a></li> <li class=svelte-12uhanf><a class=svelte-12uhanf href=/old-site/amenities.html>amenities</a></li> <li class=svelte-12uhanf><a class=svelte-12uhanf href=contact aria-current=page>contact</a></li> </ul></nav> </div> <div class=svelte-13hcb2f id=gray-bar></div> <div class="svelte-13hcb2f contact-container"><form class='svelte-13hcb2f' method='post' name='Contact-Form'><input type='hidden' name='form-name' value='Contact-Form' /> <input class=svelte-13hcb2f name=name placeholder=name> <input class=svelte-13hcb2f name=email placeholder=email type=email> <textarea class=svelte-13hcb2f cols=60 id="" name=message placeholder=message rows=15></textarea> <button class="svelte-13hcb2f yellow-button" type=submit>SEND</button></form> <div class="svelte-13hcb2f contact-text"><h1 class=svelte-13hcb2f>We would enjoy <br> hearing from you!</h1> <p class=svelte-13hcb2f>Of course we’d like you to stop in, but feel free to email us at evergreencontactus@gmail.com</p> <p class=svelte-13hcb2f>Call our front desk at: (360) 385-3036 <br> or leave a voice mail with your contact <br> information at (360) 302-1132.</p> <p class=svelte-13hcb2f>Our mailing address is 22 Tahlequah Lane, Port Townsend, WA 98368.</p> <a class=svelte-13hcb2f href=https://www.facebook.com/pages/Evergreen-Fitness-Center/125078020903539>Like us on Facebook</a></div></div> <footer class=svelte-1l5eejj> <p class=svelte-1l5eejj>Β© 2021 Everygreen Fitness | Photography, design, and development by Bootstrap</p> </footer></main> </div>

No where in the HTML does β€œnetlify” appear. If you see β€œnetlify” in the HTML, what is the x-nf-request-id header for that response?

Hi @luke, the main deploy doesn’t have the form since it’s in prod and the form is broken. I’ve moved it over to a branch deploy which you can find here Evergreen Fitness in Port Townsend, Washington

Hey @stordahl :wave:t2:

And welcome to the forums :netliheart:

For starters, what is β€œthe BE”? That’s the second time I’ve seen β€œBE” in the forums in the last couple of days but I have no idea what it stands for :stuck_out_tongue:

Why

Anyway, I believe you’re experiencing a common issue with javascript frameworks / SSGs that leverage a workflow similar to React’s render-on-server then hydrate-on-client: where the javascript framework runs during the static build to build the HTML tree into files, then once those files are loaded into the client’s browser, React re-hydrates the virtual DOM and attaches to the current markup / HTML via a β€œhydrate” process. This process was designed to work when the raw HTML markup printed to files in the build / renderToServer is totally untouched and unchanged by the time it gets to the client’s browser. Netlify Forms technically breaks that promise β€” it changes the HTML after the files have been created but before the code hits the browser. As such, the Javascript framework tends to re-write the HTML in the DOM to fit what it wants it to be: what you wrote in your editor… which is the version with the netlify tag and no form-name attribute.

That workflow and discrepancy is specifically why I wrote react-ssg-netlify-forms, a React library for making Netlify forms β€œjust work” the way you’re wanting them to with Sapper. Personally I don’t know a lick of Svelte and honestly didn’t know that Svelte also had this kind of server/hydrate premise yet, but neat!

Proof

We can see what’s going on here by checking out the HTML file contents that Netlify delivers before Svelte spins up in the browser and starts playing with the DOM in two ways. First, we can just query your site on command line and see what the raw content back contains:

(Using httpie)

$> http https://fix-form--evergreen-fitness.netlify.app/contact/

lots of other stuff....
<form action='POST' class='svelte-13hcb2f' name='Contact Form' method='post'><input type='hidden' name='form-name' value='Contact Form' />
....lots of other stuff

Good! That means that the Netlify Form scanner did its job and correctly injected the form-name while removing the netlify tag.

Alternatively, we can disable javascript in the browser then load your contact page (https://fix-form--evergreen-fitness.netlify.app/contact):

Then on the flip side, if we make sure the page is generated via Javascript (I did this by hitting β€œHome”, then β€œContact” again since this is an SPA and I wanted to force the Contact page to be generated / loaded by JS) what happens to the HTML?

That’ll do it.

The Fix

Short of writing a library that does a similar job as mine, just for Svelte, the easiest and quickest way to fix this problem and get your forms working is to just add the <input type='hidden' name='form-name' value='Contact Form' /> to the form code you wrote in Svelte. I know that may seem counter-intuitive and/or overkill, but that’s the simplest way to make sure that the form-name parameter is present when the page is loaded via JS. That form field not being present in the submission is almost certainly what’s causing your 404 β€” Netlify gets this form POST but has no idea what Form it goes to :stuck_out_tongue:

Hope that helps!

–
Jon

1 Like

I believe your other site is already doing what I’ve recommended β€” forcing a manually-added hidden form input with the form name so that when Svelte overwrites the changes Netlify Form Bots made (as evident by the data-netlify="true" being present), the form-name is still there:

Hi @jonsully ! Really thought this was going to be the solution, but I’ve followed your instruction and I’m still getting a 404 error when submitting. Your logic totally makes sense, and after looking in the src for the second site you mentioned, I am indeed adding the hidden form-name input rather than having netlify added. But still the problem persists. ugh!!!

WOW i mistakenly had the POST set as an action on the form, not a method. Changed that and your hack worked @jonsully ! Thanks so much for your detailed insight on this issue; much appreciated!

2 Likes

I had to google it myself actually but I believe the answer is:

  • BE = build environment

It looks like everything else here is resolved but I though I would chime in with that small bit of information.

1 Like

Ahhhh! Thanks Luke! :grin::grin: