How to add a global form multiple forms on the same page | Community
Skip to main content
hlassis
Level 2
March 10, 2023
Solved

How to add a global form multiple forms on the same page

  • March 10, 2023
  • 1 reply
  • 5213 views

Hello everyone!
We're migrating from Hubspot to Marketo on the company and using Global Forms. When I have to add only one on the page, everything is fine, but there's a specific page with a tabbed interface with four forms, and I have no idea how to add the same global form multiple times there.

I know there's a solution to add the same form multiple times, but since I need to use a redirect and change the CTA text script, I am still trying to figure out what to do. Here's the code I'm using:

<form id="mktoForm_1003"></form>
<script>
  MktoForms2.loadForm("//info.mail.quorum.us", "590-ATW-173", 1003, function(form){
    //Add an onSuccess handler
    form.onSuccess(function(values, followUpUrl) {
      // Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl
      location.href = "https://www.youtube.com/watch?v=HjBo--1n8lI";
      // Return false to prevent the submission handler continuing with its own processing
      return false;
    });
  });
  MktoForms2.onFormRender( function(form) {
        var loc = document.createElement('a'); // new Location object for easier parsing
        loc.href = document.referrer;
        document.querySelector('.mktoButton').innerText = "Watch Webinar"
            decodeURIComponent( loc.search.substring(1) ); // use the whole query string as button label, this is just a demo
  });
</script>

 (The script to load the forms2.min.js goes separately on the header)

Thanks in advance for any help 🙂

Best answer by hlassis

There’s no reason to consider the Render event at all from what I can see. Everything you need is there upon Ready.


Got it. So, here's a working solution:
HTML:

 

<form class="mktoForm" data-formId="X005" data-formInstance="one"></form> <form class="mktoForm" data-formId="x005" data-formInstance="two"></form>

 

 

JS:

 

(function() { /* config area - replace with your instance values */ var formIds = [X005], podId = '//info.example.com', munchkinId = '690-TWA-183'; /* 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); }); })(); MktoForms2.whenReady(function(readyForm){ var form = readyForm.getFormElem()[0]; var instance = form.dataset.forminstance; /* Follow-up URLs */ // Add an IF/ELSE IF to each copy of the form and then change the location.href inside to change to where each copy needs to go after submitted readyForm.onSuccess(function(submittedValues, followUpUrl){ if (instance == "one") { location.href = "https://www.bing.com"; } else if (instance == "two" ) { location.href = "https://www.google.com"; } return false; }); /* CTA Texts */ // querySelectorAll generates a NodeList. Copy a line to each copy of the form you have on the page, counting from zero document.querySelectorAll('.mktoButton')[0].innerText = 'Watch Webinar 1'; document.querySelectorAll('.mktoButton')[1].innerText = 'Watch Webinar 2'; });

 


I know it can be better (and if anyone else finds a way to improve please post here) but it works! Thanks, @sanfordwhiteman for your help, I learned a lot working on this.

P.S: Remember that the forms2.min.js script is been loaded outside this on my case.

1 reply

SanfordWhiteman
Level 10
March 10, 2023

Switch to a central whenReady listener instead of using an onReady listener (onReady = the 4th argument to loadForm).

 

Then you can selectively add onFormRender and onSuccess listeners based on the form ID.

 

 

MktoForms2.whenReady(function(readyForm){ let formId = readyForm.getId(); readyForm.onSuccess(function(submittedValues, followUpUrl){ if( formId == 123 ) { // choose follow up URL } else if ( formId == 456 ) { // choose another follow up URL } return false; }); readyForm.onFormRender(function(renderedForm){ if( formId == 123 ) { // set button text } else if ( formId == 456 ) { // set other button text } }); });

 

 

 

hlassis
hlassisAuthor
Level 2
March 13, 2023

@sanfordwhiteman thank you very much for your answer but since it's a global form they all have the same ID. Perhaps I can add onFormRender and onSucess based on some data-attribute?

SanfordWhiteman
Level 10
March 13, 2023

Yes, you can use a data-form-instance attribute.