Multiple Form Submissions on one weboage

I have my webpage setup in a way that allows one user to input their information then input user information for other members of a group. I’d essentially want the user to input this info and other users’ info then have it show up in the Forms section of Netlify as multiple entries upon clicking “submit” as opposed to the user inputting one user’s info then clicking submit and inputting another user’s info and clicking submit and on and on… Is this possible with Netlify? How can I code for it?

Yes, it is.

How you code for it would depend on your site and precisely what you were trying to do.

If you really do want to do multiple independent submissions, (to appear as such in the Netlify Forms UI), the simplest way would be with client side JavaScript that handles submission and performs separate AJAX POST’s…
https://docs.netlify.com/forms/setup/#submit-html-forms-with-ajax

If you’re trying to do something more adavanced, you would submit the form to your own custom Serverless Function.

Do you mind reviewing the code I have or recommend where I can have the code reviewed to have it edited? I tried implementing the AJAX script myself but nothing is happening on the backend

Hi, @marioS97. Having someone review the code you write is normally a job that you pay someone to do. Our support team can troubleshoot Netlify’s services and the code we write but we do not have enough resources to troubleshoot customer code.

@nathanmartin (who is not a member of the support team) or someone else here on this support forum may be willing to debug your code for free but our support team does not have time to do so.

We can provide support for custom code with an Enterprise plan that has a specific add-on to include this this type of support. To clarify, even for Enterprise teams, we do not troubleshoot customer code unless you pay extra for that add-on service.

I can say that what you want to do is definitely possible at Netlify. You would need to write the code in a way that each submission was an individual HTTP request to submit the form.

In other words, the client-side javascript would create a new form submission for each user. When the submit button is clicked, the client-side javascript will make POST requests for each form submission required. So, if information is enter for ten people, then ten POST requests would been sent with the submissions details to the form endpoint.

@marioS97 The method outlined by @luke is precisely what I was suggesting.

If you post a link to your site and/or a public repository with your source code I could probably tell you why your submissions aren’t working, or why you’re not seeing multiple.

But I’ll only be pointing you in the right direction, I’m not going to edit code or provide detailed instructions.

1 Like

@nathanmartin and @luke I do want to emphasize that I am willing to pay someone to look through the code and make changes if necessary.

@nathanmartin the site link is Group Delivery Form

That may be the case, but as explained it’s not a service that’s provided here.


When I submit your form using test data, what I see is:

Which seems correct, as there has been an actual 404 error.

There are multiple individual submissions, so you’ve got that part right:

Submission 1

Submission 2

Issues

  • The second form has no form-name, which is required
    It’s mentioned here: Submit JavaScript-rendered forms with AJAX
    This is likely why you’re getting the 404 error.

  • They are two entirely different forms (different fields)
    So you need to either…

    • Ensure you have multiple static forms representing each set of fields that Netlify can detect
      See: Submit JavaScript-rendered forms with AJAX
      In this case you would submit to different form-name values
      OR
    • Ensure all submissions consist of the same fields, to the same form-name