Skip to main content
Noah_Wong1
Level 3
Jul 3, 2018 8:38 PM UTC
Solved

React Website + Marketo

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.
SanfordWhiteman
SanfordWhitemanAccepted solution
User Group Leader
Jul 3, 2018 9:10 PM UTC

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

9 replies

SanfordWhiteman
User Group Leader
SanfordWhitemanUser Group LeaderAccepted solution
User Group Leader
Jul 3, 2018 9:10 PM UTC

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

Translate
Noah_Wong1
Level 3
Jul 3, 2018 10:47 PM UTC

Thanks!!!

Translate
Noah_Wong1
Level 3
Jul 9, 2019 1:02 AM UTC

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!

Translate
Noah_Wong1
Level 3
Jul 10, 2019 2:30 AM UTC

Nevermind. Figured it out

Translate
SanfordWhiteman
User Group Leader
User Group Leader
Jul 10, 2019 2:31 AM UTC

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

Translate