form-redirect-params.js

/**
 * Append the form data from a HubSpot form automatically
 * to the redirect URL query parameters. These values can
 * then be used on the form to modify the user experience
 * of the Thank You page
 * 
 * LICENSE
 * Form redirect
 * Written in 2015 by Mike Axiak <[email protected]>
 * To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
 * You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see <http://creativecommons.org/publicdomain/zero/1.0/>.
 */
(function() {
  var $ = jQuery;

  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 + "&" + $.param(data);
    } else {
      return url + "?" + $.param(data);
    }
  };

  $(function () {

  $("body").on("submit", "form.hs-form", function (e) {
    var $form = $(this);
    var apiUrl = $form.attr("action");
    var $hsContext = $("input[name='hs_context']", $form);
    var hsContext = JSON.parse($hsContext.val());
    hsContext.redirectUrl = appendFields(hsContext.redirectUrl, $form.serializeArray());
    $hsContext.val(JSON.stringify(hsContext));
  });

  });
})();

Is this still a valid approach? I had to wrap the the on submit bit in another window load function to be able to attach the form submission. That seems to work for intercepting the form submission and I can log to see the context hs_context.redirectUrl is modified, but the ultimate redirect ignores that uri and uses the one configured for the form. Any suggestions?

  $(function () {
    $(window).load(function(){
      $("form.hs-form").on("submit", function (e) {
        console.log("form submitted");
        var $form = $(this);
        var apiUrl = $form.attr("action");
        var $hsContext = $("input[name='hs_context']", $form);
        var hsContext = JSON.parse($hsContext.val());
        hsContext.redirectUrl = appendFields(hsContext.redirectUrl, $form.serializeArray());
        console.log(hsContext.redirectUrl);
        $hsContext.val(JSON.stringify(hsContext));
      });
    });
  });

I'm only now realizing this was for self-hosted forms (via embed) and I was trying to use it via some custom JS on a HubSpot form, which apparently won't work...

How can I use it in a Hubspot Landing page (not an embed)? Is there a solution to pass values to the Thank you page using this script without the embed code?

I modified this to be used with the onFormSubmit callback for a HubSpot embed form: https://gist.github.com/smeranda/5b76c2523339ea330e936f384a7e1f7c

hsContext.redirectUrl is undefined in my case. There's no parameter with the name redirectUrl in the hsContext object.
Do you know if hubspot changed something since you made this script?
Is it still working for you?
Note that, yes, I setted up a redirect page in my hubspot form configuration.
Maybe I miss something here.

+1 hsContext.redirectUrl is undefined in my case also. If I defined redirectUrl when I called hbspt.forms.create({}) then it is ok, otherwise I can't see the default redirectUrl

I updated this to work with the new hubspot forms js. It sucks that you have to manually define the redirect now. But what are you gonna do?

https://gist.github.com/flexgrip/0ef20e183ca7fe577b5d309620fc44bc