Same marketo form in different places on same page causing issue

[Mounica]

Hello there,

I have a blog post  in that previously i'm using marketo subscription form on submit i'm displaying a thank you message and it's working perfectly. Now I want to use the same form in footer as well so, I have placed same code in footer file with different success message. Other than blog pages the footer  subscription form is working as expected along with thank you message (which is separate for blog post thank you message).

Now the problem is when I enter data in footer form and click submit, the thank you message is displaying in header form and wise versa.

And also in the header part the submit button is showing 2 times. Here is the screenshot link https://www.screencast.com/t/qjAOj611go. 

Can any one help me to solve this. 

[adrianfraguela · Accepted solution]

Have a look at this solution that @SanfordWhiteman built here: https://nation.marketo.com/t5/Product-Discussions/Multiple-copies-of-same-form-on-a-page-problems/td...

[SanfordWhiteman]

Yep, here's the full blog post on the topic: https://blog.teknkl.com/multiple-forms-multiple-times/

[Mounica]

Thanks for the reply

I tried by using that code, but it didn't worked for me. The form is displaying multiple times  on both the places. Is there any thing I need to change?

Here are the screen shots

https://www.screencast.com/t/KqVb7Ds6

[SanfordWhiteman]

I'd need to see your actual URL; the screencast isn't enough.

[Mounica]

Code is working fine but, using that code I got these problems 

1. I'm not able display individual thank  you messages. Is there any way to solve this. As of now on clicking submit the submit value is displaying in the url like this 

/?aliId=eyJpIjoieE9aQUd1bVplZFB4dVhKZSIsInQiOiJhTmJnMnJxWGJHZ1wvbUx2Tm1ad3dvdz09In0%253D

2. If i'm using this code it's working fine in blog post pages which have 2 times same form. But in other pages the form is not displaying (other than blog). 

[Mounica]

Hi,

Is there any help on this issues? 

[Mounica]

Hi @SanfordWhiteman 
Is there any way to send the website URL in private? So that you can take a look  what's happening in the site when I use that code?

[SanfordWhiteman]

In this case you can send it to me via PM.

[Mounica]

<script>
var formIds = [1014],
podId = '//app-XXX.marketo.com',
munchkinId = 'XXX-XXX-XXX';
/* no need to touch anything below this line */
var MKTOFORM_ID_PREFIX = 'mktoForm_',
MKTOFORM_ID_ATTRNAME = 'data-formId';
formIds.forEach(function(formId) {
var loadForm = MktoForms2.loadForm.bind(MktoForms2, podId, munchkinId, formId),
formEls = [].slice.call(document.querySelectorAll('[' + MKTOFORM_ID_ATTRNAME + '="' + formId + '"]'));

(function loadFormCb(formEls) {
var formEl = formEls.shift();
formEl.id = MKTOFORM_ID_PREFIX + formId;
loadForm(function(form) {
formEl.id = '';
formEls.length && loadFormCb(formEls);
});
})(formEls);
return false;
});
</script>

By using the above code, on submit how to display different thank you messages for both the forms.

[SanfordWhiteman]

If the form elements look like:

<form data-formid="2387" data-formname="Top Form"></form>
<form data-formid="2387" data-formname="Bottom Form"></form>

Then you can switch based on the ID and any distinguishing attributes:

MktoForms2.whenReady(function(mktoForm){
  var formId = mktoForm.getId(),
      formEl = mktoForm.getFormElem()[0],
      formName = formEl.getAttribute("data-formname");

  mktoForm.onSuccess(function(submittedValues,thankYouURL){
     if (formId == 2387 && formName == "Top Form") {
        // do whatever
     } 
     if (formId == 2387 && formName == "Bottom Form") {
        // do whatever else
     } 
  });
});

[Courtney_Tobe2]

We were having the same issue but Sanford's article helped us resolve it! I definitely recommend that approach.