It is hard to know for certain without seeing the document (or one that reproduces the problem you are seeing).
The main question I have is how this would generally work if two forms are on the same page – this is what would happen in a two layout scenario. It may not work at all this way; I would do some vanilla HTML testing.
If so, it is true that you could probably put everything (the form and the script call) within an HTML Widget - iframe. As a performance optimization, if two HTML Widgets have identical source then they will share the same code for the iframe, but I don’t see how this would be a problem since they are two separate elements. As iframes, they are completely isolated from anything else happening on the page.
Anyways, looking at the 2nd link you sent, I believe they are recommending having the script appear at the bottom of the body simply because it executes code immediately and expects the DOM and any required elements to already exist.
If you didn’t go an HTML Widget route and wanted the code to execute on the same page context as the rest of your Hype animation, you might be able to dynamically add the script at ‘On Layout Load’ time (example code here). Perhaps you could have two scripts for each layout?