Solved

Can not enter a bracket into the form field input name/ID


Hello,

I am attempting to rename one of my form fields so that it will correctly pass the data via URL parameters.

I need to pass the data in the following format:
/?checkout[email]=example@example.com

However, the unbounce editor won’t allow me to include brackets ““ in the name of the form field. How can I get around this?

If I can enter brackets into the name of the form field, I will be able to pass my form data to Shopify’s checkout and my customers won’t have to enter their info twice.

Thank you

icon

Best answer by Harvey_Carpenter 9 June 2020, 23:48

View original

7 replies

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

http://unbouncepages.com/horizons1/?checkout[email]=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('checkout[email]');
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 + "?checkout[email]=" + 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.

Reply