topic Re: Include form fields as redirect URL parameters on an embedded form in APIs & Integrations

Include form fields as redirect URL parameters on an embedded form

lloydsilver — Mon, 03 Apr 2017 23:29:39 GMT

I need to embed a HS form on an external (not CoS) website. And when the user submits the form, the redirect URL needs to include form fields as parameters.

Is this possible?

We figured out a way of doing this on a CoS landing page using a native HS form, but it was pretty tricky. In this case, I need to embed the form on an external page rather than use a CoS page.

What I’m trying to accomplish is capture the lead’s info (name, company, email) and then pass that info off to a scheduling app which can use parameters to pre-fill a scheduling form so the user doesn’t have to re-enter their info. And I want to do it through a HS form first so that we capture the lead and source information in HS. If we did it straight in the scheduling app then we could create a lead using Zapier but without Source info.

Every other form app I’ve used has been able to do this. Still surprised HS can’t do it off the shelf. But I hope someone has a creative workaround. Thanks.

Re: Include form fields as redirect URL parameters on an embedded form

derekcavaliero — Tue, 04 Apr 2017 13:11:04 GMT

You could achieve this by using the onFormSubmit callback and switching the form to use an inline message instead of a redirect (explained below).

hbspt.forms.create({
    portalId: 'xxxxxxxx',
    formId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    inlineMessage: 'Your submit message here',
    onFormSubmit: function($form){
        setTimeout( function() {
            var formData = $form.serialize();
            window.location = "http://www.yoururl.com?" + formData;
        }, 250 ); // Redirects to url with query string data from form fields after 250 milliseconds.
    }
});

Because you have access to the jQuery $form object inside the onFormSubmit listener you can serialize the forms data and append it to a url to redirect to after the form is submitted. This only works if you have the inlineMessage set and disable the redirectUrl for the form.

See if that helps you out.

Re: Include form fields as redirect URL parameters on an embedded form

robertainslie — Wed, 05 Apr 2017 13:01:39 GMT

Hi @Lloyd_Silver,
Another way to do this is by re-running the hbspt.forms.create method of the embed code on change to each field and recreating the redirectUrl, appending each field. This changes the context and rebuilds the form on each call. @derekcavaliero 's method is probably better, but there are multiple ways to proceed.

That method looks like this:

hbspt.forms.create({
portalId: ‘[hub_id]’,
formId: ‘[form_guid]’,
redirectUrl:‘https://www.domain.com/page’,
target:’#target-node-for-form-build’
});

In your JS, recall that entire method on change to each field, creating a redirectUrl like:
redirectUrl:‘https://www.domain.com/page?firstname=Lloyd’. Be sure to include the ‘target’ node so the embed code knows where to rebuilt the form each time.

Re: Include form fields as redirect URL parameters on an embedded form

Jeromecollomb1 — Mon, 28 May 2018 15:24:15 GMT

Hi @Lloyd_Silver,

I'm having the same issue, but on a COS landing page.
As you've apparently solved it before, any chance you can share the solution here?

Thanks a lot!

Re: Include form fields as redirect URL parameters on an embedded form

Trevor_Hatfield — Mon, 16 Jul 2018 20:07:19 GMT

This worked great for me, just wanted to say thanks!

Re: Include form fields as redirect URL parameters on an embedded form

John — Thu, 19 Jul 2018 15:51:09 GMT

Hey @Jeromecollomb, I know it's been a while since you asked your question, but I just posted an answer to another question that might help you out.

@derekcavaliero you are the man. This answer saved me a lot of time!

Re: Include form fields as redirect URL parameters on an embedded form

derekcavaliero — Mon, 23 Jul 2018 12:59:06 GMT

@john_ascend @Trevor_Hatfield

Happy to help!

One thing I did not mention in my solution was to make 100% sure that you exclude any PII in the form data from being collected by Google Analytics.

Since we're talking about appending the data to the URL via a query string - GA will automatically capture that data inside its pageview reports. This means you'll likely need to add some custom logic around your tracking to make sure you adhere to the GA terms of use regarding collection of PII.

If you're using GTM (Google Tag Manager) to implement your web tracking (if you aren't I highly suggest you investigate) - this article is a great resource for understanding how to exclude data from being collected:

#GTMTips: Remove PII From Google Analytics Hits

Use customTask to automatically strip all personally identifiable information (PII) from requests sent to Google Analytics from your website.

Re: Include form fields as redirect URL parameters on an embedded form

Gthn — Mon, 12 Aug 2019 12:59:43 GMT

Hi,

I've the same issue as the same @lloydsilver . The thing is 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 property to be redirected to a URL which include their website.

So if I a 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. I'm not sure to really understand how to use target:’#target-node-for-form-build’

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.

3. I tried the @derekcavaliero method but i didn't get how to use window.location = "http://www.yoururl.com?" + formData;

Thanks in advance for your help

Re: Include form fields as redirect URL parameters on an embedded form

Kristeru — Tue, 27 Aug 2019 18:29:12 GMT

Could someone help me figure out why @derekcavaliero's solution is not working? I implemented his solution on the page https://www.krister.com/language-of-leadership-assessment.

The inline message is appearing when I submit the form, but the page is not redirecting to the page that I put into the window.location.

Here's the code that I put into Squarespace. I bolded the changes I made to your solution:

!--[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: "xxxx",
    formId: "xxxxx",
    inlineMessage: 'Your submit message here',
    onFormSubmit: function($form){
        setTimeout( function() {
            var formData = $form.serialize();
            window.location = "https://www.krister.com/success-language-of-leadership-assessment?" + formData;
        }, 250 ); // Redirects to url with query string data from form fields after 250 milliseconds.
    }
});
</script>

Re: Include form fields as redirect URL parameters on an embedded form

IsaacTakushi — Tue, 20 Aug 2019 21:17:53 GMT

Hi, @Gthn.

Let's continue the conversation in this thread.

Re: Include form fields as redirect URL parameters on an embedded form

IsaacTakushi — Tue, 20 Aug 2019 21:30:24 GMT

Hey, @Kristeru.

I'm pretty sure this is because your form is loading in an iframe.

I see that you have one of the new "themes" enabled here in the form editor's Style & preview tab. This causes the form to render in an iframe, so I'd recommend reverting to the "old theme" if you need to customize the embed code.

Re: Include form fields as redirect URL parameters on an embedded form

bryansteel — Thu, 03 Oct 2019 23:40:11 GMT

YOU REALLY ARE THE MAN!@!!! This is it.

Re: Include form fields as redirect URL parameters on an embedded form

Albo — Tue, 17 Dec 2019 03:25:37 GMT

@derekcavaliero

Can you see any reason why this modifying the HubSpot form embed script this way would interfere with how HubSpot receives the data upon submission?

For whatever reason, when I use this method on a Firefox browser the contact is not passed back to HubSpot. Chrome and Safari both function as intended. The default (non-modified) script works fine in Firefox. All are standard browsers with default configurations, *not* in incognito.

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "xxxxxxxx",
formId: "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
inlineMessage: 'Just a moment please',
onFormSubmit: function($form){
setTimeout( function() {
var formEmail = $form.find('input[name="email"]').val();
window.location = "https://www.xxxxx.com/xxxx/?email=" + encodeURIComponent( formEmail );
}, 100 ); // Redirects to url with query string data from form fields after 100 milliseconds.
}
});
</script>

Thank you!

Re: Include form fields as redirect URL parameters on an embedded form

derekcavaliero — Wed, 18 Dec 2019 12:57:48 GMT

@Albo

Try setting your setTimeout to something higher than 100 milliseconds and see if that helps. I haven't had or seen this issue before - and in theory it shouldn't because the onFormSubmit is processed after the form is validated and request is sent.

My theory is that if you redirect too quickly it may terminate the XHR request over to HubSpot's servers. I haven't actually tested this issue myself yet though - let me know what you find.

Re: Include form fields as redirect URL parameters on an embedded form

Albo — Wed, 18 Dec 2019 17:52:45 GMT

@derekcavaliero You're spot on! Setting the redirect back to 250 ms resolved the issue. Thank you!

Re: Include form fields as redirect URL parameters on an embedded form

dimitreliasb — Thu, 07 May 2020 16:24:25 GMT

Hi @John I came across this thread and we are having a very similar issue. I am passing just the email parameter to test from a hubspot form to a wordpress page (that includes the HubSpot tracking cod) . First line is the parameter they way i have it in the redirect and then the second is how it actually comes out. Any suggestions?

?email={{contact.email}}
email=%7B%7Bcontact.email%7D%7D

Basically I am trying to follor the directions in this article but it does not seem to pass the parameter.

Re: Include form fields as redirect URL parameters on an embedded form

dimitreliasb — Thu, 07 May 2020 18:22:10 GMT

@derekcavaliero I am trying to get this solution to work. Your snippet has come the closest to solving our issue however what happens with this code it redirects the page to a 404. Basically it pulls ALL the form data i think when we really only need to pull the email

So the URL string is full of parameters and at some point near the end of that screen it breaks the link.

The URL string looks like this:

?firstname=MYNAME&lastname=MYLASTNAME&email=MYEMAIL&company=&number_of_cnc_machines=0&zip=46268&do_you_currently_use_automation=No&hours_per_shift=&shifts_per_weekday=&shifts_per_weekend=&weeks_per_year=&operator_wages_per_hour=&operator_benefit=&system_cost=&hs_context=%7B%22rumScriptExecuteTime%22%3A1019.7899999911897%2C%22rumServiceResponseTime%22%3A1237.7850000048056%2C%22rumFormRenderTime%22%3A3.7949999677948654%2C%22rumTotalRenderTime%22%3A71.98499998776242%2C%22rumTotalRequestTime%22%3A216.79500001482666%2C%22lang%22%3A%22en%22%2C%22disableCookieSubmission%22%3Atrue%2C%22embedAtTimestamp%22%3A%221588874670525%22%2C%22formDefinitionUpdatedAt%22%3A%221588872328355%22%2C%22pageUrl%22%3A%22https%3A%2F%2Fprocobots.com%2Ftester%2F%22%2C%22pageTitle%22%3A%22Tester+-+ProCobots%22%2C%22source%22%3A%22FormsNext-static-3.480%22%2C%22timestamp%22%3A1588874670527%2C%22userAgent%22%3A%22Mozilla%2F5.0+(Windows+NT+10.0%3B+Win64%3B+x64)+AppleWebKit%2F537.36+(KHTML%2C+like+Gecko)+Chrome%2F81.0.4044.138+Safari%2F537.36%22%2C%22referrer%22%3A%22https%3A%2F%2Fprocobots.com%2Fwp-admin%2Fpost.php%3Fpost%3D2280%26action%3Dedit%22%2C%22originalEmbedContext%22%3A%7B%22portalId%22%3A%22209468%22%2C%22formId%22%3A%2296085b29-963b-4ce5-9a65-4f9f3046ee1b%22%2C%22inlineMessage%22%3Atrue%2C%22target%22%3A%22%23hbspt-form-1588874670572-8723872668%22%2C%22hutk%22%3A%22f6a5fcd85d55f675630d59b5873faf7c%22%2C%22shellId%22%3A0%2C%22shell%22%3Atrue%2C%22pageUrl%22%3A%22https%3A%2F%2Fprocobots.com%2Ftester%2F%22%2C%22pageTitle%22%3A%22Tester

Re: Include form fields as redirect URL parameters on an embedded form

derekcavaliero — Wed, 13 May 2020 15:04:44 GMT

@dimitreliasb

If you only need to pass 1 value through - simply dig into the form and get the value manually using the $form jQuery collection parameter in the onFormSubmit callback:

onFormSubmit($form){
  var email = $form.find('input[name="email"]').val();
  var redirectBase = 'https://www.google.com';
  window.location = redirectBase + '?email=' + email;
}

the reason your URL is breaking is because my previous script had a flaw. There are better ways to go about it - but for simple 1 parameter redirect logic - the above is as simple as it gets.

Re: Include form fields as redirect URL parameters on an embedded form

Sheamus — Sat, 24 Apr 2021 17:42:36 GMT

I built off of Derek's answer because I needed to use the built in landing pages, I was not using the form embed. The following worked for me.

Re: Include form fields as redirect URL parameters on an embedded form

andriigo — Wed, 30 Jun 2021 08:14:08 GMT

@derekcavaliero This only works if you have the inlineMessage set and disable the redirectUrl for the form.
How to disable redirectUrl for the form?