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

Will_Raleigh · ‎11-10-2018

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/

SanfordWhiteman · ‎11-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.

View solution in original post

SanfordWhiteman · ‎11-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 · ‎11-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 · ‎11-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 · ‎11-10-2018

I realize this is a work in progress (you still have the .getForm() in there and at least one of your price dropdowns starts with a $, so it won't coerce to a Number) but

(1) Remember to keep it D.R.Y.:

var sumOfPriceValues = Object.keys(vals)
  .filter(function(key){
     return /^prize[_0-9]/.test(key);
  })
  .map(function(key){
     return +vals[key];
  })
  .reduce(function(acc,val){
     return acc+val;
  }, 0);

(2) You shouldn't use JavaScript Numbers w/fractions for currency (or any case in which you need exact values).

In JS, (1.10 + 1.10 + 1.10) == 3.3000000000000003, not 3.30, because JS Numbers are float64. Float rounding will always cause a problem either in computation, in display, or both.

You should use scaled integers instead: multiply all your currencies by 100 and then divide by 100 if necessary for display: (110 + 110 + 110) / 100 == 3.30.

Will_Raleigh · ‎11-10-2018

Wow, thank you for the additional time on this. The truth is I can barely read JavaScript well enough to almost understand what you're doing there much less write something like that myself.

I think .filter is screening out the hidden prizePot value from also being summed.

I never did get a good feel for regular expressions. Does this: return /^prize[_0-9]/.test(key);

account for the fact that I started out with an underscore when creating prize_01, and dropped the underscore for all subsequent prize fields or is that assuming that I was consistent in my naming conventions because why would I be fool enough not to be? Also, will it be OK with the fact that I have 12 prizes or will that only bring back the first 9?

I'm not 100% sure what .map is doing. Looks like it's supposed to return the filtered values and add them to an array that is specific to just the values I want to sum (?).

I think .reduce sums the values.

I'm a marketing director, and not a programmer, but I have just enough technical confidence to dive in and try to copy and paste something together while my programmer is on vacation. It's also a nice learning opportunity.

I'm only going to need this page for a month for a few hundred users.

SanfordWhiteman · ‎11-10-2018

The pattern /^prize[_0-9]/ matches any string that starts with the 5 letters prize followed by either an underscore or a digit. So it includes your 12 fields and any more that start that way. It would be better to enclose the fields in a named fieldset so you don't need to know the individual field names at all, but as long as you adhere your convention it's fine.

filter() filters out any field name that doesn't match the pattern.

map() transforms the now-filtered array of field names (the keys of the vals array) into an array of corresponding values, also transforming the values into numbers with the leading +.

reduce() iterates over all the field values and adds them together, starting with an accumulator (base value) of 0.

SanfordWhiteman · ‎11-10-2018

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