Receiving multiple entries for a single form

this is @janek writing from my client’s production account. The form in question is:

About 15% of answers there are duplicates. I was able to speak with 2 of the people that submitted them, and they were both in Safari for iOS. I was able to reproduce the issue on desktop just by clicking the submit button really fast.

As a developer, I feel like everything is done as per your docs, and almost too simply to be buggy (plain HTML, no frameworks).

I absolutely do not feel you should be obliged, but I would feel very grateful if you would credit this account with a higher response limit for forms for this month, in light of this (especially if you need a few submissions for your debugging).

Please let me know if I can assist you in debugging this further.

Hi, @connected-spaces. See four pairs of duplicate submissions (using a criteria of two submissions in a row with the same email address).

The only thing that sticks out to me is that all four duplicates were reporting AppleWebKit in their user-agent strings.

This confirms that, for the clients that sending the form submission twice, they all were using the AppleWebKit browser engine. In fact, one user agent shows an Android device but that user-agent also says “AppleWebKit”. Maybe they were using Safari on Android but it does appear to only happen with AppleWebKit user-agents.

I hope this helps narrow down the issue. I’ve also issued an adjustment for the forms usage and you can downgrade back to forms level 0 now here:

https://app.netlify.com/sites/connectedspaces/settings/forms#usage

​Please let us know when you have completed the downgrade and we will make sure you are not billed for the prorated time window when forms level 1 was active. (To be clear, we need the downgrade to be complete before we can successful adjust the difference so there is no charge.)

If there are questions about any of this, please let us know.

Hey there, @jdco :wave:

Welcome to the Netlify Forums and thanks for reaching out about this. Sorry that you are having form submission issues.

One of our engineers has looked into this. If you submit a form, it will create a form submission and redirect you to /thanks . If after that you refresh the page (while being on the thanks path), a new form submission will be triggered. In theory, this can also explain why the fourth submission happened significantly later. Let’s imagine the following series of events:

  • Your site visitors submits a form and leaves the tab open
  • Then, they close the computer but leave the browser open
  • Later, upon logging in, the browser reloads every open tab, causing another form submission

Let me know if this gets you on the right track. If you have further follow up questions, please let us know!

Thanks @hillary

From what I’m seeing the recommended way to deal with this is a “post-redirect-get” flow. Where the post gets handled and redirected to a get. I’ve tried finding some guides/tips in the Netlify documentation, but am not seeing any.

The implementation I had used was directly from the documentation (Forms setup | Netlify Docs, specifically the success messages section). Is there something missing from the documentation about how to resolve this behavior?

You shouldn’t need to build anything like that unless you are REALLY bummed out by an occasional duplicate post; I never advise anyone to do anything except accept POSTs to their endpoint directly, so no, I wouldn’t say anything is missing from the docs for handling this rare edge case.

It’s true; you could receive duplicates, yes, but I wouldn’t expect that it happens often enough to need you to do anything about it except ignore them yourself as you respond to the submitters? If it does, we’ve only really seen this in bulk from mobile users (who can leave a page open on their mobile device, and some of those browsers seem to repost form contents triggering multiple submissions), so then perhaps it makes sense to have the redirect flow (but you could do it client side using <meta refresh...>).

Another flow you could use is to use the event-triggered function to process your form submissions: Trigger functions on events | Netlify Docs . That would allow you (should you want to) to do an API lookup of past form submissions (Get started with the Netlify API | Netlify Docs) to avoid “doing whatever it is you don’t want to duplicate”, which wouldn’t require changes to your front-end.