Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* 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 <maxiak@hubspot.com>
* 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));
});
});
})();
@fooblahblah

This comment has been minimized.

Copy link

@fooblahblah fooblahblah commented Jan 27, 2016

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));
      });
    });
  });
@fooblahblah

This comment has been minimized.

Copy link

@fooblahblah fooblahblah commented Jan 27, 2016

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

@mianavahy

This comment has been minimized.

Copy link

@mianavahy mianavahy commented Apr 12, 2016

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?

@smeranda

This comment has been minimized.

Copy link

@smeranda smeranda commented Jun 16, 2016

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

@kid-synthetique

This comment has been minimized.

Copy link

@kid-synthetique kid-synthetique commented Oct 26, 2016

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.

@mayashavin

This comment has been minimized.

Copy link

@mayashavin mayashavin commented Nov 3, 2016

+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

@flexgrip

This comment has been minimized.

Copy link

@flexgrip flexgrip commented Jan 13, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment