How to load 2 different forms in sequential order with Javascript

Highlighted
Level 3

How to load 2 different forms in sequential order with Javascript

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
Tags (1)
7 REPLIES 7
Highlighted
Anonymous
Not applicable

Re: How to load 2 different forms in sequential order with Javascript

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. 
Highlighted
Level 3

Re: How to load 2 different forms in sequential order with Javascript

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
Highlighted
Anonymous
Not applicable

Re: How to load 2 different forms in sequential order with Javascript

Unfortunately I do not a working code sample for this.
Highlighted
Anonymous
Not applicable

Re: How to load 2 different forms in sequential order with Javascript

Hi,

have you find the answer ?

thanks

Highlighted
Level 10 - Community Moderator

Re: How to load 2 different forms in sequential order with Javascript

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.

Highlighted
Level 1

Re: How to load 2 different forms in sequential order with Javascript

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;  

    });

});
Highlighted
Level 10 - Community Moderator

Re: How to load 2 different forms in sequential order with Javascript

Yep, that's one way to do it!

 

You can also check the ID before adding a listener.