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>
* Updated in 2016 by Seth Meranda <seth.meranda@cune.edu>
* 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 appendFormData (form) {
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);
}
};
var $hsContext = form.find("input[name='hs_context']");
var hsContext = JSON.parse($hsContext.val());
hsContext.redirectUrl = appendFields(hsContext.redirectUrl, form.serializeArray());
$hsContext.val(JSON.stringify(hsContext));
}
/**
* add this to the embed form onFormSubmit callback
* http://developers.hubspot.com/docs/methods/forms/advanced_form_options
**/
onFormSubmit : function($form, ctx) {
appendFormData($form);
}
@hansengine

This comment has been minimized.

Copy link

@hansengine hansengine commented Jun 29, 2016

Hi Seth, how are you?

Could you please help me to understand what am i doing wrong? When i click the submit button i'm just being redirected to a page with the submissionGuid parameter. Thanks in advanced!

`

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    <script>
      hbspt.forms.create({ 
        portalId: 'ID',
        formId: 'FID',
        onFormReady : function($form, ctx){
            function appendFormData (form) {

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

              var $hsContext = form.find("input[name='hs_context']");
              var hsContext = JSON.parse($hsContext.val());
              hsContext.redirectUrl = appendFields(hsContext.redirectUrl, form.serializeArray());
              $hsContext.val(JSON.stringify(hsContext));
            }
        },
        onFormSubmit : function($form, ctx) {
          appendFormData($form);
        }
      });
    </script>

`

@flexgrip

This comment has been minimized.

Copy link

@flexgrip flexgrip commented Jan 13, 2017

@hansengine @smeranda

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

@fanomena-private

This comment has been minimized.

Copy link

@fanomena-private fanomena-private commented Nov 14, 2017

Extended this to also make the redirect work with hubspot calendar. There, you have to transform the "firstname" attribute to "firstName":

function appendFormData (form) {

        var appendFields = function (url, values) {
          var data = {};
          $.each(values, function (i, item) {
            if (item.name !== "hs_context") {

              if (item.name == "firstname") {
                data["firstName"] = item.value;
              }
              else {
                data[item.name] = item.value;
              }
            }
          });
          if (url.match(/\?/)) {
            return url + "&" + $.param(data);
          } else {
            return url + "?" + $.param(data);
          }
        };

        var $hsContext = form.find("input[name='hs_context']");
        var hsContext = JSON.parse($hsContext.val());
        hsContext.redirectUrl = appendFields(hsContext.redirectUrl, form.serializeArray());
        $hsContext.val(JSON.stringify(hsContext));
      }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment