How to load 2 different forms in sequential order with Javascript | Community
Skip to main content
J
John_Wallace
Level 4
August 6, 2014
Question

How to load 2 different forms in sequential order with Javascript

  • August 6, 2014
  • 4 replies
  • 3545 views

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
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

4 replies

A
Anonymous
August 6, 2014
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. 
J
John_WallaceAuthor
Level 4
August 7, 2014
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
A
Anonymous
August 13, 2014
Unfortunately I do not a working code sample for this.
A
Anonymous
May 24, 2015

Hi,

have you find the answer ?

thanks

SanfordWhiteman
SanfordWhiteman
Level 10
May 24, 2015

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.

S
ScottGaines
Level 1
May 22, 2020

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
    SanfordWhiteman
    Level 10
    May 22, 2020

    Yep, that's one way to do it!

     

    You can also check the ID before adding a listener.

     

     

    Terms & ConditionsAccessibility statement

    Loading footer...