Include form fields as redirect URL parameters on an embedded form

Develop, Build & Integrate APIs & Integrations
21

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.

Pass field value to URL parameter Forms

If the form is on a COS page, then i think it is easier than you think (you won’t even have to do anything api related) Go to edit the form module Even if you are going to an internal page, click redirect to external URL [04%20AM] redirect to your desired page and attach whatever contact property you desire via query parameters. http://redirect-address.com/the-page?token={{contact.your\_internal\_property\_name}} After you click save, you can see your link when you hover over test li…

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

22

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

23

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.

24

well i’m years late (never saw this reply). The issue was that you were going from wordpress to hubspot and my solution only worked on a hubspot page

25

@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:
Simo Ahava’s blog

195e6f5b09dc24f0f0ad977ae71f3e87ecaeac30.png
195e6f5b09dc24f0f0ad977ae71f3e87ecaeac30.png471×454 109 KB

#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.

26

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.

<script>
 //code for redirecting to brew ninja signup flow after they enter their email
 $(document).ready(function() {
 setTimeout(function() {
 var form = $('[data-form-id=xxx-xxx-xx-your-form-id]');
 form.submit(function() {
 var email = $('[data-form-id=xxx-xxx-xx-your-form-id]').find('[name=email]').val();
 setTimeout(function() {
 window.location.href = 'https://yoursite.com?email=' + email;
 }, 500);
 }); 
 }, 500);
 });
</script>
27

Hi @Sheamus - can you walk me through how you implemented this ?

28

This absolutely was a great solution for me. I was trying to redirect to different thank you pages based on a <select> choice but the browser was not accepting “onFormSubmit”. I think there was a conflict on the page. Pulling the logic out of the JS that writes the form to the page is key. I replaced ‘$’ with ‘jQuery’ to avoid conflicts and - voila - it worked. Thanks!

29

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

30

Inside the form settings in hubspot, or you can set it explicitly in the embed code with the inlineMessage option.

31

@derekcavaliero I tried this solution

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.
 }
});

It displays thank you message, but doesn’t redirect…

32

Hi @derekcavaliero - when i embed this code onto my site (after adjusting the code with my portal ID, etc, the form doesn’t even appear on my page. Any advice?

33

Are you seeing any errors in the dev tools console?

34

Hey, @derekcavaliero thanks for continuing to try to support this thread. You rock :raising_hands: — Jaycee

35

@andriigo my appologies, I made a mistake the code I provided, it should be:

window.location.replace("http://www.yoururl.com?" + formData);

instead of:

window.location = "http://www.yoururl.com?" + formData;

36

@derekcavaliero I see you have been helping out people with this for years, so you migth be able to help!
I’m trying to achieve what other people here are - appending utm values upon form submission so people don’t have to input their info again.
I’ve created this test page here - Speech Analytics Platform for CX | Chattermill (pass: 1234567) and embedded a test form.
Ideal state would be that on successfull form submission, users are redirected to (https://meetings.chattermill.com/meetings/gmirazchiev/meetings-scheduler-for-demopricing) and values for email, first name and last name are appended to the URL.
I’ve tried several methods and some of the code snippets here, but can’t get it to work.
The redirect element works and redirects to the correct url, but the form data isn’t appended to the URL
The embed snippet I’ve used is:
hbspt.forms.create({
region: “na1”,
portalId: “613982”,
formId: “eb6ca632-e7fb-424c-ba32-ac9184679fb2”,
inlineMessage: ‘Your submit message here’,
cssClass: “hs-s-contact-form”,
onFormSubmitted: function($form){
setTimeout( function() {
var formData = $form.serialize();
window.location.replace(“https://meetings.chattermill.com/meetings/gmirazchiev/meetings-scheduler-for-demopricing?” + formData);
}, 250 ); // Redirects to url with query string data from form fields after 250 milliseconds.
}
});
Do you have any idea what I’m doing wrong?
Thanks

37

Alternatively, one can use onFormSubmitted:

 ...
 onFormSubmitted: function($form){
 window.location = "https://www.yoururl.com?" + $form.serialize();
 }
 ...
38

@jc0

Actually - you’ll have problems with that - because HubSpot doesn’t pass the $form argument to that callback like it does for onFormSubmit (this is very dumb and I had a lengthy chat w/ HubSpot support about it).

I would reccomend using onFormSubmit over onFormSubmitted - or if you plan on using onFormSubmitted - you’ll need to “cache” the $form in a global variable which would mean setting it via onFormSubmit and then referencing it in the onFormSubmitted callback.

39

For anyone searching for a solution where you can use the redirect settings from the form:

 window.addEventListener('message', event => {
 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
 const input = document.querySelector('select[name="input_name"]');
 const context = document.querySelector('input[name="hs_context"]');
 const contextObject = JSON.parse(context.value);
 const redirectUrl = contextObject.redirectUrl; // Retrieve the redirectUrl from the form settings

 if (input) {
 if (input.value && redirectUrl) {
 window.location.href = redirectUrl + `?input_name=${input.value}`;
 }
 }
 }
 });
40

@Teun , sorry, where do I put your code? Does that go in the <head> section? Do I still need to embed the form using HubSpot javascript embed code?