Displaying form results on a landing page

MarkRoma78
Level 1

Displaying form results on a landing page

Hi all, new to the boards so apologies if I'm posting improperly here.

 

I have searched high and low and cannot find a discussion that matches my needs:

I have a form with custom radio button fields with numeric values, and i need the TOTAL of those values to display in the landing page so the user can see and confirm before they submit. i feel like there has been a lot of talk of field calculations, but not how to display them before submit. is this even possible in marketo?

11 REPLIES 11
Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: Displaying form results on a landing page

So, if I understand this correctly, you need to show the total as people select the checkboxes (assuming each has a numeric value associated with it) and update it as people change their selections too, right? You can do this via the forms library- get the checkbox values that the user has selected (I.e., are set on true) and add them using JS. 

MarkRoma78
Level 1

Re: Displaying form results on a landing page

Firstly. thank you so much for your reply!

 

however, as easy as you make that sound, I cannot find a single example where anyone has done it, or referenced it in a forum, and i cannot seem to get my JS to pull those numeric values at all. can you point me in a more specific direction where i can get some guidance on this?

Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: Displaying form results on a landing page

 

MktoForms2.whenReady(function(form) {
  var checkboxValues = [];
  var totalValue = 0;
  var sumElement = document.getElementById("sumElement"); // Replace "sumElement" with the ID or selector of the element where you want to display the sum

  form.getFormElem().find('[type="checkbox"]').on('change', function() {
    checkboxValues = form.getFormElem().find('[type="checkbox"]:checked').filter(function() {
      // Filter out checkboxes based on their name or ID
      return this.name !== "excludeCheckbox1"
    }).map(function() {
      return parseInt(this.value);
    }).get();

    totalValue = checkboxValues.reduce(function(sum, value) {
      return sum + value;
    }, 0);

    sumElement.textContent = totalValue; // Update the content of the sum element with the calculated total value
  });
});

 

In this code, you need to customize the exclusion logic based on the name or ID of the checkboxes you want to exclude from the sum calculation. Replace "excludeCheckbox1" with the actual ID of the checkbox you want to exclude (e.g., you might have an Email Opt-In checkbox that you may not want to include for computing the sum). You can add additional checkboxes too if you want to exclude them from computing the sum when checked. The filter() method is used to exclude the checkbox based on their ID. Only the checkboxes that don't match the exclusion criteria will be included in the checkboxValues array and used for calculating the sum. Also, replace "sumElement" with the ID or selector of the HTML element where you want to display the sum. Make sure the element exists in your HTML markup. The logic would remain same for the radio fields too, you'd read their parse their numeric values, sum them up, and display it. I deployed it on a test page here.

 

MarkRoma78
Level 1

Re: Displaying form results on a landing page

you are my hero, an absolute legend. i'll dig into this tomorrow and let you know how it turns out

SanfordWhiteman
Level 10 - Community Moderator

Re: Displaying form results on a landing page

You said they were radio buttons. Are they actually checkboxes? That’s very different.

 

Please link to a page with your form.

Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: Displaying form results on a landing page

I agree- it'd be nice to have a link to the page with the form.

 

MarkRoma78
Level 1

Re: Displaying form results on a landing page

yep, they are actually radio buttons:

 

https://go.info.shi.com/testing-form-code.html

 

it's a generic template because the project would require me to keep this somewhat temporary until the campaign is ready to go public.

 

 

MarkRoma78
Level 1

Re: Displaying form results on a landing page

here's a temporary version of the page:

 

https://go.info.shi.com/testing-form-code.html

SanfordWhiteman
Level 10 - Community Moderator

Re: Displaying form results on a landing page

  • you don’t actually have to know what kind of input (text, checkbox, radio) it is — just whether the value should be parsed as a Number
  • you don’t need to check the DOM value because the Marketo JS API will always know the values
  • you don’t need to listen for each field to change, just listen for the whole form

 

See MktoForms2 :: Total numeric fields