Form submission - working, BUT action path is not working

Support
1

I have created a netlify form on my website, flexion.tech.

The form is able to submit correctly to netlify forms, however, the action redirect always returns the following error…

form-submit-error
form-submit-error1077×627 21.9 KB

When I select the URL from the resulting page, and press enter, the page loads correctly.

The form element is set as follows:

<form name="subscribe" action="/thank-you" class="subscribe__form"  method="POST" data-netlify-recaptcha="true" data-netlify="true">

The input elements have a name.

Also I am using <button type="submit">Subscribe</button>
rather than input element.

you can see the issue live on my website, using the subscribe button.

Appreciate any assistance!

Thanks,

James

2

Hi,

I guess the problem is that when you submit the form, you send a POST request to the thank you - Flexion page - while when you open the url directly in the browser, it sends a GET request.

The <form> tag’s action should point to an endpoint where you handle the form data (in your case the name and the email).

Redirecting the user to the thank-you page should be a different and separated action, for example:

  • when the POST request succeeds, then navigate the user to the thank you page
  • otherwise show an error message
2 Likes
3

Thanks for the info. that makes sense! I will see what I can do to get it working and provide an update later today.

4

I have tried a few things, still without success unfortunately.

I have removed theaction attribute from the form. The form does submit to Netlify forms, however, I still get the error mentioned in the first post.

In addition, the first post is in line with the netlify documentation:
https://docs.netlify.com/forms/setup/#success-messages

The forms are still being submitted as expected with the action attribute removed.

5

I have continued to try and debug this error today. Still no luck, but I have been able to uncover something that might help point out the issue. When I view the network submission in Edge/chrome I am able to see a failed record, right before a successful POST.

form-submit-error-2
form-submit-error-2996×82 5.53 KB

when I select this record, I see the following details (note, this information is not available in firefox when view Network tab, with preserve log checked.

form-submit-error-3
form-submit-error-31273×712 48.9 KB

Directly following this error, there is a POST which succeeds. Working for both browsers also…

image
image1257×244 14.3 KB

So really, functionality is perfect, I just need to stop the error occurring JUST before the post, and the thank-you screen should be displayed. I can see it from the NETWORK tab:

image
image1051×802 40.9 KB

Hope someone can tell me what I am doing wrong!

Thanks,

James

UPDATE: Tests have been done on windows 10.
This error does not occur in my iphone.
It does occur on os x Safari.

UPDATE 2: I have now found that the error is happening when javaScript is enabled. If disabled, functionality works as expected. When i went into the debugger, i found the following error in Firefox:

image
image1078×339 21.4 KB

It is suggesting an issue with DNS Server.

Glad it is working without JS. I will now try to get things working with JS, and this should give me progressive functionality, which is what I was after anyway, but, still does not explain the issue…

6

So, I have just run another test. I have deployed my site to a second netlify page https://flexiontest.netlify.com/ to test.

This is working as expected. Form is submitted, and I get a success message back.

I have added some vanilla JS to submit the form.

On my original site, flexion.tech, I have now deployed the exact same code base, however, I still get an error, however, the vanilla JS now catches it at least.

Even when I get the error, the form is still submitted.

I am still trying to resolve this issue.

7

Hi James & sorry to be slow to get back to you!

Looks like you got things working? I just posted to the form on your main page, the form was processed, and no errors were observed.

If that was the wrong form, please link me to the right one so I can take a look next week when our office reopens!

8

Hey fool! no worries. Yes I reached out to the twitter community who pointed out there may be an issue with the serviceworker.js. I have added flexion.tech to EXCLUDED_URLS url… which seems to have fixed it for now.

Will update this ticket once I am 100% sure the issue is fixed. will be in the next 48 hours.

Thanks,

1 Like
9

sounds good, let us know either way ! :slight_smile:

10

Happy that this has worked now. I have a report of a false positive on the form submission now, which is bothering me quite a bit. I have not been able to re-produce the issue…

My concern is it is the opposite to the false negative that I was getting in this issue.

11

makes sense that that is concerning. If you see a pattern, please let us know.