Sure. I'd be interested if anyone else has a thought of a better way. I ended up loading the form library during the Build sequence by adding it to the gatsby-ssr.js file const React = require ( "react" ) ; exports . onRenderBody = ( { setHeadComponents } ) = > { return setHeadComponents ( [ < script id = "marketo-js" key = "marketo-form" src = " //app-sj11.marketo.com/js/forms2/js/forms2.min.js" / > ] ) ; } ; ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ Then I stripped the the Marketo form styles by adding this excellent snippet from Sanford Whiteman during the Client sequence in the gatsby-browser.js file require ( "./src/css/style.css" ) ; exports . onInitialClientRender = ( ) = > { function destyleMktoForm ( mktoForm , moreStyles ) { var formEl = mktoForm . getFormElem ( ) [ 0 ] , arrayFrom = Function . prototype . call . bind ( Array . prototype . slice ) ; // remove element styles from <form> and children var styledEls = arrayFrom ( formEl . querySelectorAll ( "[style]" ) ) . concat ( formEl ) ; styledEls . forEach ( function ( el ) { el . removeAttribute ( "style" ) ; } ) ; // disable remote stylesheets and local <style>s var styleSheets = arrayFrom ( document . styleSheets ) ; styleSheets . forEach ( function ( ss ) { if ( [ mktoForms2BaseStyle , mktoForms2ThemeStyle ] . indexOf ( ss . ownerNode ) != - 1 || formEl . contains ( ss . ownerNode ) ) { ss . disabled = true ; } } ) ; if ( ! moreStyles ) { formEl . setAttribute ( "data-styles-ready" , "true" ) ; } } MktoForms2 . whenRendered ( function ( form ) { destyleMktoForm ( form ) ; } ) ; } ; ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ Lastly, I built this Form Component that I send with some props. import React , { useEffect } from "react" ; const MktoForm = props = > { useEffect ( ( ) = > { MktoForms2 . loadForm ( " //app-sj11.marketo.com", "XXX-XXX-XXX", props.formId); } , [ ] ) ; return ( < div className = "bg-gray-300 shadow rounded p-3" > < div className = "text-lg font-bold uppercase" > { props . heading } < / div > < div className = "text-sm mb-6" > { props . subheading } < / div > < div style = { { height : ` ${ props . height } ` , overflow : "hidden" } } > < form id = { `mktoForm_ ${ props . formId } ` } > < / form > < / div > < / div > ) ; } ; export default MktoForm ; ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ The only caveat in doing it this way is that the form will load more than once if you rapidly go back and forth from that page to another. The first form load doesn't complete in time before its called a second time. Gatsby is a little too fast for its own good . This is why I set a fixed height to the parent div with overflow:hidden (to hide the subsequent form loads). This is the solution that I came up with but if anyone knows how to kill the api call to load the form when the component unmounts, I would love to hear it. ... View more

Nevermind. Figured it out ... View more

Sanford Whiteman So back at this. I am trying to add a Marketo form into a Gatsby site but have trouble with the order in which scripts are injected into the page. When I try to render the component below, I get the error message "ReferenceError: MktoForms2 is not defined". I tried commenting out the entire useEffect code block and the component renders to the page fine without the form. Then when I paste "MktoForms2.loadForm("//app-sj11.marketo.com", "XXX-XXX-XXX", 1608)" into the console, the form appears as expected. import React , { useEffect } from "react" ; import Helmet from "react-helmet" ; import "./form.scss" ; const FormContactMkto = () => { useEffect (() => { MktoForms2 .loadForm ( "//app-sj11.marketo.com" , "XXX-XXX-XXX" , 1608 ); }, []); return ( <div> < Helmet > <script src = "//app-sj11.marketo.com/js/forms2/js/forms2.min.js" type = "text/javascript" /> </ Helmet > <form id = "mktoForm_1608" ></form> </div> ); }; export default FormContactMkto ; How can I load this Marketo form into a Gatsby page? Any help or suggestions are greatly appreciated! ... View more

Thanks!!! ... View more

Yup, that worked. Thanks again! ... View more

One more quick question about this script. This appears to add an extra space after the token. For example, the output is "Dear XXX ," How can I remove that space in between the end of the name and the comma? ... View more

Hi Sanford, Success! Thanks so much for the help. Brand new to Velocity but your reply explains things very clearly. I've subscribed to your blog! Thanks, Noah ... View more

Yes, to both. Unfortunately no luck. ... View more

I keep getting this error message: An error occurred when procesing the email Rendered_Email_Velocity_Error_Area_?! Invocation of method 'substring' in class java.lang.String threw exception java.lang.StringIndexOutOfBoundsException: String index out of range: 1 near Any thoughts? ... View more

Thanks everyone for all the responses. Sounds like people are having success with Wistia integration although a little more cumbersome to set up. Probably worth the extra effort since Vidyard is way more expensive. They do offer a Vidyard specialist/customer success person to help customers with video marketing strategies and regularly scheduled meetings, which is helpful, but not sure justifies the increased price. I'm leaning more toward sticking with Wistia at this point. ... View more