I’m encountering issues with the form on my Webflow website. I’ve included data-netlify="true" as shown in the attached screenshot, but I keep getting an error message.
What could be causing this issue? I’ve attached the link to the website. Any help would be greatly appreciated!
Hey there @maxx92
Just a couple questions here.
Hi Andrew,
After sending the message, an error appears stating that an issue occurred during the submission (see attached screenshot). Additionally, here’s the read-only link from Webflow in case it helps:
Best regards,
Maxx92
There’s a few things wrong.
The main thing, is that form isn’t even submitting to Netlify, it’s submitting to Webflow.
This is occuring due to JavaScript.
There’s plenty of JavaScript on the site for form handling that constructs the submission endpoint URL and controls the submission behavior of the forms:
Additionally the ‘Custom attribute’ is being added to the containing div, not to the form itself:
To fix you need to ensure:
data-netlify="true" is on the <form elementI just can’t seem to get it to work, and I’ve been trying for several hours now.
I’ve already ensured that no JavaScript is hijacking the behavior of the form to submit elsewhere, verified that the data-netlify="true" attribute is correctly placed on the <form> element, and confirmed that form detection is enabled for the site.
Despite these efforts, when I submit the form, the error message shown in the attached screenshot appears. The updated link to the website is: mornari apartments.
I’d be very grateful if someone could take another look at this!
@maxx92 As you’ve highlighted in your own screenshot, the form attributes are in the wrong spot.
They need to be in the form opening tag, not the form closing tag.
I know the form hasn’t been processed by Netlify as the form-name input hasn’t been auto inserted.
Despite making the following adjustment, the same error message continues to appear. I’m really sorry, but I’m not very experienced with HTML and might be overlooking something.
I have now added a second form with the following code to the same page, but I am experiencing the same issue with both forms. After submitting, I receive the error message that the page could not be found, as shown in the screenshot above. Additionally, I tried disabling both JavaScript files, but the result remains the same.
When I click “Enable form detection” in the Netlify dashboard, I see the message that it has been activated, but no forms are listed. Does this mean that the forms are not being detected?
Here is the form code I added for the second form:
<form name="contact" method="POST" data-netlify="true" action="/">
<input type="hidden" name="form-name" value="contact">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Submit</button>
</form>
Website-Link: polite-sunburst-6773dc.netlify.app
@maxx92 You need to enable form detection, (which it sounds like you’ve now done).
Once it’s enabled you need to trigger a new build/deployment of the site.
At which point you should then see the forms detected in your build log.
I’m not convinced the forms are being processed as they shouldn’t have the data-netlify="true" attribute once they’re processed, as per what it says in the documentation:
https://docs.netlify.com/forms/setup/#html-forms
When Netlify parses the static HTML for a form you’ve added, the build system automatically strips the
data-netlify="true"ornetlifyattribute from the<form>tag and injects a hidden input namedform-name. In the resulting HTML that’s deployed, thedata-netlify="true"ornetlifyattribute is gone, and the hiddenform-nameinput’svaluematches thenameattribute of<form>
Both forms are in a weird state where they’re showing as having the form-name input (I’m not sure if you added it manually), but still have data-netlify
Thank you for the clarification. I understand now that Netlify automatically injects the form-name hidden input during the build process when it parses a form with data-netlify="true" or the netlify attribute. This means manually adding the hidden input shouldn’t be necessary for the form to work correctly. If I’m still encountering the issue ‘page not found’ error after submission, the problem likely lies elsewhere, such as the form action, redirect settings, or server configuration.
thanks for sharing this with the community!
