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

Forum|Forum|4 years ago
December 21, 2021
1 reply
3818 views

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?

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

SanfordWhiteman

New Participant

You have not provided enough information to troubleshoot this.

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

L

lucasdellabellaAuthor

New Participant

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>
}

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded