Include form fields as redirect URL parameters on an embedded form


#1

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.


Using data from form field in the redirect url on form submit
Pass field value to URL parameter
Retrive form submission data i hubl module
Adding delay after form submission
Fail to pull contact values from personalization tokens sporadically
Delay for SMART content display after Form Submission
How to pass contact information as query params to a Thank you page
Passing Email ( and other properties) from Form fill as query parameter in redirect URL
#2

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.


Passing page ID from LP to TY page, through HubSpot form
Passing Email ( and other properties) from Form fill as query parameter in redirect URL
#3

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-initializing form embed
Get contact information after form redirection
In WordPress, can I get an embedded Hubspot form that's set to inline TY to redirect to a URL
Dynamically set Salesforce Campaign ID (sfdcCampaignId) from URL
#4

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!


#5

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


#6

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!


#7

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