APIs & Integrations

Gthn
Participant

Embedded Form submission & redirect URL based on form parameters

Résolue

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 Votes
4 Solutions acceptées
derekcavaliero
Solution
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

Embedded Form submission & redirect URL based on form parameters

Résolue

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

Voir la solution dans l'envoi d'origine

IsaacTakushi
Solution
HubSpot Employee
HubSpot Employee

Embedded Form submission & redirect URL based on form parameters

Résolue

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

Voir la solution dans l'envoi d'origine

0 Votes
mikefreeman
Solution
Participant

Embedded Form submission & redirect URL based on form parameters

Résolue

@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>

 

Voir la solution dans l'envoi d'origine

derekcavaliero
Solution
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

Embedded Form submission & redirect URL based on form parameters

Résolue

@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

Voir la solution dans l'envoi d'origine

0 Votes
25 Réponses
IsaacTakushi
HubSpot Employee
HubSpot Employee

Embedded Form submission & redirect URL based on form parameters

Résolue

Thanks so much for sharing, @mikefreeman! I'm glad you got it to work.

 

In your code, emailWeb is the name of a variable you define. The name itself doesn't really matter; you're just using it to hold the value of $form.find('input[name="FieldID"]').val();.. You then append emailWeb to the end of your URL, http://websiteurl.com?email, effectively setting a value for the email query parameter.

Isaac Takushi

Associate Certification Manager
0 Votes
mikefreeman
Participant

Embedded Form submission & redirect URL based on form parameters

Résolue

@IsaacTakushi, actually, I am hoping the URL redirect looks like this. 

 

app.tutorup.com/EMAIL and that's it. I don't want to get all the form data to be included in the URL. Only the email. 

 

I have removed the "portalId" & the "formId" just to post it publicly. 

<!--[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: 'XXXXXX',
formId: 'XXXXXXXXXXXXXXXXX',
inlineMessage: 'You are being redirected to the TutorUp Application...',
onFormSubmit: function($form){

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

}
});
</script>

The goal here is to pull the email address entered in the form and insert into the redirect URL so that it goes to app.site.com/email@email.com 

 

I was able to get it to post the email in the string through adding {{email}} to the redirect URL, but it adds a lot of other stuff. It looks like this.

 

app.site.com/%3F__hstc%3D12452660.52f0b750ee8a691e8b65dda125edced9.1567203299165.1567527568301.1567533494408.4%26__hssc%3D104981660.48.1567533494408%26token%3Dthisisthetestemail%2540gmail.com%26submissionGuid%3D9061f7e7-bfe0-42d7-bce0-8870fb23930d&r=&bc=

I just can't seem to get it to post the clean URL like I am hoping to do. 

0 Votes
IsaacTakushi
HubSpot Employee
HubSpot Employee

Embedded Form submission & redirect URL based on form parameters

Résolue

Hi, @mikefreeman.

 

Thanks for clarifying.

 

Per this post, the __hstc and __hssc parameters are added by the HubSpot cross-domain linking setting you have enabled. This can be disabled, but then you'll lose the ability to track visitors jumping from your HubSpot-hosted content to your app.

 

The submissionGuid parameter is appended whenever a HubSpot form redirects to another page. It is used to help track submissions/conversions. This cannot be disabled for embedded forms which redirect.

 

If a completely clean redirect URL is critical, you may want to pursue custom-coding your form and passing data to HubSpot via the Forms API.

Isaac Takushi

Associate Certification Manager
0 Votes
Gthn
Participant

Embedded Form submission & redirect URL based on form parameters

Résolue

Hi @derekcavaliero  and @IsaacTakushi ,

 

I finally understood how it works and therefore I was able to make it work exactly how i want!

Redirection perfeclty works, and takes the URL as a parameter. So, great!

 

Thank you guys for your help, I hope this solution can help more people :).

 

Have a great day

IsaacTakushi
HubSpot Employee
HubSpot Employee

Embedded Form submission & redirect URL based on form parameters

Résolue

Glad to hear it, @Gthn.

 

Thanks so much for jumping in, @derekcavaliero!

Isaac Takushi

Associate Certification Manager
0 Votes