Hey @grncbd, this the effect you’re looking for?-

http://unbouncepages.com/horizons1/?checkoutuemail]=harvey@test.com

Add the following JS before body end tag:

<script type="text/javascript">



//Pull the window location into a variable and make it searchable via URLSearchParams (95%+ browser support)

const url = window.location;

const params = new URLSearchParams(url.search);



// Get the email param specifically

const emailParam = params.get('checkoutuemail]');

const unbounceEmailField = document.getElementById("email");



// Set the field to be the param we got, but only if both exist

if(unbounceEmailField && emailParam) {

  unbounceEmailField.value = emailParam;

}



</script>

URLSearchParams has 95%+ browser support; if you have issues, there’ll be a polyfill somewhere!

Yes, that is exactly what I am trying to do.

I added the JS and verified that the name of the email field is “email”, but it doesn’t seem to be working. The URL is still being passed as “email=” instead of “checkout email]=”

Here is a link to my landing page if you want to take a look:

unbouncepages.com/grn

Ahh, I thought you wanted to pre-populate your Unbounce form field (and were unable to do so due to the restriction)… but you actually want to pass the URL params through to the Shopify page.

On the last Unbounce page, I’d use some custom JS to pull the query params out as before, then add to the link - something like this:

<script type="text/javascript">



//Pull the window location into a variable and make it searchable via URLSearchParams (95%+ browser support)

const url = window.location;

const params = new URLSearchParams(url.search);



// Get the email param from the query string

const emailParam = params.get('email');



// You'll need to do this for every button/link you need to append the email to. I've done one as an example

const unbounceButton1 = document.getElementById("lp-pom-button-112");



// Here we set the button's href to the current one, plus our string on the end

unbounceButton1.href = unbounceButton1.href + "?checkoutkemail]=" + emailParam;



</script>

Enjoy!

Thanks for your reply. You are correct, I am trying to pass the URL params through to the shopify checkout page.

Unfortunately, the script you sent over isn’t working. I replaced the “lp-pom-button-112” with the correct ID of my submit button, but still nothing.

With this JS, do I still need to check the tick box for “append form data to URL”?

Any documentation you could link to would be much appreciated.

Thank You

Hey these are the only assumptions on the script:

1.) The page that links to Shopify has the “email” param in the URL (it was “http://unbouncepages.com/b3g2-upsells/” for me, and seems to OK!)

2.) The button that links to the Shopify page is called “lp-pom-button-112” (this is the ID of the first “No thanks” button on the b3g2-upsells page).

The script just does the following:

1.) Take the “email” param out of the URL in the browser bar

2.) Change the location of any href called “lp-pom-button-112” to include the param in that format.

There’s no need to change your initial landing page or submit button 🙂

Thank you! I totally understand now and that script worked perfectly.

Here is the fully updated script in case anybody is curious how to adjust it to include first name, last name, shipping address, email, and phone.

    <script type="text/javascript">



//Pull the window location into a variable and make it searchable via URLSearchParams (95%+ browser support)

const url = window.location;

const params = new URLSearchParams(url.search);



// Get the email param from the query string

const emailParam = params.get('email');

const fnameParam = params.get('first_name')

const lnameParam = params.get('last_name')

const address1Param = params.get('address_1')

const address2Param = params.get('address_2')

const cityParam = params.get('city')

const stateParam = params.get('state')

const zipParam = params.get('zip')

const phoneParam = params.get('phone_number')



// You'll need to do this for every button/link you need to append the email to. I've done one as an example

const unbounceButton1 = document.getElementById("lp-pom-button-112");

const unbounceButton2 = document.getElementById("lp-pom-button-34")

const unbounceButton3 = document.getElementById("lp-pom-button-114")

const unbounceButton4 = document.getElementById("lp-pom-button-113")

const unbounceButton5 = document.getElementById("lp-pom-button-116")

const unbounceButton6 = document.getElementById("lp-pom-button-115")



// Here we set the button's href to the current one, plus our string on the end

unbounceButton1.href = unbounceButton1.href + "?checkout[email]=" + emailParam + "&checkout[shipping_address][first_name]=" + fnameParam + "&checkout[shipping_address][last_name]=" + lnameParam + "&checkout[shipping_address][address1]=" + address1Param + "&checkout[shipping_address][address2]=" + address2Param + "&checkout[shipping_address][city]=" + cityParam + "&checkout[shipping_address][state]=" + stateParam + "&checkout[shipping_address][zip]=" + zipParam + "&checkout[shipping_address][phone]=" + phoneParam;

unbounceButton2.href = unbounceButton2.href + "?checkout[email]=" + emailParam + "&checkout[shipping_address][first_name]=" + fnameParam + "&checkout[shipping_address][last_name]=" + lnameParam + "&checkout[shipping_address][address1]=" + address1Param + "&checkout[shipping_address][address2]=" + address2Param + "&checkout[shipping_address][city]=" + cityParam + "&checkout[shipping_address][state]=" + stateParam + "&checkout[shipping_address][zip]=" + zipParam + "&checkout[shipping_address][phone]=" + phoneParam;

unbounceButton3.href = unbounceButton3.href + "?checkout[email]=" + emailParam + "&checkout[shipping_address][first_name]=" + fnameParam + "&checkout[shipping_address][last_name]=" + lnameParam + "&checkout[shipping_address][address1]=" + address1Param + "&checkout[shipping_address][address2]=" + address2Param + "&checkout[shipping_address][city]=" + cityParam + "&checkout[shipping_address][state]=" + stateParam + "&checkout[shipping_address][zip]=" + zipParam + "&checkout[shipping_address][phone]=" + phoneParam;

unbounceButton4.href = unbounceButton4.href + "?checkout[email]=" + emailParam + "&checkout[shipping_address][first_name]=" + fnameParam + "&checkout[shipping_address][last_name]=" + lnameParam + "&checkout[shipping_address][address1]=" + address1Param + "&checkout[shipping_address][address2]=" + address2Param + "&checkout[shipping_address][city]=" + cityParam + "&checkout[shipping_address][state]=" + stateParam + "&checkout[shipping_address][zip]=" + zipParam + "&checkout[shipping_address][phone]=" + phoneParam;

unbounceButton5.href = unbounceButton5.href + "?checkout[email]=" + emailParam + "&checkout[shipping_address][first_name]=" + fnameParam + "&checkout[shipping_address][last_name]=" + lnameParam + "&checkout[shipping_address][address1]=" + address1Param + "&checkout[shipping_address][address2]=" + address2Param + "&checkout[shipping_address][city]=" + cityParam + "&checkout[shipping_address][state]=" + stateParam + "&checkout[shipping_address][zip]=" + zipParam + "&checkout[shipping_address][phone]=" + phoneParam;

unbounceButton6.href = unbounceButton6.href + "?checkout[email]=" + emailParam + "&checkout[shipping_address][first_name]=" + fnameParam + "&checkout[shipping_address][last_name]=" + lnameParam + "&checkout[shipping_address][address1]=" + address1Param + "&checkout[shipping_address][address2]=" + address2Param + "&checkout[shipping_address][city]=" + cityParam + "&checkout[shipping_address][state]=" + stateParam + "&checkout[shipping_address][zip]=" + zipParam + "&checkout[shipping_address][phone]=" + phoneParam;



</script>

Hey @Harvey_Carpenter,

I’m running into an issue. If the customer doesn’t fill out one of the fields (address 2 as an example), it passes the value as ‘null’ and the customer then has remove that at checkout. Is there a way to prevent it from passing ‘null’?

Thank you so much for your assistance.