Multiple forms on a single page

Hi all!

This page: https://ssga-staging.netlify.app/patient-portal has five forms on it, each with its own name & corresponding hidden input with the value of the form name.

Currently, only the first one is showing in the Netlify Form UI panel, and when I submit the other four I get a generic Netlify “Page Not Found” message. However, I DO get an email notification that the data was posted! I can’t find anything about having multiple forms on a single page but didn’t think it would be an issue as each form is encapsulated in an opening and closing element and has a unique name.

Thank you!

Hi @petefromreplicant

Looking at your page source, only the “Message the Staff or Provider” form is rendered on the page. Inspecting the page while changing forms I suspect you are rendering the other forms with JavaScript. There is a section in the docs dealing with that.

Alternatively you need to have all forms rendered on the page and find a method to show/hide the relevant form that works in your layout. Keep in mind too that the elements present when a form is detected during the build/deploy process are those represented in the Form UI, so adding/removing elements on the page won’t work.

If you wish to continue using your current system, you could move to using a serverless function to handle form submission. There are some form and email examples available here too.

1 Like