APIs & Integrations

BorjaInbound
Participant

Pass field value to URL parameter

SOLVE

Hello!

So basically, we’ve built custom private pages for our client’s customers. The thing is that there are many customers groups/segments and we created one private page per group.

So, in order to join these pages, the users must fill out a form inside HubSpot and one of the form fields is called “Security Token”, a single-line text field.

Depending on the group they belong to, the customers will enter a different “Security Token”, with this “token”, we identify the segment where they belong to.

So, for internal purposes, we need to pass the “Security Token” field value into a string parameter in the URL of the page that they’re redirected.

An example:

  1. The user fills out the form (COS Page and HubSpot form), and its token is “TOKEN101”
  2. Form is submitted and it’s redirected to the desination page.
  3. The destination page URL should be “www.example.com/destination-page?token=token101

Is there any way to achieve this? Maybe using Forms API?

Thanks in advance for your time :slight_smile:

1 Accepted solution
Oscar1
Solution
Top Contributor

Pass field value to URL parameter

SOLVE

We needed to pre-fill some hidden fields from a form based on a URL from a CTA we send in an e-mail. This is the way that works for us:

 

https://example.com?email={{ personalization_token("contact.email", "Add here default value") }}

 

And you can add as many parameters as you'd like. Notice that if it's a company or deal property you'll have to change "contact.email" for "company.name" for instance or "deal.deal_amount".

 

Hope that works for you.

View solution in original post

21 Replies 21
Albusis
Contributor

Pass field value to URL parameter

SOLVE

Heya. If anyone would still need help, then I solved this by a simple 2step script.

On the first page you need to take that email and encode it as UTM, and on the 2nd page (2nd step if you will) you need to that that UTM, decode it, and input it into the field.

Step 1:

<script type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js" charset="utf-8"></script><script>
// Function to redirect with UTM parameter
function redirectToPageWithEmail(email) {
var baseUrl = "https://dev.aidigital.org/page-2";
var newUrl = baseUrl + "?utm_email=" + encodeURIComponent(email);
window.location.href = newUrl;
}

// HubSpot form creation and submission handling
hbspt.forms.create({
region: "na1",
portalId: "22130692",
formId: "626e67c3-0651-4e57-be9d-bd6d5505b74d",
onFormSubmit: function($form) {
// Capture the email from the form
var email = $form.find('input[name="email"]').val();
console.log(email); // Logging the email for debugging

// Add a delay before redirecting
setTimeout(function() {
// Redirect to the specific URL with the email as a UTM parameter
redirectToPageWithEmail(email);
}, 2000); // 2-second delay
}
});
</script>



Step 2:

<script defer>
// Initialize timeout and interval variables
var timeout = 10000; // 10 seconds
var interval = 500; // 500 milliseconds

// Function to populate email field
function populateEmailField() {
var urlParams = new URLSearchParams(window.location.search);
var email = urlParams.get('utm_email');
var decodedEmail = decodeURIComponent(email);
var emailField = document.getElementById('email-b54fdc79-efe6-451f-8793-1953e2cdc233');

if (emailField) {
emailField.value = decodedEmail;
return true;
}
return false;
}

// Start the timer
var startTime = Date.now();

// Check for the email field at intervals
var checkInterval = setInterval(function() {
if (populateEmailField() || Date.now() - startTime > timeout) {
clearInterval(checkInterval);
}
}, interval);
</script>



Bear in mind:

1) Form ID and portal ID are dummy (they are to my developer account), so replace them with form and portal IDs of your own.

2) Redirect URL (the URL where it says Redirect URL) is to my dummy agency (its actually real agency, but these web sites are with dummy content mostly - no time to fill it in). So edit it to go to page you need it to go to. 

3) The best is to set the form as raw HTML, otherway you might be able to edit its contents via script (it's very unlikely, given the not-raw form you can't even style with CSS). 

Still have trouble? Rate my answer, and don't forget I do this for a living (I can do it for you as well). 

0 Upvotes
Teun
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Pass field value to URL parameter

SOLVE

For anyone who is still searching for a solution, you can try the following script:

 

  window.addEventListener('message', event => {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      const input = document.querySelector('select[name="input_name"]');
      const context = document.querySelector('input[name="hs_context"]');
      const contextObject = JSON.parse(context.value);
      const redirectUrl = contextObject.redirectUrl; // Retrieve the redirectUrl from the form settings

      if (input) {
        if (input.value) {
          window.location.href = redirectUrl + `?input_name=${input.value}`;
        }
      }
    }
  });


Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


0 Upvotes
andriigo
Contributor

Pass field value to URL parameter

SOLVE

Hm, doesn't work for me...

I tried this:

https://app.website.com?url={{contact.website}}

https://app.website.com?url={{personalization_token("contact.website”, "Add here default value")}}

 

I'm using HubSpot form embedded on non-HS landing page.

Any help?

0 Upvotes
bradhardinge
Participant

Pass field value to URL parameter

SOLVE

Hi @Konistand, I don't suppose you got this to work?

 

I have the exact same issue. `contact.firstname` works if an existing contact is submitting the form and the form fields are pre-populated, but if it's a new user submitting the form, the querystring value is empty (or the fallback is used when using `personalization_token`). It doesn't matter what they enter, it seems `contact.firstname` isn't set...

 

Had to go down the embed and use Javascript to edit the redirectUrl path as per here.

0 Upvotes
Sheamus
Participant

Pass field value to URL parameter

SOLVE

Yeah, I have the same problem. Unfortunately the form is my in my foot, and I don't have access to embed it based the 'hatch' theme.

 

HS does seem to pass some other query variables like __hsfp and _hscc, etc. I wonder if I could use those server side to pull data from the form submission? Oh wait, it looks like the forms API does not allow you to pull anything specific.

0 Upvotes
Oscar1
Top Contributor

Pass field value to URL parameter

SOLVE

Hi @Konistand what if you delete the "valeur_par_default" from the name field? Sorry I ran out of ideas. It works for me but I can't see what is not working in your case.

0 Upvotes
Konistand
Member

Pass field value to URL parameter

SOLVE

Hi @Oscar1 , thanks for trying to help :).

I tried the following : https://rcos.be/connexion?create_account=1&firstname={{personalization_token("contact.firstname")}} and it gives me the following result: https://rcos.be/connexion?create_account=1&firstname=CONTACT.FIRSTNAME

 

I find it quite interesting because:

1. It puts it in capital letters so something is happening

2. If I make a typo mistake (e.g. contact.firstnamee); it's doesn't do it

 

Can you please share with me what you have written to make it work?

Thanks,

Nicolas.

0 Upvotes
Konistand
Member

Pass field value to URL parameter

SOLVE

Hello,

Thanks for the help. I'm still struggling to get it working. I used the following code:

https://mywebsite.be/connexion?create_account=1?method=post&firstname={{Contact.firstname}}

 

This is my URL at the moment they click on submit form (from hubspot). But the data is always empty even if the form is filled in.

 

does someone also have experienced this?

Thanks,

0 Upvotes
Oscar1
Top Contributor

Pass field value to URL parameter

SOLVE

Hi @Konistand , why do you have two "?" in your URL?

 

Have you tried it this way to pass the first name value?:
https://mywebsite.be/connexion?firstname={{ personalization_token("contact.firstname", "Add here default value") }}

 

Konistand
Member

Pass field value to URL parameter

SOLVE

Hi @Oscar1 ,

 

Thanks for helping out; I've been spending hours on that already :).

So what I want to achieve in the end is an URL which looks like this: https://rcos.be/connexion?create_account=1&firstname=Nico

where firstname is coming from the form.

 

I've tried multiple ways (including what you are suggeting) but I always get the same error that the value is not displayed:

- Test 1: https://rcos.be/connexion?create_account=1&firstname= {{ personalization_token("contact.firstname", "Add here default value") }} --> this test return URL with firstname = Add here default value; which is not what I want

- Test 2: https://rcos.be/connexion?create_account=1&firstname= {{Contact.firstname}} --> this test returns firstname = <empty>

 

You can see here more information if you want: https://www.screencast.com/t/GfvrVQf14

 

Thank you VERY much.

Nicolas.

 

0 Upvotes
Oscar1
Top Contributor

Pass field value to URL parameter

SOLVE

Hi @Konistand , from what I see in your recording, have you checked that the ID of the field "prenom" is "firstname"? If it returns"Add here default value" or is empty in the second case, it looks like it's working the passing of information, but not the connection with the property value of the form. 

Konistand
Member

Pass field value to URL parameter

SOLVE

Hi @Oscar1 ,

 

Yes the ID field of "prenom" is correctly the first name. This is what you can see at the beginning of the screencast.

Look here: https://www.screencast.com/t/TFkc4uZyUJP

 

Do you have any other idea 🙂 ?

Thanks,

Nicolas.

0 Upvotes
Konistand
Member

Pass field value to URL parameter

SOLVE

Hi @Oscar1 , let me know if you need to get more data to help out 🙂

0 Upvotes
Oscar1
Solution
Top Contributor

Pass field value to URL parameter

SOLVE

We needed to pre-fill some hidden fields from a form based on a URL from a CTA we send in an e-mail. This is the way that works for us:

 

https://example.com?email={{ personalization_token("contact.email", "Add here default value") }}

 

And you can add as many parameters as you'd like. Notice that if it's a company or deal property you'll have to change "contact.email" for "company.name" for instance or "deal.deal_amount".

 

Hope that works for you.

Sheamus
Participant

Pass field value to URL parameter

SOLVE

This doesn't seem to work for me either. In the Options section for my form, I have the redirect set to an external link:

https://app.mysite.com/signup/?email={{ personalization_token("contact.email", "default") }}

 

My application then reads the query variable and processes it. But when I fill out the form, I endup being redirected to this url:

https://app.mysite.com/signup?email={{%20personalization_token(%22contact.email%22,%20%22default%22)%20}}&__hsfp=2275750999&__hssc=251652889.1.1619120724980&__hstc=251652889.42bb2e0b19539640357b860107ae97c6.1619120724980.1619120724980.1619120724980.1

 

Which of course is not what I want. the URL should be https://app.mysite.com/signup?email=doug@gmail.com&_hsfp=....

0 Upvotes
Derek_Gervais
HubSpot Alumni
HubSpot Alumni

Pass field value to URL parameter

SOLVE

Hi all,

Regarding the original question; if you were to use a custom HTML form and the forms API, you could redirect the visitor to any URL with whatever query parameters you’d like. You could also customize the form embed code to dynamically change the redirectUrl to include query parameters, as previously discussed on the forums:

0 Upvotes
John
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Pass field value to URL parameter

SOLVE

If the form is on a COS page, then i think it is easier than you think (you won't even have to do anything api related)

  1. Go to edit the form module

  2. Even if you are going to an internal page, click redirect to external URL

  3. redirect to your desired page and attach whatever contact property you desire via query parameters.
    http://redirect-address.com/the-page?token={{contact.your_internal_property_name}}

After you click save, you can see your link when you hover over test link



I like kudos almost as much as cake – a close second.

ElsaB
Participant | Diamond Partner
Participant | Diamond Partner

Pass field value to URL parameter

SOLVE

Hi everybody,

 

As I can see, the only problem with this solution is that there is a certain delay before the parameters appear in the URL.
Do you have any suggestions on this?
How can I work around this problem?

Thanks a lot

 

0 Upvotes
redfoxius
Member

Pass field value to URL parameter

SOLVE

According to this API endpoint documentation you must use content-type:application/x-www-form-urlencoded, so you ll lost your redirect link’s get parameters. But you can analyze your token before cURL call and/or use some service link like example.com/token/<your_token> with redirect to example.com/destination-page?token=token101

0 Upvotes
Trevor_Hatfield
Member

Pass field value to URL parameter

SOLVE

Would love to know if there is a solution to this yet?

0 Upvotes