Join the Webstudio community

Updated last month

Deploying to Netlify with forms

At a glance

Community members are discussing issues with deploying forms to Netlify. They have tried various approaches, including using the Netlify form attributes, webhook forms, and embedding basic HTML forms in a WebStudio project. The main issues seem to be that Netlify is detecting the forms but not receiving the form submissions, and that the generated HTML from WebStudio is behaving differently than the basic HTML form example. Some community members have suggested that the issue may be related to the WebStudio deployment process or the server routing JavaScript file. They are continuing to investigate and test different approaches to resolve the issue.

Useful resources
So I know this might not be a webstudio thing as it relates to Netlify, but has anyone had luck deploying to Netlify with forms detection?
1
L
E
p
49 comments
I have the form attribute set up but it still hasn't detected the form after several deploys
I'm running into this as well @Luke Monroe .

Netlify seems to recognize the form as per the deployment log. It detects the form and lists the fields. Even the form UI does show the name of the form BUT I cannot get any form post to arrive at netlify.

The other weird thing is that the Honeypot attribute and netlify attribute is not stripped out like the netlify docs say they will.

I'm a little stumped but I'll post here if I figure something out.
don't know if this helps, but i had sth. similar on vercel.
If you use a webhook at the form action and connect it to sth. like make.com or zapier, u get the forms working.
Thanks for answering. Hopefully we'll get this working.
I haven't even got the forms ui to show anything tho.
What's the Honeypot attribute that you mentioned?
Is this for a normal form or webhook form?
Webhook form.
I'm trying to use the normal forms. Maybe that's my problem.
@Echo Are you using normal forms or webhook forms?
Normal forms and this is the link to the Spam prevention Honeypot instructions https://docs.netlify.com/forms/spam-filters/#honeypot-field
Good to know. Would you mind sending me the view link to your website or the code/setup for your form so I could compare our forms?
I'm interested to see if I can figure out the difference between the two and find a solution
Oh sure! I'm going to do a few things first too like deploy a bare minimum site in netlify with with their sample html. Then one with a bare bone webstudio project to see if any of the classes or attributes there mess something up.

Right now I disabled the form in webstudio by hiding it and exporting. I'll re-enable that soon and send you the links.
not sure if this applies to our situation but posting incase someone understands more than I do about this
Attachment
20241201_115021.jpg
is the question to the core team?
I don't know enough about the situation to determine if it's a problem for the team or not. It's quite possible that this is just something on Netlify's end
Not yet @Oleg Isonen . We're trying to confirm if it's a netlify issue or if something webstudio is doing to the form to make it incompatible.

@Luke Monroe I haven't moved on this yet but I have some time tonight where I will dig in. I did some other static site changes in webstudio here: https://lgdg.org

The contact form is still hidden but I'll update later today.
Ok so first test with the most basic of HTML page with html from https://docs.netlify.com/forms/setup/#html-forms works as expected. The form was detected and I received a value in the backend of Netlify:

https://verdant-chebakia-c0f5d3.netlify.app/
Attachments
image.png
image.png
Ok and here is a BARE bones webstudio form trying to reproduce the basic HTML version: https://lucent-flan-52b6ac.netlify.app/

The generated HTML and behavior is different. You can see in that second one where the netlify attribute is NOT stripped out like it should. Also, the submit button posts back and changes the query string to:

https://lucent-flan-52b6ac.netlify.app/?name=test&email=test%40test.com&role%5B%5D=light&message=test

This is a different behavior and seems to break the netlify HTML forms detection.

This may be something @Oleg Isonen as the form post seems to work differently than a minimalist HTML implementation.
Netlify reports that it finds the forms but the form submission does not get posted to Netlify's backend.
Attachment
image.png
@Echo will look into this later today or tomorrow. What happens if you take the basic HTML form and put it in the webstudio site via an HTML embed?
@Luke Monroe here is one that I used the basic HTML template from test #1 up there in a html embed within webstudio: https://aquamarine-duckanoo-20cd73.netlify.app/

The POST seems to still happen and redirects to some netlify resource BUT no form submission and the tags still exist if you inspect the source.
Attachment
image.png
so something is off when it's within a Webstudio "shell"
Yeah. Maybe something to do with how it's deployed
This isn't related to webstudio but it might be a similar issue
Comparing the source of these two show the difference:

https://verdant-chebakia-c0f5d3.netlify.app/ - Basic HTML template deployed to netlify
https://aquamarine-duckanoo-20cd73.netlify.app/ - Same Basic HTML template within a webstudio HTML Embed deployed to netlify
Perfect I'll take a look at those
Hmmm yeah I'm just using the Publish -> Export -> Build and download static site to create that package. No Webstudio CLI or netlify customizations.
Must be how the page is put together
for sure. I'll look at the Webstudio CLI Netlify options and diff the output with this basic static output
I'll check that later today.
You could try taking the resulting html from the webstudio embed and making it a direct file for Netlify and then tweak it until it works
Ok I tried embedding the Netlify example form in WebStudio, exporting the static site and hosting it on Netlify.

I first tried hosting just the plain HTML file and nothing else. That worked.
Next I tried hosting all of the exported files including the js scripts (entry server routing and pages index) That didn't work.
I then deleted the entry server routing js script and it worked again. So something in the server routing js is messing it up @Oleg Isonen
Have you tried step by stem from scratch as we showed on yt?
I didn't but I'm watching it right now to check if I did it right
Yeah I'm just exporting it. I tried vanilla and netlify and they both don't work with that server routing js code EDIT: Tried the vercel build on Netlify and it's the same way
Used the button to build and download
Works as soon as I remove the entry-server-routing.js
no, dynamic version
Yeah for the dynamic version I followed the steps exactly. Did it on two different computers actually and successfully got everything but the forms working on netlify
except the package is now webstudio
Yeah I did follow that one
Add a reply
Sign up and join the conversation on Discord