Adding Form Parameters in URL for Sequential Forms

Develop, Build & Integrate APIs & Integrations
1

My name is Lucas and I saw a post in the community about how to put the form parameters in the url .I’m creating 6 forms in a row that after you reply one you are redirect to the other and so on.

I want to do it in this form for exemple (https://minimalclub.com.br/pages/teste-teste) and i want that the email field to be in the url in the way that will complete the field in the next form after click in “submit” (for exemple, when I click in submit the url will be https://minimalclub.com.br/pages/teste-teste[?e-mail=test@test.com](https://minimalclub.com.br/pages/teste-teste)). Do you know which code do I need to add and where so that will be possible?

Thank you for take a look,

Lucas Innocentini

2

Hey @LInnocentini the other community post you’ve linked is actually exactly what you’re looking for, my only suggestion would be to use “onFormSubmitted” instead of “onFormSubmit” since using window.location onFormSubmit can cause a race condition that may redirect the page prior to the submission happens.

Other than that you can follow that post exactly, just replace the Country property with the email property.

3

Hi @TomM2 thank you for the reply. So here in the hubspot can I add the code? I’m new here and I’m used to use GTM

4

Hey @LInnocentini there’s no way to add the code to a HubSpot form module, this can only be done through the embed code. If you go into your forms and copy the embed code, you can customise that code and then paste it anywhere you like. If you want to add it to HubSpot I’d recomend creating a custom module for it.

There’s a full guide on customising the embed code here too!

Just FYI you will need a bit of familiarity with Javascript to implement it or troubleshoot it correctly, so if you don’t you may need to consult a web developer to fully implement!

5

@TomM2

So I’ using the following embed code in my shopify website, but is returning me this https://minimalclub.com.br/pages/pagina-para-teste-2?email=undefined
<!--[if lte IE 8]>
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/v2-legacy.js”></script>
<![endif]-->
<script type=“text/javascript” src=“//js.hsforms.net/forms/v2.js” charset=“utf-8”></script>
<script>
hbspt.forms.create({
portalId: ‘XX708XX1’,
formId: ‘2b9XXdXX-43fX-4XX4-XXc4-18cXXf33XX06’,
inlineMessage: ‘Você está sendo redirecionado’,
onFormSubmitted: function($form){
var emailWeb = $form.find(‘input[name=“email”]’).val(); // Alteração no nome do campo para “email”
setTimeout(function() {
window.location.href = “https://minimalclub.com.br/pages/pagina-para-teste-2?email=” + encodeURIComponent(emailWeb);
}, 500); // Redireciona para a URL com o parâmetro “email” após meio segundo.
}
});
</script>

6

Hey @LInnocentini any particular reason you’re adding a property for “emailWeb” instead of just the email field? It seems like that property was never called or defined in your code.

7

Hi @TomM2. I name like that for no particular reason.
I rename the var to just email, but I don’t think that will solve the issue. Do you have any ideia of what should I try?
<!--[if lte IE 8]>
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/v2-legacy.js”></script>
<![endif]-->
<script type=“text/javascript” src=“//js.hsforms.net/forms/v2.js” charset=“utf-8”></script>
<script>
hbspt.forms.create({

portalId: ‘XX708XX1’,
formId: ‘2b9XXdXX-43fX-4XX4-XXc4-18cXXf33XX06’,
inlineMessage: ‘Você está sendo redirecionado’,
onFormSubmitted: function($form){

var email = $form.find(‘input[name=“email”]’).val();

// Alteração no nome do campo para “email”
setTimeout(function() {

window.location.href = “https://minimalclub.com.br/pages/pagina-para-teste-2?email=” + encodeURIComponent(email);
}, 500);

// Redireciona para a URL com o parâmetro “email” após meio segundo.
}

});
</script>

8

Hey @LInnocentini seems like there may be a few syntax errors in your code. I created a new one from scratch which works for me.

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "PORTALID",
 formId: "FORMID",
 onFormSubmit: function($form){

 var emailWeb = $form.find('input[name="email"]').val();
 setTimeout( function() {
 window.location.href = "http://website.com?email=" + encodeURIComponent( emailWeb );
}, 500 ); // Redirects to url with query string data from form fields after 1/2 second.

 }
});
</script>
9

Thank you for all the atenttion so ar @TomM2 !
I use the code you made with the form infos , but it returned me https://minimalclub.com.br/pages/pagina-para-teste-2?submissionGuid=240e1987-68a6-4385-a4be-000852053026
Here is the code for you to take a look
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/embed/v2.js”></script>
<script>
hbspt.forms.create({
region: “na1”,
portalId: “21XXX321”,
formId: “2bXX4d26-4XXa-40d4-a5c4-1XXX0f33XXX6”,
onFormSubmit: function($form){
var emailWeb = $form.find(‘input[name=“email”]’).val();
setTimeout( function() {
window.location.href = “https://minimalclub.com.br/pages/pagina-para-teste-2?email=” + encodeURIComponent( emailWeb );
}, 500 ); // Redirects to url with query string data from form fields after 1/2 second.
}
});
</script>

10

@LInnocentini Do you have a link to the page you’re embedding the form on?

11

Here @TomM2
https://minimalclub.com.br/pages/teste-teste

12

The only thing I can think of here is maybe try changing the timer? Move from 500 down to 100?

Long shot again though, outside of that I’m out of ideas! You’ll need to consult a developer to get help building it out!