It describes how to get your forms detected, and how to troubleshoot when they are not.
I can tell you there is no limitation on the number of forms in a single html page, once you get the syntax right, so that troubleshooting guide should help you (TL;DR start from the html - not whatever code or packages create the html - and look specifically at the form definitions that get deployed on Netlify. I think you’ll find that there aren’t two definitions in an HTML file with data-netlify=true or netlify parameters.
The support guide lists the information that we need to debug this:
The URL for your live form as you want visitors to use it
The form name that you’ve set and that shows in our UI
Any errors or logs from the Netlify build logs, dashboard or browser developer console
Description of anything you have tried that did or didn’t help or make things better/worse
If there are questions about why that requirement exists or how to meet that requirement, please let us know.
The solution may work for your current situation but you’re correct using a hidden form is not the most ideal option. This can be perceived as spam or deceptive to search engines. It might be worth exploring alternative approaches to making the form visible. Perhaps using server-side rendering? Good luck. (: