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

[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;

[SanfordWhiteman]

You need to provide your URL.

[SanfordWhiteman]

Also, make sure then when testing on your local machine, you (a) run SSL and (b) use an actual hostname, not localhost -- because otherwise you're not mirroring the production config.

[Daniel_Lewis]

I will look into this as a possible solution. Thank you for your prompt response.