Where to Embed Form API JavaScript in a Guided Landing Page Template | Community
Skip to main content
Will_Raleigh
Will_Raleigh
Level 2
November 10, 2018
Solved

Where to Embed Form API JavaScript in a Guided Landing Page Template

  • November 10, 2018
  • 2 replies
  • 5721 views

I'm trying to interrupt form validation so I can check to see if the values of all submitted fields are less than or equal to the value of a hidden field.

I found the Forms API here: http://developers.marketo.com/javascript-api/forms/

If I add their code samples to my guided landing page template outside of the form div, (whether in the head or the body) the fields of the form are duplicated (strangely they're duplicated within the form div even though the JavaScript is not being put in that area of the page, so it's like two versions of the form are stacked on top of each other.

If I add the code sample within the form div, I only see the fields once, but it looks like my custom code is not being invoked and the selection of a form on the landing page is overriding what I embedded on the page. If I don't select a form on the landing page, nothing shows up.

Where should I be putting this code on a guided landing page template, or is there a line of code I need to add or remove from the javascript to prevent the form loading twice?

For reference and ease of testing right now I'm just using a straight copy and paste of the "Read Form Values on Form Submit" example on this page (with changes made to use my munchkin code and form id):

http://developers.marketo.com/rest-api/assets/forms/examples/

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

Since you haven't provided your URL it's impossible to tell what you're doing wrong.

On a Marketo-hosted LP, custom form behaviors should be added in <script> tags placed just before the closing </body> tag. This is because the Forms API is made available by the Forms 2.0 library (forms2.min.js) and the lib is output at the same place as the <form> tag -- that is, in variable places in the <body> depending on your layout.

2 replies

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
November 10, 2018

Since you haven't provided your URL it's impossible to tell what you're doing wrong.

On a Marketo-hosted LP, custom form behaviors should be added in <script> tags placed just before the closing </body> tag. This is because the Forms API is made available by the Forms 2.0 library (forms2.min.js) and the lib is output at the same place as the <form> tag -- that is, in variable places in the <body> depending on your layout.

Will_Raleigh
Will_RaleighAuthor
Level 2
November 10, 2018

Thanks. Here is a link to the page with the code on it:

http://go.appleone.com/Bingo_Contest_11-2018_21-LP-Prize-Page2.html?aliId=23432514

I tried removing MktoForms2.loadForm and replacing with MktoForms2.whenReady. The alert isn't getting displayed on form submit though, so I also tried adding MktoForms2.getForm(1192);

SanfordWhiteman
SanfordWhiteman
Level 10
November 10, 2018

.getForm() isn't doing anything at all here. You don't need it.

The reason the code isn't running is you have a syntax error at the HTML level:

<script type="“text/javascript”">

This has curly quotes inside of the proper quotes.

You wanted

<script type="text/javascript">

or these days just

<script>
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    November 10, 2018

    Also, to be clear, you don't reembed your form. There should be no calls to loadForm in your code.

    Terms & ConditionsAccessibility statement

    Loading footer...