I’m creating individual sign up pages automatically with URL parameters. So when a user signs up, he is automatically connected to the agency he/she is working with.
Technically it’s working great (hidden field + url parameter). But right now it’s a normal sign up page with no indicator to which agency they are signing up to.
So I’m wondering if it’s possible to display a URL parameter in a text field?
The usecase would be to include the agencys name in the url and then the sign up page can show something like “Welcome to AGENCY NAME”.
Welcome to the community! First off, great job getting it to work post signup. At the moment, I cannot think of any way to addon to this experience using URL params on your signup page, but I’ll double check with the team. If they find anything, I’ll get back to you!
In your signup block, add <span>agencyName</span> next to Sign up text (see first screenshot).
In your page settings, go to custom code, then the footer custom code and add this script and change in the first line user-accounts1 by the ID of your signup block
<script>
window.addEventListener('block-loaded-user-accounts1', () => {
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
var agencyName = getUrlParameter('agencyName');
var targetElement = document.querySelector('#user-accounts1 > section > div > div > div > div > div > h2 > span');
if (targetElement) {
targetElement.textContent = agencyName;
}
});
</script>
Explanation:
In airtable I created a formula field with agencyName as a url parameter. {Agency Name} is the dynamic part that should be your Airtable field with the agency name inside.
I use ENCODE_URL_COMPONENT for the case where the agency has a space between two words (for example… Agency A => space between Agency and A => without encoding the A won’t appear in the url parameters)
To replace the <span>agencyName</span> with the script (it is ruled by the line var targetElement = document.querySelector('#user-accounts1 > section > div > div > div > div > div > h2 > span');) see second screenshot.
Tell me if you need additional help, tests made , it works.
Hi @matthieu_chateau , I have just tried to apply the same logic, but this time inside of a form block. Unfortunately, i am not getting the expected result. Any idea why? Must be because of var targetElement I guess? But I don’t know how to adjust it.
This is my Code (I have changed to “form1”), placed inside footer
<script>
window.addEventListener('block-loaded-form1', () => {
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
var FirstName = getUrlParameter('FirstName');
var targetElement = document.querySelector('#form1 > section > div > div > div > div > div > h2 > span');
if (targetElement) {
targetElement.textContent = FirstName;
}
});
</script>
The queryselector of targetElement is indeed the problem as it is different for each block.
For the heading1 of a conditional form (of the first step, if there are multiple steps) this would be:
<script>
window.addEventListener('block-loaded-form1', () => {
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
var FirstName = getUrlParameter('FirstName');
var targetElement = document.querySelector('#form1 > div:nth-child(1) > div > section > div > div > div > form > div > div > div > div > div.em6j5j0.em6j5jl.em6j5j3n > div:nth-child(1) > div.em6j5j0.em6j5jl.em6j5j38 > h2 > span');
if (targetElement) {
targetElement.textContent = FirstName;
}
});
</script>
Though it might need to be adapted. In order to do this you need to open the developer console (In chrome, right click on the page then click “inspect” then you will need to hover the span element then click “copy selector”). This is what I show in the screenshot 2 in my post above.
