Trying to swap out a legacy Marketo form for a new Hubspot one


#1

Trying to swap out a legacy Marketo form for a new Hubspot one, but not sure if/how within the Hubspot API this might be possible.

The legacy code uses:

<script>
    MktoForms2.loadForm("//app-sj01.marketo.com", "445-ZDB-645", 1935, function(form){
        form.onSuccess(function(values, followUpUrl){
            var customFollowUpUrl = '<?php echo $thank_you_lander_permalink; ?>';
            if (customFollowUpUrl) {
                var calc = window.NasuniStorageCostCalculator;
                var data = {
                    forName: values.FirstName + " " + values.LastName,
                    forCompany: values.Company,
                    capacity: calc.data.capacity,
                    growth: calc.data.growth,
                    locations: calc.data.remoteLocations,
                    users: calc.data.mobileUsers,
                    savings: parseInt(jQuery('.final-calculation__amount--total > .value').html().replace(/,/g , "")),
                    percentage: parseInt(jQuery('.final-calculation__amount--percent > .value').html()),
                    traditional: calc.getTotal('traditional'),
                    nasuni: calc.getTotal('nasuni'),
                    r2c1: '17872.33',
                    r2c2: calc.getTotal('nasuni') / calc.data.capacity,
                    r3c1: calc.getCapacityPricing('traditional', calc.data.capacity),
                    r3c2: calc.getCapacityPricing('nasuni', calc.data.capacity),
                    r4c1: calc.getMobileUsersPricing('traditional', calc.data.mobileUsers) / calc.data.mobileUsers,
                    r4c2: '-1',
                    r5c1: calc.data.mobileUsers,
                    r5c2: '-1',
                    r6c1: calc.getMobileUsersPricing('traditional', calc.data.mobileUsers),
                    r6c2: '-1',
                    r7c1: calc.getRemoteLocationsPricing(calc.data.remoteLocationsType, 'traditional', calc.data.remoteLocations),
                    r7c2: calc.getRemoteLocationsPricing(calc.data.remoteLocationsType, 'nasuni', calc.data.remoteLocations),
                }
                window.location = customFollowUpUrl + '?' + jQuery.param(data);
              }
            return false;
        });
    });
</script>

As you can see, Marketo uses the “MktoForms2.loadForm” function to collect both variables from the form as well as variables from the page (window.) and passes them into the redirect URL once the form is submitted.

Can anyone advise how this might be achieved with a Hubspot form?


#2

@nasunibrett This is possible using the onFormSubmit callback method:

https://developers.hubspot.com/docs/methods/forms/advanced_form_options

It would look something like this:

hbspt.forms.create({
    portalId: 'XXXXXX',
    inlineMessage: 'inline message goes here',
    formId: 'YYYYYYY-YYYY-YYYY-YYYY-YYYYYYYYYYYY',
    onFormSubmit: function( $form ) {
        var customFollowUpUrl = '<?php echo $thank_you_lander_permalink; ?>';
        // You can access global variables here (e.g: window.foo)
        // $form is a jQuery object of the form that was submitted - so you can get the field data in multiple ways.
        setTimeout( function(){ // Set timeout might not be necessary - unless you want to make sure your tracking code fires if doing so...
            window.location = customFollowUpUrl + '?' + jQuery.param( data );
        }, 500 );
    }
});