Accessing form answer values in form confirmation dialog

  • 30 April 2020
  • 6 replies
  • 174 views

Userlevel 2
Badge +1

Hi everyone,

I’m trying to display a value in my form confirmation dialog based on the answers submitted in the form. To be clear, I’m not trying to display the values themselves, so the dynamic insertion doesn’t help.

I cannot so far find a way to access the form values in javascript to use them. Any help would be appreciated!

Thanks 🙂


6 replies

Userlevel 2
Badge +1

For a little more info, I just don’t know what to look for…

I’m assuming they’re around somewhere since the dynamic insertion can find them.

So far, the workaround I’ve figured out is to load another URL in a lightbox instead of the form confirmation dialog, passing the values in parameters there and then parsing the URL to display what I want in the page. But it would be a lot cleaner if I could stick to the confirmation dialog vs creating a separate page in unbounce.

Badge +1

@GregorySR Let me take a shot at how I will do this.
I will add a hidden field to the form and call it anything that you want to display on your form confirmation dialog (lets say x)

Then before form submit, I’ll calculate the value of x (based on user responses) and pass that into with the form submission data as a value of this hidden field.

In the form confirmation dialog, we can then use dynamic text to display it 😉

You can see it in action here - http://unbouncepages.com/os-identifier/
I did a 1 field form. The values in the headline of form confirmation box will change depending on what you choose.

Of course… There could be other ways of doing it too!

Userlevel 2
Badge +1

Thanks @Malik! That’s a clever solution, hadn’t thought of trying to calculate the results first and passing them through.
So I’m guessing you’d detect the “onClick” for the submit button and then field.value = result?

However, I’m still having trouble accessing the selected values. I did find an example script for a dropdown, but in my case I have a couple of radio buttons and a text field and cannot figure out how to get the selection / value.

Badge +1

Hi @GregorySR

I am a huge fan of unbounce hooks to manipulate form submissions. Posted the link below.
Here is the script I am using on the sample page

<script>
  window.ub.hooks.beforeFormSubmit.push(function(args) {
    var pet = args.formElement.querySelector('select#favorite_pet'); // replace with your form ID
    var person = args.formElement.querySelector('input#person_type'); //replace with your hidden field
    pet.value = pet.value.trim();
// Do the calculations    	

if (pet.value == "Cat") {
      person.value = "Cat-lover";
    } else if (pet.value == "Dog") {
      person.value = "Dog-lover";
    }
  });
</script>

For selecting your fields you are going to have to look for form elements. Here is the list of Element selectors

And here is the link my favorite Unbounce script 😉

Userlevel 2
Badge +1

Thanks @Malik! Looks like just what I needed 😀

How would I use the data from a form submission in a custom HTML in the confirmation dialogue?
I’m trying to put a form field funding_amount into a Google Analytics goal tag:

where ‘value’ comes from form field data.

Reply