topic Re: add the fields submitted into the thanks message in Tips, Tricks & Best Practices

add the fields submitted into the thanks message

CEsparta — Tue, 22 Aug 2023 07:30:56 GMT

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

Re: add the fields submitted into the thanks message

crispyGTM — Tue, 22 Aug 2023 15:52:09 GMT

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

@Jnix284 - thoughts here?

Re: add the fields submitted into the thanks message

Jnix284 — Tue, 22 Aug 2023 19:11:13 GMT

@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.

Re: add the fields submitted into the thanks message

CEsparta — Wed, 23 Aug 2023 08:22:48 GMT

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 );
})

})

Re: add the fields submitted into the thanks message

CEsparta — Wed, 23 Aug 2023 08:24:48 GMT

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;

})