AnsweredAssumed Answered

Web Form not capturing lead within Marketo but onSuccess is executing after receiving 200 response code

Question asked by Daniel Lewis on Dec 3, 2019
Latest reply on Dec 4, 2019 by Daniel Lewis

Hello,

 

I am coming across an issue when trying to test an implementation of a marketo form in a react app where I am receiving an onSuccess callback execution, but the form data is not being captured by marketo within the list.

 

On our production site, the form data is captured, but when on my local machine(localhost), it is not. 

 

useMarketo.js

import { useState, useEffect } from "react";

function appendScript(baseUrl, setScriptLoaded) {
  if (window.MktoForms2) return setScriptLoaded(true);

  const script = document.createElement("script");
  script.src = `${baseUrl}/js/forms2/js/forms2.min.js`;
  script.onload = () => (window.MktoForms2 ? setScriptLoaded(true) : null);
  document.body.appendChild(script);
}

function useMarketo({ baseUrl, munchkinId, formId, callback }) {
  const [scriptLoaded, setScriptLoaded] = useState(false);

  useEffect(() => {
    if (scriptLoaded) {
      window.MktoForms2.loadForm(baseUrl, munchkinId, formId, callback);
      return;
    }
    appendScript(baseUrl, setScriptLoaded);
  }, [scriptLoaded, baseUrl, munchkinId, formId, callback]);
}

export default useMarketo;


MarketoForm.jsx

import React from 'react';
import PropTypes from 'prop-types';
import useMarketo from '../../utilities/useMarketo'


const MarketoForm = ({ baseUrl = "", munchkinId = "", formId = "", callback})=> {

  useMarketo({ baseUrl, munchkinId, formId, callback });

  return <form id={`mktoForm_${formId}`} style={{display: "none"}}/>;
};


export default MarketoForm;


App.jsx

 

 

import React, {useState} from 'react';
import MarketoForm from "./Components/MarketoForm/MarketoForm";

const App = () => {
   const [values, setValues] = useState({
     sampleStateKey: "examplestatevalue",
   });


   const onEmailButtonClick = () => {
   //Send information to marketo here?
      const marketoFormMap = {
         sampleStateKey: "sampleMarketoFormKey",
      
};

     const form = window.MktoForms2.getForm("XXXX");

      if(form) {
         Object.keys(values).map((key) => {
            const formKey = marketoFormMap[key];
            const value = values[key];
            form.setValues({[formKey]: value})
      }

      form.submit().onSuccess((res) => {
         return false
      })
};


return (
   <div className="App">
      <MarketoForm
         baseUrl="//app-sj02.marketo.com"
         munchkinId="AAAAAAAA"
         formId="XXXX"
      />
   </div>
);
};

export default App;

Outcomes