How to load a different Marketo form inside another form object?

Question

Hi I am using Marketo's forms 2.0 api to try and build a sequential form on our site(I want to break up a large form into 2 sections). We also wan to be able to track abandonment rates when users click "next" to load the part 2 of the form. So I was trying to have the other form load when the first one is submitted. Has anyone done this before? Or have a better way of doing this. This is my code so far.

<script src="//app-sjp.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_333"></form>
<script>
    MktoForms2.loadForm("//app-sjp.marketo.com", "466-AGZ-592", 333, function(form) {
        form.onSuccess(function(callback) {
            form.getFormElem().hide();
            MktoForms2.loadForm("//app-sjp.marketo.com", "466-AGZ-592", 334, function(forms) {
                form.getFormElem().show();
            });
        });
    });
</script>

Any advice would be greatly appreciated. Thanks

-John

Answer 1

Your implementation makes sense. To track abandonment rate, you can use Marketo's Munchkin web tracking with the Marketo Form 2.0 methods .

In the example below, I captured the events (Form 1 load, Form 2 load, Form 2 submission) as click events, and sent the data via Munchkin to Marketo.

//Load Marketo's Munchkin tracking
<script src="http://munchkin.marketo.net/munchkin.js"type="text/javascript"></script>
<script src="//app-sjp.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_333"></form> 

<script>
    MktoForms2.loadForm("//app-sjp.marketo.com", "466-AGZ-592", 333, function(form) {
    //Measures form 1 load event .
    Munchkin.munchkinFunction("clickLink",{href:"/form1load"})
    form.onSuccess(function(callback) {
    //Measures form 2 load event. This should be equal to form 1 submission count.
        Munchkin.munchkinFunction("clickLink",{href:"/form2load"})
        form.getFormElem().hide();
        MktoForms2.loadForm("//app-sjp.marketo.com", "466-AGZ-592", 334, function(form) {
            form.getFormElem().show();
            //Measures form 2 submission. Uses Marketo Form's onSuccess method.
            form.onSuccess(function(values, followUpUrl){
                Munchkin.munchkinFunction("clickLink",{href:"/form2submission"})
                //Keep user on same page after form submission
                return false;
            });
        });
    });
});
</script>