Manipulate form via API without** embedding the form on a marketo landing page | Community
Skip to main content
Anthony_Dykstra
Anthony_Dykstra
Level 1
January 10, 2018
Solved

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

  • January 10, 2018
  • 1 reply
  • 3400 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

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.

1 reply

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
January 11, 2018

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
    Anthony_DykstraAuthor
    Level 1
    January 11, 2018

    That worked perfectly. Thank you!

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    January 11, 2018

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

    Terms & ConditionsAccessibility statement

    Loading footer...