Field Calculations

[Matthew_Libanio]

Is it possible for a customer to enter data into one or two fields and have a third field calculate the value and immediately display for the customer to see?

For example:

Lot Size: 1000 Sq. Ft.

Salt melt area: 1 bag/500sq. ft

Bags of Salt  Needed: 2 bags

So the calculated value will be the Bags of Salt, but the first entry is all that is needed.  The Salt Melt area will be a default hidden value stored in the field.

Thanks everyone!

[Edward_Unthank_]

If you're doing real-time calculations with the point of showing a prospect, I'd do that with JavaScript, and then send the calculated value to Marketo as a field value. Those kinds of calculations will be very easy to do with some simple JavaScript coding.

Marketo can do linear math (adding and subtracting) but anything more complex than that is easier to do outside of Marketo.

Cheers,

Edward Unthank | Founder, Etumos

[Matthew_Libanio]

This sounds interesting.  Any example you can provide as to how to pass that data value to Marketo.  What JS method would one use?

Thanks so much!

[SanfordWhiteman · Accepted solution]

JS has all the built-in math functions you need.

Here's a naive implementation of what you're talking about: MktoForms2 :: Client Calc

Ignoring the confusing field names (I do this so I don't have to clutter my prod instance with unused fields) the approach is that you have the rate stored in a hidden field (like you said) and then you prompt the user for the lot size.  Only when they submit the lot size, you actually multiply the lot size by the hidden rate before submitting the form to the Marketo db.

You'd probably find it more visually appealing to have a second hidden field that stores the lot size * rate.  Then you don't have to "magically" update the lot size field while the user is watching.  Or you could just hide the form while you're submitting, same difference so they don't see that.  Anyway, this is just as a quick-and-dirty demo of how you can massage field values any way you want before posting to Marketo.

[Bonni_Graham_Go]

I have a similar issue, but I'm not quite sure how to adapt this code to fit (or, honestly, where to put it, since I'm not using Marketo landing pages - our forms feed straight into our website, which is done in Wordpress using a Marketo Forms plugin). What I need to do is add the numerical values of 5 specific fields to populate a separate field. I do not need to display the results on the form; that value will drive dynamic text in an email based on segmentation rules (those I know how to set up).

I'm 90% sure I understand how to adjust the code itself, but I'm not sure where to PLACE the script to trigger the action. I strongly suspect it's in the script area of my Wordpress page, but am not sure. I'm also not entirely sure the script as it is now posts back to Marketo if the script resides on a page that is not a Marketo landing page. Help?

[SanfordWhiteman]

Scripts that drive extended forms behaviors need to go after the script that loads forms2.min.js (since they depend on that script, the main Forms 2.0 JS library, to have already loaded and created its global object MktoForms2).

So if you know forms2.min.js is being loaded at the same place in the HTML that the <form> element is — which is usually, but not always, the case — you can add the extended forms JS right before the closing </body> and that will implicitly be after the required script.

[Bonni_Graham_Go]

So, I didn't get my total. I am sure I did something stupid. Here's my revised script:

var mktoInstance = '//app-sjo.marketo.com',
munchkinId = '313-JIS-706',
formId = 6846;
// reuse existing fields in demo!
var fieldProxyForWhatDevices = 'QuizWhatDevices',
fieldProxyForDeviceHardening = 'QuizDeviceHardening';
fieldProxyForResponsePlan = 'QuizResponsePlan';
fieldProxyForThreats = 'QuizThreats';
fieldProxyForImpact = 'QuizImpact';
fieldProxyForScore = 'QuizTotalScore';
MktoForms2.loadForm(mktoInstance, munchkinId, formId,
function (form) {
form.onSubmit(function (form) {
var devices = +form.getValues()[fieldProxyForWhatDevices],
hardening = +form.getValues()[fieldProxyForDeviceHardening],
response = +form.getValues()[fieldProxyForResponsePlan],
threats = +form.getValues()[fieldProxyForThreats],
impact = +form.getValues()[fieldProxyForImpact],
finalValues = {};
// calc the actual final value and post that to Marketo
finalValues[fieldProxyForScore] = devices + hardening + response + threats + impact;
form.setValues(finalValues);
form.submittable(false);
});
});

I added this script to the end of the page where the form that collects the values resides. I have verified that forms2.min.js loads prior to my script, and that my script appears before the </body> tag. I got the scores for each answer on the quiz, but I didn't get a total.  Am I missing something?

[SanfordWhiteman]

What's your URL? Hard to know if you're embedding this correctly.

[Bonni_Graham_Go]

My site URL is https://www.scantron.com. There will be a specific quiz URL, but the page in question is not yet published (although I published briefly for testing). It's embedded through a Wordpress Plugin called MarketoForms. Here's the staged version so you can look at the page source: https://www.scantron.com/a1f5b73cabd1a13198ea3d6c5ba254fa/ 

[SanfordWhiteman]

Well, for starters, you didn't put the code in a <script>! It's just text on the page.

[Bonni_Graham_Go]

It's in the script box in WP, which I *thought* blocked that out automatically with the script command, but clearly does not. OK, let me try adding that to the script box. 

[Bonni_Graham_Go]

So I added that, but I'm still not getting my total score. Same link I provided earlier will show the updated code.

[SanfordWhiteman]

Fatal syntax error, always make sure to check the F12 Console first.

You want semicolons where you have commas in this section.

[Bonni_Graham_Go]

I've done that, but now it's showing the form twice - once from the wordpress widget call, and once from this script. How do I get it to show the form only once? Is it as simple as removing this code? 

MktoForms2.loadForm(mktoInstance, munchkinId, formId,
   function (form)

I'm honestly feeling like the stupidest person in the world right now.

[SanfordWhiteman]

Yes, because you're already loading the form, you don't want to use the onReady argument to loadForm, but rather a separate whenReady.

var fieldProxyForWhatDevices = 'QuizWhatDevices';
var fieldProxyForDeviceHardening = 'QuizDeviceHardening';
var fieldProxyForResponsePlan = 'QuizResponsePlan';
var fieldProxyForThreats = 'QuizThreats';
var fieldProxyForImpact = 'QuizImpact';
var fieldProxyForScore = 'QuizTotalScore';

MktoForms2.whenReady(function (form){
  form.onSubmit(function (form){
    var currentValues = form.getValues();

    var devices = +currentValues[fieldProxyForWhatDevices];
    var hardening = +currentValues[fieldProxyForDeviceHardening];
    var response = +currentValues[fieldProxyForResponsePlan];
    var threats = +currentValues[fieldProxyForThreats];
    var impact = +currentValues[fieldProxyForImpact];

    var finalValues = {};
    // calc the actual final value and post that to Marketo
    finalValues[fieldProxyForScore] = devices + hardening + response + threats + impact;
    form.setValues(finalValues);
  });
});

Not sure why you had a form.submittable(false) in there, that would make the form never submit.

[Bonni_Graham_Go]

Thanks. Trying that. The form.submittable(false) was in the original sample and I wasn't sure whether it was important.

[Bonni_Graham_Go]

And this is why I don't program for a living. I am SO BAD at catching these. Once more into the breach!

[Bonni_Graham_Go]

Perfect - I suspected, but was not sure that was the case. You rock, sir.

[Matthew_Libanio]

This sounds exactly right, but for some reason the page does not load entirely.  But you solutions sounds exactly right.  Would be cool to see it in action if you could!

[SanfordWhiteman]

Where doesn't it load? It even works on my Blackberry...

[Matthew_Libanio]

Hi Sanford, so I can reduce this even further and make it simpler.  Your help or anybody is appreciated.

Landing Page 1 will ask customer to fill in Lot Size

Lotsize = Customer Input

Numbags = Lotsize/500 (no decimal places)

When they press SUBMIT, the Numbags field will populate based on the calculation above, but customer does not see that.

On the final landing page it will say:

Thank you {{lead.firstname}}, you will need {{lead.NumBags}} for this winter season.  Shop Now.

Any help is appreciated!  Thank you so much everyone!