In this digital marketing era, we want to make our landing pages and websites to be as personalized as possible to make it user friendly. This is where, URL parameter gets in, that we use to forward the values of user submissions from one page to another so we could autofill the web forms on next page or create sessions for users.
But sometimes, many of us have very simple requirement of showing the user submitted data on the thank you page or on the next page to personalize their experience.
For e.g. if someone filled an optin form on your landing page and filled their name in the “Name” field. You may want to show their name on the thank you page to personalize their experience.
We all want to do it but it doesn’t count in part of plan, as it looks very difficult to do.
But not anymore. Let’s see how to do it.
NOTE: Below solution can be used in your custom website and other CMS as well. We have seen more requests in Unbounce regarding this.
So the tutorial is specially added to help users facing this problem in Unbounce.
Follow these steps to get values from URL
URL parameters (also called query string parameters or URL variables) are used to send small amounts of data from page to page, or from client to server via a URL.
They can contain all kinds of useful information, such as search queries, link referrals, product information, user preferences, and more. In modern browsers, this has become a lot easier, thanks to the URLSearchParams interface.
This defines a host of utility methods to work with the query string of a URL. Assuming that our URL is https://example.com/?email=abc@xyz.com, we can grab the query string using window.location.search: Follow the steps here to add it in your page:
- It’s important to transfer the form data to next page with parameters. So you need to go to the form page and check the option “Append form data to URL“. This will transfer the values to next page where you want to update the text dynamically. This option is available when you select the form element in your page.
2. Add the custom HTML element in your next page and add the following code in your HTML block.
<p>Your static text <span id="email">Dynamic Content</span> static text continues.</p>
In this example, “email” is the ID used with <span> tag.
3. Write the following javascript in your page javascript section.
const queryString = window.location.search;console.log(queryString); // ?email=abc@xyz.comconst urlParams = new URLSearchParams(queryString);const email = urlParams.get('email')
console.log(email);
document.getElementById('address').innerHTML = email;
4. In above code, const email = urlParams.get(’email’) you can update the “email” with the parameter name you need the value for.
Let’s say you want to get the name value from the parameter, so you can update it like const email = urlParams.get(‘name’).You can keep the remaining code as it is.That’s it!
Now you should submit, your form and check the next page to see if the value is dynamically updated in the page.
Let me know if you face any issues while implementing in the comment section. I will be happy to help.
Subscribe to get notification about new hacks and tips I come up with.
