APIs & Integrations

Gthn
Participante

Embedded Form submission & redirect URL based on form parameters

resolver

Hi,

I want to redirect users to a dynamic URL which already includes a "?".

 

Basically I want our users to fill a form with their website as one of the property in order to redirect them to a URL which include their website.

 

So if they fill a form putting: http://www.mywebsite.com

People would be redirected to the following URL http://www.domain.com/simulate.php?url=http://www.mywebsite.com

 

1. How can i add a time delay in the form code in order to be sure that Hubspot updates the property in order to create the right redirected URL

2. I tried the dynamic query string (as i saw in HS knowledge) but it didn't work neither and i've the feeling it's because of the "?" which is inside the URL.

 

Thanks in advance for your help

0 Avaliação positiva
4 Solução aceitas
derekcavaliero
Solução
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

Embedded Form submission & redirect URL based on form parameters

resolver

Yep I can, I actually just helped out another member of the forum with something similar.

 

What is the final URL format you are looking to redirect to? Also - do you have an example page with the form that I could see?

 

In hindsight - the serialize option works but it is admittedly a little messy. 😄

 

The $form argument of the onFormSubmit callback is a jQuery collection of the entire submitted HubSpot <form> element that is stored at the moment the form was submitted, and successfully validated.

 

That means you can dive into the collection and "cherry-pick" whatever field values you may want to use doing something like this:

 

var website = $form.find('input[name="website"]').val();

 

That would give you the isolated website field value in a separate variable you could then append to your redirect location as needed.

 

setTimeout( function() {
  window.location = "http://www.domain.com/simulate.php?url=" + encodeURIComponent( website );
}, 500 ); // Redirects to url with query string data from form fields after 1/2 second.

You could do this infinitely - however if you need to pass/map many fields to specific query string keys - I also have a solution for that which is a bit more elegant in nature.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com

Exibir solução no post original

IsaacTakushi
Solução
HubSpot Employee
HubSpot Employee

Embedded Form submission & redirect URL based on form parameters

resolver

Welcome, @mikefreeman.

 

Happy to clarify.

 

The var website = $form.find('input[name="website"]').val();snippet applies to the original poster's use case. The code will retrieve the form's website field value with jQuery and the rest of the code @derekcavaliero provided will append this website value to the redirect URL of http://www.domain.com/simulate.php.

 

If you're looking to append all the form field data to the redirect URL, go with the code in the soluton to this thread.

 

Be aware that you'll have to set the portalId and formId as well as change http://www.yoururl.com? to your desired redirect URL.

Isaac Takushi

Associate Certification Manager

Exibir solução no post original

0 Avaliação positiva
mikefreeman
Solução
Participante

Embedded Form submission & redirect URL based on form parameters

resolver

@IsaacTakushi,

 

  Many thanks for you help. Based on what you gave me and with help from a friend, I was able to get it to properly work. Here is the final working format that was successful for me. 

 

For anyone else trying to do this, here's a quick "how-to".

 

Simply drop the code below into the source code (RichText/Advanced/Source Code) on a rich text block in the COS. Change out the portalId and formId to match your form. You can find both of these values by opening up your form and looking at the URL. 

 

Screen Shot 2019-09-03 at 7.45.07 PM.png

 

The short value after "forms" is your portal ID, and the longer value after "editor" is your FormID. 

 

From there, change the input name to whatever field in your form you are refrencing. You'll change out "FieldID" to your form field. That would be "email" or "category" or whatever else you're asking in the form. 

 

Where I have "http://websiteurl.com?email=" just change that to whatever you want in front of your passed field variable. When the redirected, it will read "http://websiteurl.com?email=FieldID" and the FieldID will be replaced with the variable from the form. 

 

I am not sure what "emailWeb" do, but that seemed to make it work, so I am not going to change it on my end. Maybe @IsaacTakushi could speak more to that. 

 

Thank you again @IsaacTakushi  for your help. 

 

The final code I used is as follows: 

 

<!--[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: 'xxxxxxx',
    formId: 'xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    inlineMessage: 'You are being redirected to the Application...',
    onFormSubmit: function($form){
        
        var emailWeb = $form.find('input[name="FieldID"]').val();
        setTimeout( function() {
            window.location.href = "http://websiteurl.com?email=" + encodeURIComponent( emailWeb );
}, 500 ); // Redirects to url with query string data from form fields after 1/2 second.
        
    }
});
</script>

 

Exibir solução no post original

derekcavaliero
Solução
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

Embedded Form submission & redirect URL based on form parameters

resolver

@JTodrick You can't implement the JavaScript inside the confirmation message box in the form settings, the code needs to be added into the actual embed code using the callbacks where the form is being used/embedded.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com

Exibir solução no post original

0 Avaliação positiva
25 Respostas 25
SMcGarrigle
Membro

Embedded Form submission & redirect URL based on form parameters

resolver

So I've found a work around for this, create a custom module in Hubspot and use the following code. I don't know how to link the code without screen grabbing it on here. Inset this code into the custom module, then insert the module into the page you want. This will only redirect based upon the value of one field. you can replicate the ELSE IF section of the code if there are more than 3 options.

 

To change the code replace where I have put in Capital letters:

NAME1
NAME2

NAME3

OPTION

These 4 above are up to you to decide and are merely for referencing for the code to work so as long as they are the same above and below then that's all that matters

 

WEBSITE1 

WEBSITE2

WEBSITE3

These are the web addresses you want the page to re-direct to depending on selection

 

 

NAME OF DEPENDENT FIELD

Go to you form and right click on it, click inspect and find out the true name of the value you want to redirect based upon. E.g    How_Much_Is_Your_Budget?

Make sure this is copied exactly how it appears in the inspector.

 

FIELDVALUE1
FIELDVALUE2

FIELDVALUE3

Make sure these are copied exactly how it appears in your form for the values is the field we have named above, e.g £1-£2 include the spaces if you have any in the field so it might be £1 - £2

 

Obviously make sure you update your portal id and form id also at the top where the XXXXX are

 

 

Picture1.png

 

0 Avaliação positiva
amandalim1
Membro

Embedded Form submission & redirect URL based on form parameters

resolver

Hi, I'm trying this solution out now but I can't seem to pass the website URL straight into the redirect page link. Can someone assist, thank you so much!Screen Shot 2021-01-28 at 7.58.40 PM.png

0 Avaliação positiva
IsaacTakushi
HubSpot Employee
HubSpot Employee

Embedded Form submission & redirect URL based on form parameters

resolver

Welcome, @Gthn.

 

The method outlined in this article populates HubSpot form fields from a query string before the form is submitted. You're looking to do the opposite — populate a query string with form field values after a form is submitted.

 

@derekcavaliero's solution in this thread allows form data to populate a redirect URL's query string (following a ?) after a predefined delay.

 

Per this comment in the original thread, could you clarify where you got stuck regarding "I didn't get how to use  window.location ="http://www.yoururl.com?" + formData;"?

 

If I'm understanding you correctly, and given your example above, you'd replace http://www.yoururl.com? with http://www.domain.com/simulate.php?.

 

@derekcavaliero, it sounds like @Gthn also wants to pick out the website property/field specifically. Could you speak to how that might be accomplished through jQuery (as opposed to appending all form fields with var formData = $form.serialize();)? Appreciate your input!

Isaac Takushi

Associate Certification Manager
0 Avaliação positiva
Gthn
Participante

Embedded Form submission & redirect URL based on form parameters

resolver

Hi @IsaacTakushi 

Thanks for your answer. I will try to clarify my issue.

 

1. If I'm understanding you correctly, and given your example above, you'd replace http://www.yoururl.com?with http://www.domain.com/simulate.php?.

 

-> Not exactly. The yoururl.com will be replaced with "http://www.domain.com/simulate.php?url= "  . I'm afraid it generates a conflict because it already includes a "?". So, with the form parameter it will be a second "?".

 

2. could you clarify where you got stuck regarding "I didn't get how to use  window.location ="http://www.yoururl.com?" + formData;"?

 

-> I don't know how to use the +formdata. I tried to use this kind of URL given in the article you sent me but the redirection was not working

http://www.domain.com/marketing-offer?firstname={{contact.firstname}}&lastname={{contact.lastname}}&...}}

Each time i tried the redirected URL included some Hubspot form data like "hstc=" or  "submissionGuid="

 

So, this is where i'm stuck and I've no doubt that @derekcavaliero probably has the solution :).

 

Best,

0 Avaliação positiva
derekcavaliero
Solução
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

Embedded Form submission & redirect URL based on form parameters

resolver

Yep I can, I actually just helped out another member of the forum with something similar.

 

What is the final URL format you are looking to redirect to? Also - do you have an example page with the form that I could see?

 

In hindsight - the serialize option works but it is admittedly a little messy. 😄

 

The $form argument of the onFormSubmit callback is a jQuery collection of the entire submitted HubSpot <form> element that is stored at the moment the form was submitted, and successfully validated.

 

That means you can dive into the collection and "cherry-pick" whatever field values you may want to use doing something like this:

 

var website = $form.find('input[name="website"]').val();

 

That would give you the isolated website field value in a separate variable you could then append to your redirect location as needed.

 

setTimeout( function() {
  window.location = "http://www.domain.com/simulate.php?url=" + encodeURIComponent( website );
}, 500 ); // Redirects to url with query string data from form fields after 1/2 second.

You could do this infinitely - however if you need to pass/map many fields to specific query string keys - I also have a solution for that which is a bit more elegant in nature.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
jkeough78
Colaborador(a) | Parceiro
Colaborador(a) | Parceiro

Embedded Form submission & redirect URL based on form parameters

resolver

@derekcavaliero , thank you, you're the man! I disabled redirect in my HS form but it isn't redirecting. Here's the code I'm using: 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	region: "na1",
	portalId: "156754",
	formId: "f2a90b0f-843a-4d96-9bfe-1311362f8edb",
      cssClass: "",
      inlineMessage: "You are being redirected to the Application...",
      onFormSubmit: function($form){
        var emailWeb = $form.find('input[name="email"]').val();
        setTimeout( function() {
            window.location.href = "https://www.sellanyannuity.com/lp/thanks?email=" + encodeURIComponent( emailWeb );
}, 500 ); // Redirects to url with query string data from form fields after 1/2 second.
        
    }
});
</script>

 

I tried a few variations but couldn't get it to work. Here's a live test page so you can see yourself (feel free to test): https://www.sellanyannuity.com/testing-can-delete

 

Maybe the theme I'm using has code that is conflicting?

 

Thanks again,

Jim

0 Avaliação positiva
derekcavaliero
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

Embedded Form submission & redirect URL based on form parameters

resolver

@jkeough78 The issue you're having is that HubSpts onFormReady() local callbacks require jQuery to function (I am aware this is a bit annoying). 

 

If you open up your JS console in chrome and submit the form you'll see the following exception being thrown:

The onFormSubmit function in hbspt.forms.create requires jQuery. It was not run.

 

You'd need to ensure you load jQuery - or polyfill the method HubSpot is looking for in its forms.js script to get those local callbacks to work.

 

There are ways to do this with the global callbacks that utilize the window.postMessage API - but it involves more custom javascript due to not having jQuery available for a better API to grab the field values easily.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
jkeough78
Colaborador(a) | Parceiro
Colaborador(a) | Parceiro

Embedded Form submission & redirect URL based on form parameters

resolver
Dude thank you very much! I will turn on JQuery. I think the only downside is that it slows the site down a little bit.
0 Avaliação positiva
Albo
Participante

Embedded Form submission & redirect URL based on form parameters

resolver

@derekcavaliero @IsaacTakushi 

 

Quick question for you guys. I've got no problem deploying the solution as you suggested for the email form field. The only thing problem that I'm seeing that Hubspot seems to be replacing the @ of the email address with %40

 

So, instead of seeing https://yourdomain.com/?email=email@domain.com for the redirect, I am seeing yourdomain.com/?email=email%40domain.com

 

Any insights would be greatly appreciated.

 

Thank you!

0 Avaliação positiva
derekcavaliero
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

Embedded Form submission & redirect URL based on form parameters

resolver

@Albo Thats standard URI encoding for query parameters. HubSpot will decode query parameters automatically when prefilling it's form fields. If you're reading this value elsewhere you'll need to decode it first using decodeURIComponent() -https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
Albo
Participante

Embedded Form submission & redirect URL based on form parameters

resolver

I've got your script working as intended. Thanks for this solution. That said, I am interested in cleaning up the redirect a bit. I need to pass 4-6 fields to specific query string keys. Would you mind sharing the more elegant solution that you mentioned?

 

Thank you!

0 Avaliação positiva
derekcavaliero
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

Embedded Form submission & redirect URL based on form parameters

resolver

@Albo Here is a GitHub gist showing mapping mulitple fields to parameters.

 

https://gist.github.com/derekcavaliero/f79007a21233d8358636faa5199da165

 

You'd want to edit the queryMap variable to change what form fields map to what query string parameter. Then down in the redirect - you'd need to update the redirect location.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
IsaacTakushi
HubSpot Employee
HubSpot Employee

Embedded Form submission & redirect URL based on form parameters

resolver

CC @derekcavaliero on the above.

Isaac Takushi

Associate Certification Manager
0 Avaliação positiva
mikefreeman
Participante

Embedded Form submission & redirect URL based on form parameters

resolver

Hi @IsaacTakushi , I am having some trouble getting this to work properly. It is not clear to me where 

var website = $form.find('input[name="email"]').val();

 

is supposed to go. Here is what I have. 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "xxxxxx",
	formId: "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxx"
	 inlineMessage: 'This page is redirecting.',
    onFormSubmit: function($form){
        setTimeout( function() {
            var website = $form.find('input[name="email"]').val();
            window.location = "http://app.domain.com?" + formData;
        }, 250 ); // Redirects to url with query string data from form fields after 250 milliseconds.
    }
});
</script>

This simply shows the message, and doesn't do anything to redirect to another page. 

 

I am pretty sure I have put the "Var website..." in the wrong location, I just don't know where it needs to go. 

 

Thank you!

0 Avaliação positiva
IsaacTakushi
Solução
HubSpot Employee
HubSpot Employee

Embedded Form submission & redirect URL based on form parameters

resolver

Welcome, @mikefreeman.

 

Happy to clarify.

 

The var website = $form.find('input[name="website"]').val();snippet applies to the original poster's use case. The code will retrieve the form's website field value with jQuery and the rest of the code @derekcavaliero provided will append this website value to the redirect URL of http://www.domain.com/simulate.php.

 

If you're looking to append all the form field data to the redirect URL, go with the code in the soluton to this thread.

 

Be aware that you'll have to set the portalId and formId as well as change http://www.yoururl.com? to your desired redirect URL.

Isaac Takushi

Associate Certification Manager
0 Avaliação positiva
mikefreeman
Solução
Participante

Embedded Form submission & redirect URL based on form parameters

resolver

@IsaacTakushi,

 

  Many thanks for you help. Based on what you gave me and with help from a friend, I was able to get it to properly work. Here is the final working format that was successful for me. 

 

For anyone else trying to do this, here's a quick "how-to".

 

Simply drop the code below into the source code (RichText/Advanced/Source Code) on a rich text block in the COS. Change out the portalId and formId to match your form. You can find both of these values by opening up your form and looking at the URL. 

 

Screen Shot 2019-09-03 at 7.45.07 PM.png

 

The short value after "forms" is your portal ID, and the longer value after "editor" is your FormID. 

 

From there, change the input name to whatever field in your form you are refrencing. You'll change out "FieldID" to your form field. That would be "email" or "category" or whatever else you're asking in the form. 

 

Where I have "http://websiteurl.com?email=" just change that to whatever you want in front of your passed field variable. When the redirected, it will read "http://websiteurl.com?email=FieldID" and the FieldID will be replaced with the variable from the form. 

 

I am not sure what "emailWeb" do, but that seemed to make it work, so I am not going to change it on my end. Maybe @IsaacTakushi could speak more to that. 

 

Thank you again @IsaacTakushi  for your help. 

 

The final code I used is as follows: 

 

<!--[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: 'xxxxxxx',
    formId: 'xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    inlineMessage: 'You are being redirected to the Application...',
    onFormSubmit: function($form){
        
        var emailWeb = $form.find('input[name="FieldID"]').val();
        setTimeout( function() {
            window.location.href = "http://websiteurl.com?email=" + encodeURIComponent( emailWeb );
}, 500 ); // Redirects to url with query string data from form fields after 1/2 second.
        
    }
});
</script>

 

JTodrick
Membro

Embedded Form submission & redirect URL based on form parameters

resolver

This feels like it should work... but just doesn't.

I can't seem to get the form to save. It just pops up a red error message and says "Your rich text has unsafe HTML."

any ideas?

0 Avaliação positiva
derekcavaliero
Solução
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

Embedded Form submission & redirect URL based on form parameters

resolver

@JTodrick You can't implement the JavaScript inside the confirmation message box in the form settings, the code needs to be added into the actual embed code using the callbacks where the form is being used/embedded.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
0 Avaliação positiva
dimitreliasb
Colaborador(a)

Embedded Form submission & redirect URL based on form parameters

resolver

@IsaacTakushi Just wanted to post and say many thanks! after days and hours of testing and troublshooting we finally managed to get it to work with this little gold gem java snippet below. many thanks!!!

bd

0 Avaliação positiva
bryansteel
Participante

Embedded Form submission & redirect URL based on form parameters

resolver

Solid thank you. this worked for me.