Netlify Form Detection

[shootyourbricks]

Netlify automatically detects html forms during deployment. WebStudio forms (and html forms in an embed component) are not detected unless the entry-server-routing.js file is removed from the static build.

Steps to reproduce bug:

1. Create a form in WebStudio (can be form component or html embed). Form must have data-netlify="true" as explained in Netlify's docs
2. Deploy dynamic site via CLI or static site via Github or File upload to Netlify
3. Check Netlify Forms UI or try submitting a form response. The form will not submit or show a response because Netlify didn't detect it

Steps to get the form detected (NOT an ideal workaround)

1. Create a form in WebStudio
2. Export static files
3. Delete entry-server-routing.js file (or remove the reference to the script in the affected form page)
4. Deploy to netlify.

[shootyourbricks]

How important is the server-routing.js script? Would it be bad to remove it from one page as a temporary work-around?

[JayaKrishnaNamburu]

Hey @shootyourbricks i started looking it today. Will share more details tomorrow 👍🏽

[JayaKrishnaNamburu]

@shootyourbricks can you confirm if you are using the ssg-netlify template for the static file export ?
i checked the actual bug, if we export as netlify-functions netlify is not detecting the form. Which i am looking into if it's a bug on their side or in our template.
The other thing is, if you export as ssg-netlify you don't need to delete entry-point file. Because it's not generated. Can you confirm how are you exporting static files.

[JayaKrishnaNamburu]

Here is a detailed analysis on why the netlify form detection is not working right now. It is because of @remix-run/react and react-router-dom. And the form that is being used on the canvas is a wrapper around the Form from the @remix-run/react package.

The webhook-form that is available is not the best bet for the use-case. The other workaround is try using code-embed, but need some more testing on the solid use-case

Here is a total analysis of the use-case, i opened an issue on netlify. Because even they need to find a solution or else their form detection won't work out of the box anymore.
netlify/cli#6955

cc @kof

[shootyourbricks]

@JayaKrishnaNamburu For static export I'm using the publish->export feature in the WebStudio dashboard.

I'm not familiar with ssg-netlify. Is that a static deployment via the terminal?
Edit: Ah yes. I see the option. I'll try to figure out how to do it that way and see if it works.

[kof]

In other words netlify needs to fix their hack, otherwise user needs to use a regular Form component, not a Webhook Form, which uses Remix Form and Netlify breaks it. With a regular form user can't use webstudio form handling logic and need to integrate something external.

[shootyourbricks]

Here's the thing though. I'm not using a webhook form. I even tried embedding a form via html component and that didn't work either

[kof]

@shootyourbricks in what sense it didn't work? regular form element doesn't have functionality beyond submitting regular html form...

[shootyourbricks]

@kof Netlify didn't detect the form unless that js script was removed

[shootyourbricks]

I'm trying to test netlify ssg, however I have not been successful as I am running into an unrelated error. Posted a help post on Discord. Will share my results as soon as I have it figured out.

[JayaKrishnaNamburu]

Here's the thing though. I'm not using a webhook form. I even tried embedding a form via html component and that didn't work either

Currently, the Form and Webhook Form in the builder are being used from Remix which are in return using React Router Dom which fails. It's a story that netlify to come up with a solution. More details are here on netlify cli with reproducible examples for them netlify/cli#6955

Second, i created and tested a custom code form which also netlify fails to detect. This is something i am still checking on myself, if its a remix side bug, that blocking the detection or netlify itself is failing again. Will share more updates later today 👍

[JayaKrishnaNamburu]

Ok, i have spent some good amount of time in the last couple of days in this. The actual forms detection behind the netlify.com is bit of a black box. So, it took multiple trail and errors to get to this conclusion.

• Netlify can't detect forms if it's deployed as a remix project.
• Remix adds action to the form, and probably there need to be a action handler similar to webhook form. And seems like webhook form is the only way going forward.
• The third trail which i got to work is, do a form in webstudio. And then build / export the project as ssg-netlify template. And when you deploy this, only then netlify is able to detect. And again, probably this might not be the good us they have. First you need to deploy this ssg-netlify site and then go to forms and then enable form detection. Next you need to redeploy again for the form detection to kick in. And then it's starts tracking. Basically you need to deploy two times, and switch on the detection in between these two steps.

[shootyourbricks]

Thanks for working on this.

And seems like webhook form is the only way going forward.

I don't quite understand what you're saying about the webhook forms. Are you saying it's better to use the webhook form? Which did you use in the example? Netlify works with actionless forms in plain HTML files (not ws).

I successfully got Netlify to detect a regular form with the SSG and two deploys as you explained but the form wouldn't submit. It would go to a 404 when submitting.

[JayaKrishnaNamburu]

I don't quite understand what you're saying about the webhook forms. Are you saying it's better to use the webhook form? Which did you use in the example? Netlify works with actionless forms in plain HTML files (not ws).

If you are looking to deploy the app as a remix application. Then it is webhook form.

I successfully got Netlify to detect a regular form with the SSG and two deploys as you explained but the form wouldn't submit. It would go to a 404 when submitting.

Check if you are redirection to some page under the action value in the from. If you are uploading plain files from the ssg-netlify approach then it should work. If not, share your project link, i can check once.

[shootyourbricks]

@JayaKrishnaNamburu There is no action for the form. In fact it looks like even though Netlify detected the form, it hasn't changed any of the actual attributes. "data-netlify" is still there and the hidden input is missing.

Here's the link for the webstudio project: https://p-bc461e1d-1866-4bbc-b54f-dae4c136fd5b.apps.webstudio.is/?authToken=e5fd87ef-8ba2-4a56-93d3-2a5bdae6e1cf&mode=preview

Here's the link to the deployed site on Netlify: https://ws-form-test.netlify.app/

EDIT: read below messages before debugging to save time :)

[shootyourbricks]

@JayaKrishnaNamburu Are you able to take a look at my project? I have both the HTML form and a native WebStudio form which are both detected by Netlilfy, but still don't work.

[shootyourbricks]

I got it working by adding a hidden input with the name value of "form-name" and the value as the actual form name (in this case "contact" and "WSNative") This is what Netlify was supposed to add during form detection. Did you have to add that manually? @JayaKrishnaNamburu

[shootyourbricks]

It looks like if I remove the entry-server-routing.js script the deployment works as it should (I remove it after running the netlify build command but before running netlify deploy)

Why is this script being created when using the ssg template? @JayaKrishnaNamburu

[shootyourbricks]

NOTE: It seems that the entry-server-routing.js script that blocks form detection/processing (the form is detected but the HTML isn't changed even on static files) and the whole problem with Remix apps are separate.

Looks like there's a workaround for the Remix app side of things, so I made a GH discussion for that as it is something that Webstudio would have to implement. So I'd like to focus on the js script here in this thread.

[JayaKrishnaNamburu]

Looks like, netlify don't work with auto detect when used along with any framework. Which they shared it in their GitHub issue here
netlify/cli#6955 (comment)

So, there is a workaround which is shared by their team
https://opennext.js.org/netlify/forms#workaround-for-netlify-forms

Which is not possible to implement using the builder at webstudio.is if you want to follow the auto detection route for forms. I built an example by following the steps for form-name and input-name. But netlify still doesn't seem to detect them in the netlify-functions neither in ssg-netlify templates.

And regarding to your question on

It seems that the entry-server-routing.js script that blocks form detection/processing

Currently when you select a netlify template. It generates a entry.server.tsx file. And ssg don't generate that too. But i am not sure why you have entry-server-routing.js file. Share the template name that you are using.

I am not sure, if the workaround that netlify team is suggesting can be built right into the wwebstudio build system. More in this @kof can help if we ever decide to bring in support for that workaround. Because tomorrow the team might come up with new workaround and the builder can't implement and break existing ones.

Bottom line, netlify form detection doesn't work with anything other than plain html files.
https://answers.netlify.com/t/netlify-cli-cant-detect-forms-from-when-deploying-remix-app/135876

[shootyourbricks]

Currently when you select a netlify template. It generates a entry.server.tsx file. And ssg don't generate that too. But i am not sure why you have entry-server-routing.js file. Share the template name that you are using.

Whether I use the netlify-ssg template or simply export and download static files for vanilla or netllify builds, I always get the js script

Here's my project https://p-3e6aec26-235a-41d3-a79b-6dc9a6e8f287.apps.webstudio.is/?authToken=37314ef1-5936-406d-9d7a-729638817506&mode=preview

Attached is the index.html file (renamed to .txt) and you can see the script at the bottom. /assets/entries/entry-server-routing.CcTuSK9F.js That's the one that keeps the form detection from fully working
index.txt

[JayaKrishnaNamburu]

Ok, i took a little bit deeper look on the build setup for ssg builds. Looks like, when you download a static site from webstudio. It generates a static build and the dist is shared back as a zip for the users. But the catch is, even when the prerender is enabled. Which you can check in the template here
https://github.com/webstudio-is/webstudio/blob/main/packages/cli/templates/ssg/vite.config.ts#L5-L7

webstudio/packages/cli/templates/ssg/vite.config.ts

Lines 5 to 7 in 4f026a0

	export default defineConfig({
	plugins: [react(), vike({ prerender: true })],
	});

If you look around here
https://github.com/vikejs/vike/blob/962127b7cc2fe5849eb1f9373f92d1bbeb7cb308/vike/node/plugin/plugins/buildConfig.ts#L151-L169

const clientRoutingEntry = resolve(`dist/esm/client/client-routing-runtime/entry.js`)
const serverRoutingEntry = resolve(`dist/esm/client/server-routing-runtime/entry.js`)
if (hasClientRouting) {
  entries['entries/entry-client-routing'] = clientRoutingEntry
}
if (hasServerRouting) {
  entries['entries/entry-server-routing'] = serverRoutingEntry
}

By default vike injects this entry-server-routing.js file. I am checking with their team. On what's the role that these files, and if it's ok if they are deleted. They might be redundant ones and safe to delete. But will confirm once i check with their team 👍
Will keep you posted.

[JayaKrishnaNamburu]

Hey, i still haven't gotten any update from them. So, opened a discussion on the vike repo. To get some opinions on it
vikejs/vike#2056

But honestly, all these tools, vike, webstudio etc are working as expected. It's just that netlify's form detection and auto form handling doesn't work out of the box with any js based frameworks. They just work out of the box with pure .html files.