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.

Setting up the Referral Redirect Page

  1. In your program editor, navigate to the Referral Page and choose Redirect for Referral Capture.
  2. Click on the Redirect URL button and paste the form link from to the page with your Hubspot Form.
  3. Click save.

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 calllback. 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].elements.email.value
}
}
);
(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'; y.parentNode.insertBefore(b, y); })(document, 'script', '//example.referralrock.com/webpixel/beta/universalv03.js');
}
});

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.

'//example.referralrock.com/webpixel/beta/universalv03.js');

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.


How did we do?