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

hlassis · ‎03-10-2023

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 🙂

hlassis · ‎03-15-2023

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.

View solution in original post