SOLVED

Re: Same marketo form in different places on same page causing issue

Go to solution
Mounica
Level 1

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. 

1 ACCEPTED SOLUTION
11 REPLIES 11
adrianfraguela
Level 3
SanfordWhiteman
Level 10 - Community Moderator

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

Mounica
Level 1

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
Level 10 - Community Moderator

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

Mounica
Level 1

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
Level 1

Hi,

Is there any help on this issues? 

Mounica
Level 1

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
Level 10 - Community Moderator

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

Mounica
Level 1
<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
Level 10 - Community Moderator

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
Level 2 - Champion

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