The onFormReady portion is just for placing the form in the correct place on the page. Otherwise, the form will appear on the bottom of my page, which is not desirable.
This displays the form perfectly. However, when I try to submit the form, I get the following error.
Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
at r (http://js.hubspot.com/forms/v2.js?_=1486060461543:4:21125)
at Object.findComponentRoot (http://js.hubspot.com/forms/v2.js?_=1486060461543:3:15072)
at Object.findReactNodeByID (http://js.hubspot.com/forms/v2.js?_=1486060461543:3:14535)
at Object.l [as getNode] (http://js.hubspot.com/forms/v2.js?_=1486060461543:3:12017)
at Object.s [as executeDispatch] (http://js.hubspot.com/forms/v2.js?_=1486060461543:1:21975)
at executeDispatch (http://js.hubspot.com/forms/v2.js?_=1486060461543:4:5886)
at a (http://js.hubspot.com/forms/v2.js?_=1486060461543:1:21924)
at Object.l [as executeDispatchesInOrder] (http://js.hubspot.com/forms/v2.js?_=1486060461543:1:22045)
at c (http://js.hubspot.com/forms/v2.js?_=1486060461543:1:18915)
at Array.forEach (native)
This, unfortunately, is not telling me very much. Any idea what might be causing this error, or at least what could help me debug it further?
Interestingly, if I remove the onFormReady part and submit the form at the default position, the form submits without error, as expected.
You can use the target attribute of the embed code for this. The target attribute takes a jQuery-style selector, and the form will automatically be inserted into the specified element after being built.