Access form data in Form Confirmation Dialog?

w_r_e_f_s

Is there a simple way to access the data from a form in the Form Confirmation Dialog?

From what I can tell, I can’t append the form data as URL parameters for the iframe src when using the Form Confirmation Dialog. I also don’t see any form data in the global window.ub object after submitting.

Use case: I’d like to send some custom events via JS from within the Form Confirmation Dialog, and need email address, etc, to make it possible.

Apologies if this is redundant - I searched and found related topics, but nothing specifically about this.

Edited to add: I found an unanswered post from 2011 asking this same question, so confidence in this being possible is low: How to access form field data from a thank you page script?

10 replies

TimothyDO

Just spitballing here… but could you not get the values of the form inputs on change and append them to the href attribute as Get variables?

w_r_e_f_s

Hi @TimothyDO - thanks for the suggestion, I mostly follow what you’re saying. The issue is - when using Unbounce’s built in Form Confirmation Dialog, the submit button is just triggering some behind-the-scenes JavaScript to open the modal, so it’s tricky to pass through form data upon submit. If I was sending users to a second URL with a full page refresh, I could just use Unbounce’s “append form data as URL parameters” option, but I’m hoping to be able to accomplish this from within the Form Confirmation Dialog.

Hristian
Userlevel 7
Badge +3

Hi there,

You can use dynamic keyword insertion to display data from your form on your confirmation popup.

Here is a link with an explanation and a short video tutorial.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
w_r_e_f_s

Hi @Hristian - thanks for this tip. However, I’m looking to use the form data inside a snippet of JavaScript, so I don’t think the dynamic text option will work in this case (please correct me if I’m wrong.)

Hristian
Userlevel 7
Badge +3

Hi @w_r_e_f_s,

Yes, the DKI won’t probably work in this case but since you have control over the page, form and confirmation dialogue you can write JS that will display anything you want.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Joe_Librizzi

Did you ever find a solution to this? I’m trying to achieve the same thing and coming up empty.

w_r_e_f_s

Hey @Joe_Librizzi - no, I did not. I ended up skipping Unbounce forms altogether - we’re still using Unbounce LPs, but I embed Marketo forms on them, and then direct to a custom Thank You page after a form submit. The custom TY page is not on Unbounce, and I pass through some of the data I need as URL parameters, and do various things (personalization, custom lead scoring events) using the data on that page. Sorry that I can’t be more helpful.

Joe_Librizzi

No problem, thanks for the reply!

Joe_Librizzi

I’ve found a solution and will post it here for others even though OP moved on to other tools. Two caveats:

  1. This requires Google Tag Manager, or similar
  2. This is working in UAT but has not been stress tested in production yet. I’ll update this post if there’s any dramatic issues.

This article about GTM custom event handlers basically lays out the process for collecting the field values. Just make two adjustments:

  • In the HTML Tag, use a click event on the ‘a.lp-pom-button’ element. The more logical submit event doesn’t work.
  • Instead of the element attributes outlined in the the Callback variable, use querySelector()s to grab the field values by input ID. Another article by the same author can assist with scripts to capture dropdowns, radio buttons, etc.

That gives you the field values in a data layer variable on the form page. So whatever you do with them has to be done from there rather than the confirmation dialog. I assume that theoretically you could pass the data layer to the confirmation dialog, but for my needs I added a pixel leveraging the Callback variable to the click event so that the data is passed to my downstream application.

I hope that gives anyone else looking for a solution some direction!

Lior_asta

I found a solution, you can bind to the click event and change the form URL by appending query parameters to the confirmation page like this:
(".lp-pom-button").click(function(event){ // I used the split to assure that if someone fills the form twice the query string will be stripped off and appended again. ub.form.url = ub.form.url.split("?")[0] + "?email=" + (‘input[name=“email”]’).val();
})
Under the confirmation page’s javascript, you can parse the URL and get the email, or any other parameter and use it in the code.

Reply


Terms & ConditionsCookie settings