React Website + Marketo | Community
Skip to main content
Noah_Wong1
Noah_Wong1
Level 3
July 3, 2018
Solved

React Website + Marketo

  • July 3, 2018
  • 2 replies
  • 13085 views

I am developing a microsite that will be integrated with our Marketo instance. I am interested in using React to build the site. Two questions:

  1. Will Marketo munchkin code work on a React website? Forms?
  2. If it does work fine, any watchouts or documentation on how to integrate with Marketo?

Thanks so much!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

Works as on any 3rd-party site or framework. React outputs HTML + JS like anything else that's eventually viewed in a browser!

2 replies

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
July 3, 2018

Works as on any 3rd-party site or framework. React outputs HTML + JS like anything else that's eventually viewed in a browser!

    Noah_Wong1
    Noah_Wong1Author
    Level 3
    July 3, 2018

    Thanks!!!

    Noah_Wong1
    Noah_Wong1Author
    Level 3
    July 9, 2019

    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!

    Noah_Wong1
    Noah_Wong1Author
    Level 3
    July 10, 2019

    Nevermind. Figured it out

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    July 10, 2019

    Thought you would.  I didn't have time this week to mock it up in React.

    Terms & ConditionsAccessibility statement

    Loading footer...