Deploying to Netlify with forms

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

I'm in no rush btw.

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.

Cool thanks

not sure if this applies to our situation but posting incase someone understands more than I do about this

Any progress yet?

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/

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.

@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.

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.

Ohh

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

Or I can try that too

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?

This? https://www.youtube.com/watch?v=-ZIUpvoCXQU

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

this one https://www.youtube.com/watch?v=Gr1jPtsg6_Q

except the package is now webstudio

Yeah I did follow that one

Hi, has anyone managed to set up a working form on Netlify?

Let me share a bit of my experience (without success):

1. I tried setting up a webhook form – it doesn’t work.
2. I set up the form manually. Added form, inside it inputs, and button=submit.

In both cases, I added the following parameters:
method=post
data-netlify=true
and so on.

In Netlify’s documentation, I found that when it detects a form with the additional netlify parameter (or data-netlify=true), it removes this parameter and adds an invisible input type=hidden inside the form as a result of successfully finding the form.

But in my cases, this did not happen – all the attributes remained in place, and no additional input was added… and consequently, Netlify did not detect any forms on my website…

I got the impression that Webstudio renders the data in such a way that the HTML form code bypasses the Netlify parser (if we can call it that) and is displayed by the browser without being processed by Netlify.

Netlify forms don't work at all when using a dynamic app (the CMS functionality) but you could just use a CMS to do forms

If you're using a static site, manually add the form attributes as well as the hidden input that Netlify is supposed to add itself, deploy once after turning on the form detection and you should be good to go

Let me know if you need anymore clarification or anything 🙂 :

I spent all day trying to figure out how to make it work... and it took 15min after I saw your message. Thanks! @Luke AKA Shoot Your Bricks
Instructions next:
prepare raw index.html file with simple form you need with all inputs and names and attributes. Upload them first to netlify. Make sure netlify detected your form. Then upload your exported static Webstudio site (which has form with the same inputs names and attributes + hidden input)

No problem! I spent a while trying to make it work myself 😅