topic Re: Include URL Parameters In Redirect URL After Form Submission in APIs & Integrations

Include URL Parameters In Redirect URL After Form Submission

lloydsilver — Wed, 30 Nov 2016 01:13:55 GMT

HubSpot cannot natively add any parameters to a redirect URL that the user is sent to after submitting a form (sadly). So we created some javascript that essentially waits until the user’s contact record gets populated with data and then redirects to the url adding the contact info as needed.

It works, but sometimes we are getting stuck in a loop where it’s not redirecting (presumably because it’s still waiting for the contact info to get populated).

This is being used on a HS landing page with a native form. It’s being added in the sourcecode of the submission message. Again, it does work. It just sometimes stalls out in a loop waiting for the user data to populate.

Here’s the code we are using. I’m wondering if anybody has suggestions on improving this:

<script>// <![CDATA[
$(function() {
    var personalizedDiv = $("#personalized-div");
    var personalizedInfo = {};
    personalizedInfo['firstname'] = (personalizedDiv.data("firstname"))?personalizedDiv.data("firstname"):"";
    personalizedInfo['lastname'] = (personalizedDiv.data("lastname"))?personalizedDiv.data("lastname"):"";
    personalizedInfo['company'] = (personalizedDiv.data("company"))?personalizedDiv.data("company"):"";
    personalizedInfo['email'] = (personalizedDiv.data("email"))?personalizedDiv.data("email"):"";
    personalizedInfo['phone'] = (personalizedDiv.data("phone"))?personalizedDiv.data("phone"):"";
    
    
    
    var err = 0;
    for (var val in personalizedInfo) {
        console.log(personalizedInfo[val]);
        if(personalizedInfo[val].length == 0) {
            err++;
        }
    }
    
    
    if(err == 0) {
        window.location.href = "http://site.com/schedule-a-tour?name="+personalizedInfo['firstname'] +" "+ personalizedInfo['lastname']+"&email="+personalizedInfo['email']+"&company="+personalizedInfo['company']+"&phone="+personalizedInfo['phone']+"&skip=1";
    } else {
        setTimeout(function() { 
            location.reload();
        }, 6000);
    }
});
// ]]></script>
<div id="personalized-div" data-firstname="{{contact.firstname}}" data-lastname="{{contact.lastname}}" data-email="{{contact.email}}" data-company="{{contact.company}}" data-phone="{{contact.phone}}">&nbsp;</div>
Please wait while we redirect you to our scheduling system ...

Re: Include URL Parameters In Redirect URL After Form Submission

Xfixium — Thu, 23 Mar 2017 15:21:18 GMT

This a way that I did it, it’s cookie based and basically works by setting the HubSpot page to redirect into itself. So when the submit button for a form is clicked, the code gets all the form field data, and appends it to the desired redirect url. It saves this url in a cookie. Then when the page redirects into itself, if the cookie is not empty, it redirects to the url saved in the cookie.

function getCookie(cname) {
   var name = cname + "=";
   var decodedCookie = decodeURIComponent(document.cookie);
   var ca = decodedCookie.split(';');
   for(var i = 0; i <ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0) == ' ') {
           c = c.substring(1);
       }
       if (c.indexOf(name) == 0) {
           return c.substring(name.length, c.length);
       }
   }
   return "";
}

var url = getCookie("UrlWithParameters");
if(url != "") {
   javascript:void(document.cookie = "UrlWithParameters=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;");
   window.location = url;
}

$(function () {
   $(window).load(function(){
       $("form.hs-form").live("submit", function (e) {
           var appendFields = function (url, values) {
               var data = {};
               $.each(values, function (i, item) {
                   if (item.name !== "hs_context") {
                       data[item.name] = item.value;
                   }
               });
               
               if (url.match(/\?/)) {
                   return url + "&" + encodeURIComponent($.param(data));
               } else {
                   return url + "?" + encodeURIComponent($.param(data));
               }
           };
           
           var $form = $(this);
           var apiUrl = $form.attr("action");
           var $hsContext = $("input[name='hs_context']", $form);
           var hsContext = JSON.parse($hsContext.val());
           var redirect = 'https://your_base_url.com';
           hsContext.redirectUrl = appendFields(redirect, $form.serializeArray());
           $hsContext.val(JSON.stringify(hsContext));
           javascript:void(document.cookie="UrlWithParameters=" + hsContext.redirectUrl);
       });
   });
});

Re: Include URL Parameters In Redirect URL After Form Submission

djpritchett — Tue, 05 Sep 2017 14:49:49 GMT

Xfixium,

I created a forum account just to say thanks… saved me hours.

Re: Include URL Parameters In Redirect URL After Form Submission

AlphaDave — Tue, 18 Sep 2018 15:00:23 GMT

Thanks Xflxium!! - your solution worked like a champ. (It's a shame HubSpot does allow this functionality by itself.)

Re: Include URL Parameters In Redirect URL After Form Submission

MdFarhan — Fri, 13 Aug 2021 12:55:51 GMT

@Xfixium Need help passing specific fields from the form as URL query parameters

Hey,

I found your solution helpful but not sure how to implement it. We want to pass specific fields from the form as URL query parameters. Can you help?

Re: Include URL Parameters In Redirect URL After Form Submission

Teun — Wed, 15 Dec 2021 10:42:23 GMT

For anyone who wants to use the Redirect URL from the form settings:

Re: Include URL Parameters In Redirect URL After Form Submission

MatthieuBRG — Wed, 13 Apr 2022 10:07:13 GMT

Hi Teun,

not dev here, what does this allow to do exactly?

I'm looking to add URL parameters (email) to the URL where I redirect users after filling out Hubspot form.

Which solution should I go for? Yours, lloydsilver original post or Xflxium's cookie one ?

And how to implement your solution if that's the preferred one?

Thanks a lot