SOLVED

Manipulate form via API without** embedding the form on a marketo landing page

Go to solution
Anthony_Dykstra
Level 1

Manipulate form via API without** embedding the form on a marketo landing page

I customized the datepicker on one of our forms so that I could remove weekends and holidays using jQuery and MktoForms2 API. In order to achieve this, I had to embed the form into a marketo landing page template. The downside is when I create a landing page with this template, the landing page editor doesn't recognize that there is a form on the page which ultimately will cause us to jump through a few extra hoops from a reporting standpoint.

Is it possible to accomplish the same customization with a form that has been added to a page via the <div class="mktoForm"> container to bypass the shortcomings of embedding?

Sanford Whiteman​ - Perhaps you might have some valuable insight?

Here's the code I used on the template:

<div>

<script src="//app-ab01.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1687"></form>

<script>

MktoForms2.loadForm("//app-ab01.marketo.com", "XXX-XXX-XXX", 1687);

var disabledDates = ["01-01-2018","02-19-2018","05-28-2018","07-04-2018","09-03-2018","11-22-2018","12-25-2018"];

MktoForms2.whenReady(function (form) {

$("#callDate").datepicker({

beforeShowDay: function(date) {

var string = jQuery.datepicker.formatDate('mm-dd-yy', date);

return [ disabledDates.indexOf(string) == -1 ]

},

minDate: 0,

maxDate: new Date(2018, 11, 31)

});

});

</script>

</div>

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Manipulate form via API without** embedding the form on a marketo landing page

Sure, you can add custom behaviors to named mktoForm elements on Marketo-hosted pages using the Forms 2.0 API, just as you can with embedded forms on non-Marketo pages.

The key consideration is when you have a named form, Marketo will put the <script> that loads the Forms2 library (forms2.min.js) into the <body> wherever the form is drawn, as opposed to in a predictable location (just before closing </head>, just inside opening <body>, etc.). 

And you need to have the Forms2 lib loaded before you start customizing forms behaviors, since the core MktoForms2 object won't exist otherwise.

So you have 2 choices:

  1. Load your customizations right before the closing </body> tag. This will work, but will be annoying because you might be accustomed to managing external libraries/code in <head>.
  2. Preemptively load forms2.min.js yourself, right before you load your custom code. This can be done anywhere you want, including in <head>. You will incur the minor overhead of loading the remote script twice (the second one from cache). There won't be any deeper side effects, since Marketo is smart enough to short-circuit the code if MktoForms2 already exists in global scope.

View solution in original post

3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: Manipulate form via API without** embedding the form on a marketo landing page

Sure, you can add custom behaviors to named mktoForm elements on Marketo-hosted pages using the Forms 2.0 API, just as you can with embedded forms on non-Marketo pages.

The key consideration is when you have a named form, Marketo will put the <script> that loads the Forms2 library (forms2.min.js) into the <body> wherever the form is drawn, as opposed to in a predictable location (just before closing </head>, just inside opening <body>, etc.). 

And you need to have the Forms2 lib loaded before you start customizing forms behaviors, since the core MktoForms2 object won't exist otherwise.

So you have 2 choices:

  1. Load your customizations right before the closing </body> tag. This will work, but will be annoying because you might be accustomed to managing external libraries/code in <head>.
  2. Preemptively load forms2.min.js yourself, right before you load your custom code. This can be done anywhere you want, including in <head>. You will incur the minor overhead of loading the remote script twice (the second one from cache). There won't be any deeper side effects, since Marketo is smart enough to short-circuit the code if MktoForms2 already exists in global scope.
Anthony_Dykstra
Level 1

Re: Manipulate form via API without** embedding the form on a marketo landing page

That worked perfectly. Thank you!

SanfordWhiteman
Level 10 - Community Moderator

Re: Manipulate form via API without** embedding the form on a marketo landing page

Cool, please mark my answer as Correct when you get a chance.