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

Daniel_Lewis
Level 1

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

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;
3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

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

You need to provide your URL.

SanfordWhiteman
Level 10 - Community Moderator

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

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
Level 1

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

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