Netlify form resubmitting on page refresh (Safari only)

Support
,
1

After a form is submitted on safari the site will try to resubmit the form upon browser refresh. This is regardless of which page is navigated to following the form submission. No other browsers I tested reproduced this behavior. The submission is received successfully in the Netlify dashboard in all cases including safari. I’m using React in Next.js on the default server side rendering configuration. Any help debugging this problem would be appreciated.

2

hi there @Eddie-Anguiano ,

have you made any progress with this at all so far? Is it working in other browsers?

3

Thank you for the response. Sadly no, the problem persists. Out of browsers I have tested these are the results.

Woking: Firefox developer edition (desktop), chrome (desktop)

Not working: Safari (desktop), Safari (mobile), Chrome (mobile)

Here is a link to the GitHub if anyone has any suggestions. Thanks.

4

Greetings @Eddie-Anguiano :wave:t2:

And welcome to The Forums! :netliheart:

I just ran through a couple of tests and I don’t think this is a “you” problem, I think this is actually something worth looking into a little deeper. I’m going to tag both @perry and @Dennis on the following bit of curious process. It appears that the Netlify Forms POST handler responds with a 200 and the content of the action-specified-page (or the default Netlify “Thanks” page) in the response body, rather than responding with a 302 to the specified action, a pattern used specifically to prevent resubmissions on browser Refresh. I don’t know if Forms has always been this way but this does seem like an issue to me :thinking: I setup two repros to see if it happens both with action-specified forms and non-action-specified forms:

As rendered on https://test-forms.netlify.app/action, the entire page content is:

<form action="/success" name="action_form" data-netlify="true">
  <input type="text" name="input"/>
  <button type="submit">
    Go 'head
  </button>
</form>

And the build process caught it just fine. Upon submission I’m seeing the content coming back as the response body in a 200 response to my POST rather than a 302.

image
image1550×1182 160 KB

Similarly, as rendered on https://test-forms.netlify.app/no_action, the entire page content is:

<form name="no_action_form" data-netlify="true">
  <input type="text" name="input"/>
  <button type="submit">
    Go 'head
  </button>
</form>

And the build process caught it just fine. Upon submission I’m seeing the content coming back as the response body in a 200 response to my POST rather than a 302.

image
image1946×1146 181 KB

Has Forms always responded this way? :thinking: This behavior does indeed cause page refreshes on the ‘success’ page to re-submit the form. Most browsers prompt the user “Are you sure you want to resubmit the form?” but some browsers don’t and just go right ahead with the POST :stuck_out_tongue:

–
Jon