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

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>

`

@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

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