Using Forms 2.0 API with form embedded using form element

[Anonymous]

I'm interested in customing the URL to a follow up page based on the information submitted as part of a form on a landing page.

If I use the embed code for the form and insert it into a landing page using an HTML element, the followling works:

<script src="//app-sj04.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_2"></form>
<script>MktoForms2.loadForm("//app-sj04.marketo.com", "999-XXX-999", 2, function(form){
  form.onSuccess(function(values, followUpUrl) {
    // Do needed work here
    window.location = followUpUrl + '?computed_query_parameters';
    return false;
  });
});</script>

This approach has a couple disadvantages. First, because I'm using the embed code, the form fields do not prepopulate with data for known leads. Second, because an AJAX request is needed to load the details for the form, the form visually pops in a few hundred milliseconds after the page loads.

Since I am using this form on a Marketo landing page, what I would like to be able to do is insert the form into the landing page using the Form element so that pre-population of known lead information will happen, and the field details of the form will be populated on the server side so the form renders seemlessly with the webpage.

Is there a way to register Forms 2.0 API handlers like the above when using a form element? I haven't been able to find one. The closest I've seen is to try to hack things using jQuery to listen for submit events which doesn't really accomplish what I want.

[Anonymous]

I've found a workaround to the problem. The entire process is detailed in the documentation for my company's integration.

Insert the form as a form element then insert an HTML element after the form element and put the following script block in the HTML element:

<script>
function update_form_onsuccess() {
    var form = MktoForms2.getForm(1234);
   
    if(!form) {
        window.setTimeout(update_form_onsuccess, 100);
        return;
    }
 
    form.onSuccess(function(values, followUpUrl) {
        // Do needed work here
        window.location = followUpUrl + '?computed_query_parameters';
        return false; });
    }
}
 
window.setTimeout(update_form_onsuccess, 100);
</script>

The code uses the MktoForms2.getForm(...) call to retrieve the form after it is created, then update the onSuccess as needed. The value passed to MktoForms2.getForm(...) is the formid.

The key to this solution is the use of window.setTimeout(...) to monitor for when the form has been initialized and registered. When the code from the form element is inserted into the page, it uses the MktoForms2.newForm(...) API call, which seems to have waits within it to wait until any lead information has been retrieved (presumably through and AJAX call). window.setTimeout(...) keeps retrying getting the form by formid until it becomes available.

It would be nice if the lightbox used to insert a form element into a landing page just had a section in it where you could optionally paste JavaScript that could manipulate the form instead of going through these extra steps. If nothing else, the Forms 2.0 API documentation should have examples that include a use case like this. Currently the documentation only deals with the MktoForms2.loadForm(...) call which is the embed code scanario.