Table of Contents

HubSpot Forms

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. While we have a direct integration with HubSpot for updating referrals once they are added to Referral Rock, this article will go over setting up the initial conversion capture!  We'll go step-by-step through the setup needed to redirect referrals to your form and to track referral form completions.

HubSpot Form Embed

Setting up the Referral Redirect Page

The following instructions work only for HubSpot Form's Embed option.
  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.

Referral Conversion Tracking with HubSpot 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.

Adding Your Conversion Script to Your HubSpot Forms Code

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 </script> tag:

onFormSubmit: function($form) {
window.rrSpace = (
rrSettingsConversion = {
debug: "false",
parameters: {
firstname: $form[0].elements.firstname.value,
lastname: $form[0].elements.lastname.value,
email: $form[0]
(function (f, r, n, d, b, y) { b = f.createElement(r), y = f.getElementsByTagName(r)[0]; b.async = 1; b.src = n; = 'RR_DIVID'; y.parentNode.insertBefore(b, y); })(document, 'script', '//');

3) Note the text in bold in the code. The bolded 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) In the above code, where it says example in bold (also copied below), you will need to change this to the value in your own conversion script (found here). Usually, this is your business name that you added during set up of Referral Rock.


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:

<script src=""></script>

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 > edit Referral Page or click here.
  2. 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.
  3. This ensures we can pass the code to your form. So the URL will look something like this:
  1. 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.
  2. 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!

How did we do?


Gravity Forms