How to load 2 different forms in sequential order with Javascript

[John_Wallace]

Hi I am trying to create a sequential form by using two differnt forms.  I would like to use the forms 2.0 api to do so.  I have this so far...Can you grab an id or another form with in another one?

<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();

           //want to show the from below after submit

        });    

    });

</script>

<!-- second form -->

<script src="//app-sjp.marketo.com/js/forms2/js/forms2.js"></script>

<form id="mktoForm_334"></form>

<script>MktoForms2.loadForm("//app-sjp.marketo.com", "466-AGZ-592", 334, function(form) {

    form.getFormElem().hide();

});

</script>

Once the first from is submitted I would like to load the other one.  I know I have been bugging people but would like to avoid building multiple landing pages to create a seemless sequential form.  Would I need to use ajax to submit the first form then load the second one?  Thanks in advance

-John

[Anonymous]

You could implement this either way, with or without ajax. 

I recommend implementing without ajax. Just load both forms when the page loads. Show the first form, and hide the second form on page load. When the user clicks the submit button on the form, hide the first form and then show the second form. 

[John_Wallace]

Hey Murtza,  Thanks for the response.  I was wondering how would i trigger the other form to be loaded within the first form?  Do you have a working code sample I could work off of?  Thanks so much

-John

[Anonymous]

Unfortunately I do not a working code sample for this.

[Anonymous]

Hi,

have you find the answer ?

thanks

[SanfordWhiteman]

This should be consolidated with Two Part Form Submittal​ to avoid confusion since there's working code over there.  Maybe John Wallace​ will mark this one as solved/closed.

[ScottGaines]

I ran into an issue like this as well but I needed two completely different forms on the page at the same time. On submit they would do two different actions.

Issue I had was no matter which form was submitted it would do both completion actions.

My solution was simple and may help people having a similar issue.

MktoForms2.loadForm("//app-ab10.marketo.com", "730-NST-988", 6961);
MktoForms2.loadForm("//app-ab10.marketo.com", "730-NST-988", 6958);

MktoForms2.whenReady(function(form) {

    form.onSuccess(function(values, followUpUrl) {  

        form.getFormElem().hide();  

        if(form.getId() == '6961') {

            /* Actions for form one (6961) here */

        } else {

            /* Actions for form two (6958) here */

        }

        return false;  

    });

});

[SanfordWhiteman]

Yep, that's one way to do it!

You can also check the ID before adding a listener.