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
Customize up to 8 badges at the top of your trophy case for all other Community members to see!
Boost 5
Earned on 2.08.21
Earned by 931 people
Select to learn more
Boost 3
Earned on 2.08.21
Earned by 1338 people
Select to learn more
Boost 1
Earned on 2.08.21
Earned by 2890 people
Select to learn more
Applaud 5
Earned on 2.08.21
Earned by 1378 people
Select to learn more
You're It
Earned on 2.04.20
Earned by 1872 people
Select to learn more
Influencer
Earned on 2.04.20
Earned by 638 people
Select to learn more
Bookworm
Earned on 2.04.20
Earned by 848 people
Select to learn more
Appreciative
Earned on 2.04.20
Earned by 560 people
Select to learn more
.png)