add the fields submitted into the thanks message

[CEsparta]

Hi, I want to show a special message after the form is sumitted. somethink to this:

"Thank you, John, for your message. You mentioned that you'll need [6] hours to complete the task. The cost for this would be [180] dollars. We will be in touch regarding the start dates."

Where [6] is an exact value and [180] is a calculated value.

Can retrieve the fields submitted?

I have tried with onFormSubmitted:  but no result

[CEsparta · Accepted solution]

I have found a solution:

window.addEventListener('load', function () {
const hsform = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector(".hs-form");

hsform.addEventListener("submit", (event) => {
var field1 = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector("#field1-a5e92d3a-0bf4-4e29-b6d3-b12a634abd96").value;

var field2 = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector("#field2-a5e92d3a-0bf4-4e29-b6d3-b12a634abd96").value;

var total=field1*0.1061107143+field2*117+ 11550;
//Add the total to the html
var target = document.querySelector('#formulario');
var div = document.createElement('div');
div.innerHTML = "Calculated field: "+total;
target.parentNode.insertBefore( div, target );
target.parentNode.insertBefore( div, target.nextSibling );
})

})

[CEsparta · Accepted solution]

I have developed this solution:

window.addEventListener('load', function () {
const hsform = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector(".hs-form");

hsform.addEventListener("submit", (event) => {
var field1 = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector("#field1-a5e92d3a-0bf4-4e29-b6d3-b12a634abd96").value;

var field2 = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector("#field2-a5e92d3a-0bf4-4e29-b6d3-b12a634abd96").value;

var total=field1*0.1061107143+field2*117+ 11550;
//Add the total to the html
var target = document.querySelector('#formulario');
var div = document.createElement('div');
div.innerHTML = "Calculated field: "+total;
target.parentNode.insertBefore( div, target );
target.parentNode.insertBefore( div, target.nextSibling );
})

})

[CEsparta · Accepted solution]

I have found a solution:

window.addEventListener('load', function () {
const hsform = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector(".hs-form");

hsform.addEventListener("submit", (event) => {
var field1 = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector("#field1-a5e92d3a-0bf4-4e29-b6d3-b12a634abd96").value;

var field2 = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector("#field2-a5e92d3a-0bf4-4e29-b6d3-b12a634abd96").value;

var total=field1*0.1061107143+field2*117+ 11550;
//Add the total to the html
var target = document.querySelector('#formulario');
var div = document.createElement('div');
div.innerHTML = "Calculated field: "+total;
target.parentNode.insertBefore( div, target );
target.parentNode.insertBefore( div, target.nextSibling );
})

})

[crispyGTM]

@CEsparta  You may be better off trying to achieve this by re-directing to a landing page that has said tokens. 

@Jnix284  - thoughts here?

[Jnix284]

@crispyGTM an LP could work, the tough part with any solution is that the form values were just passed to HS and depending on the timing, the personalization token could still be blank by the time it loads. I haven't tested this in quite a while.

@CEsparta the values are passed via the forms API, while you likely can't include directly in the default message after form submit, a developer should be able to render those values on the thank you page or maybe even a pop-up. @Anton probably has more expertise here and can tell you what's possible and the best way forward.