Two Forms, One Page?

[Anonymous]

Is it possible to have two functioning Marketo forms on the same webpage (non-Marketo landing page)? Either two of the same form or one Form A and one Form B - are either/both possible? We have tried in the past and run into processing and styling issues, but we are launching a new site and are hoping to revisit this issue.

Is anyone doing this right now? Is it working?

The use case is that we have a form in our footer, but we'd like the occasional product-specific form or just the same general form to show up elsewhere on the page.

[SanfordWhiteman · Accepted solution]

Yes, it's possible.  You have to inject the forms, let us say, mindfully into the page. A running demo is here:

MktoForms2 :: Multiple Forms, Multiple Times​

You can see that the page is running 3 Marketo forms: 2 instances of form #341 (which is harder to do than multiple form IDs!) and and 1 instance of form #335.  Each form functions separately without polluting the others (most people think they have this working but they don't realize that the forms are interfering with each other).

The only part of the JS code (in the JS pane) you'd change is the mktoFormConfig block.

But very close attention to the way the HTML <form> elements are formed  (in the HTML pane): they have the class mktoForm but no id attribute, and they have the extra attributes data-formId and data-formInstance.  The data-formInstance is optional (it's just a cosmetic identifier to distinguish between copies of the same form) but the data-formId is required and contains (naturally) the form ID that goes in it.

[Maria_Snow]

Thank you - this was helpful - I tried to add a thank you message as below to hide form and add message relative to each form on the page - but it wasn't working - where would I insert this in your code or do you have an example?

form.onSuccess(function(values, followUpUrl) {
  document.getElementById('mktoForm_8418').style.display = 'none';
  document.getElementById('thankyou').style.display = 'block';
// Return false to prevent the submission handler continuing with its own processing
    return false;

Thanks in advance!

[SanfordWhiteman]

Please go back and edit your post, using the Advanced Editor's syntax highlighter so the code is readable.

Anyway, you most certainly cannot do it the way you've sketched out here. You're searching for ID attributes across the document, assuming they're unique. In this case they're not and you'll always find the first one in the DOM. You need to constrain your searches to the current form element, for example like so:

MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0],
      followUpContainer = formEl.querySelector(".some-element-that-you'll-show-instead-of-the-whole-form");
  form.onSuccess(function(values, followUpUrl){
    formEl.parentNode.replaceNode(followUpContainer,formEl);
    return false;
  });
});

[Maria_Snow]

Done - sorry

So in your example on the codepen, how would it work in that scenario if you provided a different thank you message for each of those 3 form instances?

Thank you.

[SanfordWhiteman]

To use the code I just provided:

1. create a Rich Text block on the form
2. inside the RT block put a <div> that's hidden by default (via external <style> rule, or inline style="display:none;" if you insist)
3. inside the hidden <div>, create another <div> with class="some-element-that-you'll-show-instead-of-the-whole-form" (obviously that's a ridiculous name, you'd use class="thankYouMessage" or whatever)

The onSuccess function replaces the entire <form> tag with the <div class="thankYouMessage"> in exactly the same spot in the HTML. Moving the Thank You message outside of the hidden container naturally unhides it.

Each form can thus have its own version of the Thank You message. You could also check to see if the Thank You container exists, and if it doesn't exist redirect to the configured Thank You URL.

MktoForms2.whenReady(function(form){  
  var formEl = form.getFormElem()[0],  
      followUpContainer = formEl.querySelector(".thankYouMessage");  
  form.onSuccess(function(values, followUpUrl){  
    if ( followUpContainer ) {
      formEl.parentNode.replaceNode(followUpContainer,formEl);  
      return false;
    } 
  });  
}); 

[Maria_Snow]

Would this go inside the mktoFormChain(config) function?

[SanfordWhiteman]

No, it can be separate.

[Maria_Snow]

I'm trying to create a *different thank you message for each form instance. Putting a thank you message in a hidden form textbox within the one form won't work for that since each thank you message is unique. If I create a div directly after the form insertion on the html page, that contains the unique thank you message after each form, how would I go about adjusting that js in your code?

[SanfordWhiteman]

The example I gave *was* assuming a different embedded TY element in each form.

If the TY el is always directly after the form el then that's formEl.nextSibling.