Re: Marketo Form made with MktoForms2 API stuck on "Please Wait..."

lucasdellabella
Level 1

Marketo Form made with MktoForms2 API stuck on "Please Wait..."

I've been developing using the Marketo Forms javascript api, and loading in MktoForms2 object via script tags like suggested in docs here: https://developers.marketo.com/javascript-api/forms/


I've used something like this example code below to load a form into our site, 

<script src="//app-xyz.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_621"></form>
<script>
MktoForms2.loadForm("//app-xyz.marketo.com", "718-GIV-198", 621);
</script>


The form loads as expected, but when I click submit no network requests are made in the chrome developer tools "Network" tab, and the submit button changes to "Please wait..." and hangs. When using the forms2 javascript API do I explicitly need to make API calls to marketo myself to submit the form? Should I be seeing an outgoing network request?

5 REPLIES 5
SanfordWhiteman
Level 10 - Community Moderator

Re: Marketo Form made with MktoForms2 API stuck on "Please Wait..."

You have not provided enough information to troubleshoot this.

 

If you have custom JS, show that JS. Or better yet provide your URL.

lucasdellabella
Level 1

Re: Marketo Form made with MktoForms2 API stuck on "Please Wait..."

I'm writing Typescript / React and have created a Context Provider, as well as a custom hook used to render a specific form. Like I said the form renders as expected, but the submit button hangs. My code here is a context provider that exposes the MktoForms2 object which the useMarketoForm hook uses to set load a form.

Context:

 

const MarketoFormContext = React.createContext();

 


Context Provider:

 

const MarketoFormProvider = ({ children }: MarketoFormProviderProps) => {
  const extendedWindow = window as ExtendedWindow;
  const [marketoFormProviderValues, setMarketoFormProviderValues] = useState(
    marketFormProviderDefaults
  );

  // Loads script tag on first render
  useEffect(() => {
    const script = document.createElement('script');

    script.src='//go.mydomain.com/js/forms2/js/forms2.js';
    script.defer = true;
    script.onload = () => {
      setMarketoFormProviderValues([extendedWindow?.MktoForms2, false]);
    };

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <MarketoFormContext.Provider value={marketoFormProviderValues}>
      {children}
    </MarketoFormContext.Provider>
  );
};

export default MarketoFormProvider;

 


Custom Hook:

 

/**
 * A React hook used to easily render marketo forms into our frontend
 * @param formId the id of the form to render
 * @param callback a callback to run code when specific events happen within the form. see https://developers.marketo.com/rest-api/assets/forms/examples/
 * @returns the anchor dom element that Marketo will search for and attach the form to
 */
export const useMarketoForm = (formId: number, callback?: (form: object) => void): ReactNode => {
  const [mktoForms2, isLoading] = useContext(MarketoFormContext);
  const MYDOMAIN_MARKETO_FORMS_HOST = '//go.mydomain.com';
  const MYDOMAIN_MARKETO_MUNCHKIN_ID = '264-DBV-179';

  useEffect(() => {
    if (isLoading) {
      console.log('mktoForms2 not yet initialized');
    } else {
      mktoForms2.loadForm(
        MYDOMAIN_MARKETO_FORMS_HOST,
        MYDOMAIN_MARKETO_MUNCHKIN_ID,
        formId,
        callback
      );
    }
  }, [isLoading]);

  return <form id={`mktoForm_${formId}`}> </form>;
};

 

 
How I use the form in a component:

 

const MyComponent = () => {
  const marketoFormElement = useMarketoForm(1941);
  return 
    <div> 
      {marketoFormElement}
    </div>
}

 

 

lucasdellabella
Level 1

Re: Marketo Form made with MktoForms2 API stuck on "Please Wait..."

I have a feeling me sharing 100 lines of react code is not helpful, I can get this up on a public site for you to take a look at if you think that's the best way to approach this. Thanks for offering to help.

SanfordWhiteman
Level 10 - Community Moderator

Re: Marketo Form made with MktoForms2 API stuck on "Please Wait..."

Well, yes, having the page would let me see the generated JS that’s running client-side.

Btw the most common reason for an apparent hang on submission is an error in custom onSuccess listener, or simply preventing the default behavior in onSuccess and not substituting any custom behavior.

lucasdellabella
Level 1

Re: Marketo Form made with MktoForms2 API stuck on "Please Wait..."

Gotcha. Well now that it's no longer running on localhost it seems to be working as intended. It seems like when I expose my localhost via ngrok it works fine as well. There's a possibility that we have another piece of tooling that errors out during a submission which aborts the call that would otherwise be made to marketo. I'll report back if I discover that that's the issue.

Thanks for the response, sent me in the right direction 👍