Track Form Conversions

Overview

HubSpot's built-in form software is powerful and customizable. Best of all, it is set up to work with HubSpot right out of the box.

This guide will go over setting up the initial referral capture from your HubSpot form!  We'll go step-by-step through the setup options for the following form implementations:

• HubSpot form embedded on your own site
• HubSpot Form Direct Link / Non-Embed
• HubSpot Form on a HubSpot Landing Page

🚧

HubSpot meetings not supported

There is no way to integrate with HubSpot meetings at this time until HubSpot adds functionality to their meetings tools to add submission data to redirect URLs.

HubSpot Form Embedded on Your Own Site

❗️

JavaScript support required on form's webpage

The website your form is embedded in must allow you to add JavaScript to the specific page the form is on and execute it.

Setting up the Referral Redirect Page

1. Navigate to Program Editor > Share or click here​

2. Under Referral Destination, select Change Destination

3. Make sure the Webpage Redirect option is selected and enter the URL to the page where your HubSpot Form is hosted.

🚧

These instructions work only for HubSpot Form's Embed option

Referral Conversion Tracking with HubSpot Embedded Forms

The next step in setting up Referral Rock to work with HubSpot is tracking conversions on your form. This will tell us which referral filled out the form, which member sent them, and any information we choose to send back from the form submission to Referral Rock.

To track conversions, we will ride along with the HubSpot form using their form callback. That means that when a form is successfully submitted, the referral code will automatically run and send the form data to Referral Rock to create a referral.

1. Navigate to your HubSpot form embed code. This is going to be on the page where your HubSpot form is embedded. It will look something like the code below:

2. Next, add a comma at the end of the formId line and copy/paste the following code directly below the comma you just added and above the closing tag:

onFormSubmit: function($form) {
    window.referralJS = ((window.referralJS !== null && window.referralJS !== undefined) ? window.referralJS : {});
    window.referralJS.conversion = {
        debug: "false",
        parameters: {
            firstName: $form[0].elements.firstname.value,
            lastName: $form[0].elements.lastname.value,
            email: $form[0].elements.email.value
        }
    };
}

3. The names within the parameter section are the names of the form fields (i.e. firstname, lastname, and email). While the above names are standard, if you are using a custom HubSpot form with different fields, you will need to change these to match your form field names.

📘

You can also add custom parameters from the form (in the same location where you have firstname, lastname, email) by using the following format: parametername: $form[0].elements.hubspotfieldname.value,

📘

All available parameternames in Referral Rock are listed below for your convenience: firstname, lastname, fullname, companyname, email, externalidentifier, amount, referralcode, conversionstatus, phone, note, publicnote, preferredcontact, customoption1name, customoption2name, customtext1name, customtext2name, customtext3name, customoption1value, customoption2value, customtext1value, customtext2value, customtext3value

4. Add your Referral.js SDK script above the form embed scripts. Your completed script should look similar to the example below.

5. Save your form code on the page and test by filling out the HubSpot Form and checking your Integration Event Log. You should see a new Conversion Tracking event which include all of the Form data you are passing to Referral Rock.

📘

If you're embedding a HubSpot form on a Content Management System such as Instapage, you will need to import the jQuery library to trigger our script. You can do so by importing the jQuery library using this code snippet above the imbedded HubSpot form:

HubSpot Form Direct Link / Non-Embed

In HubSpot

First, you'll need to add a referral code Field to your Form ("Referral Code"). We recommend passing it to a hidden field. The URL will feed the referral code value into the form and auto-fill the form field. This is how we attribute the referral to the member. Once your form is submitted, they are created as a New Contact in HubSpot.

After you have added the Custom Field:

1. In HubSpot, select the Settings icon in the upper right hand corner.

2. Select Properties.

3. Search for your custom Referral Code property (or whatever you chose to name it) and note the Internal Name for later use in Referral Rock.

In Referral Rock

1. In Referral Rock, navigate to *Program Editor > Share or click here.

2. Scroll down to Referral Destination > Change Destination

3. Enter the URL for your contact form and add the following to the end of your URL: ?referral_code={MEMBER_REFERRAL_CODE} where referral_code is whatever the Internal Name for the custom property is.This ensures we can pass the code to your form.

4. Add a Member to your Program that we can use for testing (Members > List > Add Member). View their member details and select their Member Referral link in an Incognito/Private window to test the redirect.

5. You should be taken to your form. Fill out the form and in HubSpot, check your Form Submissions. Ensure your test submission also submitted the Referral Code as well.

In Zapier

Trigger - HubSpot

1. Create a New Zap

2. Name your Zap

3. Search for HubSpot > New Contact

4. Ensure your HubSpot account is connected.

5. Test This Step and select the Contact info of the test referral submission from earlier, when you checked your HubSpot Form Submission.

Add Step - Filter

This allows Zapier to only send info to Referral Rock when the contact has a value for Referral Rock Code.

1. Select Only continue if....

2. Select Referral Code > exists.

Action Step - Referral Rock

1. In the next step select Referral Rock as your app.

2. Select Add Referral

3. Connect your Referral Rock account and test.

4. Our Zap requires First Name, email address, and Referral Code at least. Map the results from HubSpot in Step 1 to the appropriate fields in the Referral Rock step.

5. Select Continue and then Test This Step. You should see your test referral information come in to Referral Rock. You can view this under Referrals or your Integration Event Log.

6. Save the Zap and turn it on!

HubSpot Form on a HubSpot Landing Page

HubSpot requires the use of an on form submit function to send Referral Rock conversion data. This guide will show you how to use that function to track when a Referral fills out and submits a form.

Here is an example of a basic implementation for a HubSpot landing page and form. The first part of script is your unique Referral.js SDK script and the second part is the submit function.

<script type="text/javascript"> window.referralJS = ((window.referralJS !== null && window.referralJS !== undefined) ? window.referralJS : {}); window.referralJS.scriptConfig = { parameters: { src: "//blakebossss.referralrock.com/sdk/referral.js", transactionKey: "8acf8b9e-5ef2-4859-b9e2-884833e53b27" } }; (function (f, r, n, d, b, y) { b = f.createElement(r), y = f.getElementsByTagName(r)[0]; b.async = 1; b.src = n; b.id = 'RR_DIVID_V4'; b.setAttribute("transactionKey", window.referralJS.scriptConfig.parameters.transactionKey); y.parentNode.insertBefore(b, y); })(document, 'script', window.referralJS.scriptConfig.parameters.src); </script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
  $( document ).ready(function() {
    setTimeout(function() {
      $('input.hs-button').click(function( event ) {
        var email = $('input[name="email"]').val();
        var firstname = $('input[name="firstname"]').val();
        var lastname = $('input[name="lastname"]').val();
        runConversion(email,firstname,lastname);
        //event.preventDefault();
      });
  }, 2500);
});
  

function runConversion(email,firstname,lastname)
{
 window.referralJS = ((window.referralJS !== null && window.referralJS !== undefined) ? window.referralJS : {});
    window.referralJS.conversion = {
        debug: "false",
        parameters: {
            firstName: firstname,
            lastName: lastname,
            email: email
        }
    };
};
</script>

❗️

Do not use the script above

This is an example script, your script must have your unique SDK code and parameters. Use the directions below to add your own unique script.

How to Add Your Own Script

To create your script, use the code recipe below and the video tutorial for additional help.

Available Parameters
The second part of the script where you add your parameters has basic, additional, and custom parameters available for use. The values passed to these parameters are then saved with the Referral upon creation.

It’s highly recommended to use the basic parameters when implementing this method. Not using the basic parameters will limit the functionality of your referral program.

Video Tutorial