We haven't received the submitted data value on the thank you page.

Developer Support CMS Development
1

We have created the “ROI Calculator” Form

We have used the below code to display the form on the front end.

Page Link: https://bluewave.tekark.com/resources/savings-calculator/

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
	hbspt.forms.create({
		region: "na1",
		portalId: "20900109",
		formId: "451ff6ec-d3e8-4c14-bce9-7e7ec0b42f21"
		inlineMessage: "Thank you for trying out the Bluewave Savings Calculator.",		
		onFormSubmit: function($form, ctx) {
			showCalcSavings($form);
		} 
	});
</script>

We have also done some custom code for results calculations as below.

function showCalcSavings($form) {
		var mSavings;
		var ySavings;

		var vVoice = Number($form.find("#voice-451ff6ec-d3e8-4c14-bce9-7e7ec0b42f21").val());
		var vInternet = Number($form.find("#internet-451ff6ec-d3e8-4c14-bce9-7e7ec0b42f21").val());
		var vDataNetworks = Number($form.find("#data_networks-451ff6ec-d3e8-4c14-bce9-7e7ec0b42f21").val());
		var vMobility = Number($form.find("#mobility-451ff6ec-d3e8-4c14-bce9-7e7ec0b42f21").val());
		var vWebCon = Number($form.find("#web_conferencing___collaboration-451ff6ec-d3e8-4c14-bce9-7e7ec0b42f21").val());
		var vAudioCon = Number($form.find("#audio_conferencing-451ff6ec-d3e8-4c14-bce9-7e7ec0b42f21").val());

		var oValidateCharges = $form.find("#do_you_validate_charges_on_a_monthly_basis_-451ff6ec-d3e8-4c14-bce9-7e7ec0b42f21").val();
		var vValidateCharges = 0;

		if (oValidateCharges === "Yes - every charge") {
			vValidateCharges = 0.08;
		} else if (oValidateCharges === "Just exceptions above a threshold") {
			vValidateCharges = 0.15;
		} else if (oValidateCharges === "Not at all") {
			vValidateCharges = 0.28;
		}

		mSavings = Math.round((vVoice + vInternet + vDataNetworks + vMobility + vWebCon + vAudioCon) * vValidateCharges);
		ySavings = Math.round(mSavings * 12);				

		// Update input fields value
		$form.find('input[name=annually]').val((ySavings));
		$form.find('input[name=monthly]').val((mSavings));

		setTimeout(function() {
			window.location.href = "https://get-it-right.bluewave.net/technology-assessment-thank-you";
		}, 5000);

	}

We have received proper data in the mail: Screenshot by Lightshot

After submission on form page is redirected to this page: https://get-it-right.bluewave.net/technology-assessment-thank-you?__hstc=97806976.121bf9be120f42f707ae6f0819f54842.1704876081783.1704876081783.1704876081783.1&__hssc=97806976.3.1704876081784&__hsfp=1749141717&submissionGuid=6869e6b2-a8f5-439f-a958-2b9ce0c6dd21

The main concern is we have not received the below data value on the thank you page. Please see this screenshot: Screenshot by Lightshot

$form.find('input[name=annually]').val((ySavings)); 

$form.find('input[name=monthly]').val((mSavings));

Please help me to solve this issue.

2

Hey, @TSupport1 :waving_hand: Thanks for your question. This definitely sounds like a frustrating situation.

To confirm, the issue isn’t with the form or that the form is not collecting these values, correct? The root problem is that these values aren’t being passed as expected to display on your follow-up/thank you page. Is that correct?

Have you already tried to append these values as URL parameters when redirecting to the thank-you page? You could try modifying your timeout function to handle this. Then use JavaScript to parse the URL and extract the annually and monthly values.

setTimeout(function() {
 var url = "https://get-it-right.bluewave.net/technology-assessment-thank-you";
 var params = `?annually=${encodeURIComponent(ySavings)}&monthly=${encodeURIComponent(mSavings)}`;
 window.location.href = url + params;
}, 5000);

Hey, @MatthiasWeber @stefen @alyssamwilie, do you have any additional suggestions or JavaScript wizardry you can suggest for @TSupport1?

Thank you very much for taking a look! — Jaycee

3

Thanks @Jaycee_Lewis for your suggestion. But how to get those parameter values on the landing page?

Below is the landing page source code and we have tried to get the value using a personalized token. please see the below code.

<div style="text-align: center;">
<h1 style="font-size: 24px;"><span style="color: #008ea8;">Thank you for trying out the Bluewave Savings Calculator.</span></h1>
<div style="margin: 0 auto; background: #008ea8; border-radius: 20px; padding: 2em 3em 1em 3em; width: 50%; max-width: 700px; min-width: 450px;">
<p style="text-align: left; color: #fff; font-size: 20px;">Your Monthly Savings Potential: <code>{{ personalization_token('contact.monthly', ' ') }}</code></p>
<p style="text-align: left; color: #fff; font-size: 20px;">Your Annual Saving Potential: <code>{{ personalization_token('contact.annually', ' ') }}</code></p>
<p style="margin-top: 46px;"><span style="padding: 10px 20px; background: #95c93d; color: #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;"><a style="color: #fff; text-decoration: none;" href="https://bluewave.net/savings-calculator/">Want to calculate your savings again?</a></span></p>
</div>
</div>

Please help to get a personalization token @MatthiasWeber @stefen @amwilie on landing page.

We have used the Hubspot landing page.

Thanks.

4

Hey, @TSupport1 Thanks for clarifying you are trying to do this with a personalization token. If that’s the case, you’re likely running into a race condition. The values are technically stored in your portal, but it can take a few seconds to a few minutes for it to fully ingested and available for a use case like you are describing. If so, you’ll need to look at a custom solution to pass the details to your follow-up page and have it show immediately.

Best,

Jaycee