How Can I Use Form Functions Found Inside the MktoForms2 API Within a React Component?

[dmartinijr]

I'm building a native react app that loads a Marketo form inside a modal when they hit a CTA button within the app.

import React, { useState, useEffect } from 'react';

const marketoScriptId = 'mktoForms';

export default function MarketoForm({ formId, formData }) {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    if (!document.getElementById(marketoScriptId)) {
      loadScript();
    } else {
      setIsLoaded(true);
    }
  }, []);

  useEffect(() => {
    isLoaded &&
      window.MktoForms2.loadForm('//domain', 'munchkinId', formId);
      formHandler()
  }, [isLoaded, formId]);

  const formHandler = () => {
    window.MktoForms2.whenReady((form) => {
      window.form.MktoForms2.onSubmit()
        //this is where things fail
    })
  }

  const loadScript = () => {
    var s = document.createElement('script');
    s.id = marketoScriptId;
    s.type = 'text/javascript';
    s.async = true;
    s.src='//{domain}/js/forms2/js/forms2.min.js';
    s.onreadystatechange = function() {
      if (this.readyState === 'complete' || this.readyState === 'loaded') {
        setIsLoaded(true);
      }
    };
    s.onload = () => setIsLoaded(true);
    document.getElementsByTagName('head')[0].appendChild(s);
  };

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

This component will successfully load all the scripts necessary and return the form. However, from here, I need to be able to use some of the functions found in the MktoForms2 API, including the form functions. 

Specifically, I need to add values to three hidden fields that exist within the Marketo form. The values are coming from the React app ({formData}). I need to add these values when the form is loaded, or before the form is submitted. Either way, they'll exist when the user submits.

I'm having a hard time using any of the form functions found within the MktoForm2 API with this integration

[SanfordWhiteman]

onSubmit is not a property of the forms library (i.e. of the global MktoForms2 object).

It's a property of each separate form object.

[dmartinijr]

Thanks for the insight. I think I had just been trying every combination which way because I was stuck.

const formHandler = () => {
    window.MktoForms2.whenReady((form) => {
      window.form.onSubmit((form)=>{
        console.log('test')
        window.form.submit()
      })
    })
  }

It still cannot read .onSubmit here (undefined).

[SanfordWhiteman]

window.form isn’t a Marketo form object. That’s just a random global property, seems like you’re guessing again?

When I say form object I mean the mktoForm argument here:

MktoForms2.whenReady(function(mktoForm){
  /* things you do when ready ... */
});

[dmartinijr]

const formHandler = () => {
    window.MktoForms2.whenReady((mktoForm) => {
      console.log(mktoForm)
    })
  }

Apologies for the typo above, the proper mktoForm is within my local project.

The mktoForm object prints to console but the form element that should be associated with it is still undefined. So any function I try using on the form object fails. Why isn't the form element being associated with the object within native React? This is something I have done in browser jQuery often but I have never tried implementing within React before.

[SanfordWhiteman]

You have to put this code somewhere I can edit and run it, for example a CodePen React Project.

Setting up an environment in my private lab isn’t practical.

---

This is something I have done in browser jQuery often but I have never tried implementing within React before.

---

Assume you mean JavaScript, not jQuery? Marketo Forms happen to use jQuery internally but you don’t need jQuery to consume the library.