Hubspot Form on a Hubspot Page

Justine Cranmer Updated by Justine Cranmer

Referral Capture with HubSpot Form embed in HubSpot Pages

Note: This integration requires custom code, written in JQuery to be placed on the HS Landing Page or HS Web Page. This integration is different from using a HubSpot form embedded on another Content Management System (CMS) or a standalone HubSpot form.

Start with the Basic Custom Conversion Tracking Script Below

1. Open a text editor

2. Copy and Paste the following script into your text editor:

<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.hs-input').val();
var firstname = $('input.hs-input:eq(1)').val();
var lastname = $('input.hs-input:eq(2)').val();
var phone = $('input.hs-input:eq(3)').val();
runConversion(email,firstname,lastname,phone);
//event.preventDefault();
});
}, 2500);
});

function runConversion(email,firstname,lastname, phone) {
window.rrSpace = (
rrSettingsConversion = {
debug: "false",
parameters: {
firstname: firstname,
lastname: lastname,
email: email,
phone: phone
}
}
);
(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_DELETE.referralrock.com/webpixel/beta/universalv03.js');
}
</script>

3. In the above script that you just copy and pasted, update the text which says EXAMPLE_DELETE with the domain of your Referral Rock account (e.g. "bostonroofing," "financingcompanyABC")

Update your Custom Conversion Script

1. Identify your HubSpot form which you would like to fire your custom Conversion Tracking Script, you can find this in HubSpot under Marketing > Lead Capture > Forms.

2. Identify which fields you would like to capture with your Conversion Script. All fields that are captured with our script must be visible. This help article will not show you how to capture hidden field data and pass to Referral Rock.

3. Identify the order of your HubSpot form fields. You will place the variables in the script in this order.

4. Re-arrange the bolded lines in the script below to match the order they are received in the Conversion Script. For example, the script below would be written for a HubSpot form that looks like the subsequent screenshot. The field order here is Email, First Name, Last Name, and Phone Number.

<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.hs-input').val();
var firstname = $('input.hs-input:eq(1)').val();
var lastname = $('input.hs-input:eq(2)').val();
var phone = $('input.hs-input:eq(3)').val();

runConversion(email,firstname,lastname,phone);
//event.preventDefault();
});
}, 2500);
});

function runConversion(email,firstname,lastname, phone) {
window.rrSpace = (
rrSettingsConversion = {
debug: "false",
parameters: {
firstname: firstname,
lastname: lastname,
email: email,
phone: phone
}
}
);
(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_DELETE.referralrock.com/webpixel/beta/universalv03.js');
}
</script>

Note: Should you need to re-arrange the fields, it is very important to re-arrange the numbering. See the example below.

Example #2 - Rearranging fields

For a form with the field order of First Name, Last Name, Phone Number, Email. Replace the eq(#) with the appropriate order. See below.

Note: The first field does not require an eq() parameter in the selector.

        var email = $('input.hs-input:eq(3)').val();
var firstname = $('input.hs-input').val();
var lastname = $('input.hs-input:eq(1)').val();
var phone = $('input.hs-input:eq(2)').val();
Example #3 - Skipping unnecessary fields

For a form with the field order of... First Name, Last Name, Product Interest, Salesman Name, Phone Number, Email, where Referral Rock does not want to capture Product Interest or Salesman Name, update the eq(#) with the appropriate field order.

Note: We update the eq value for email to 6 and phone to 5 to reflect the number in which they arrive in the form fields, even if we skip others.

        var email = $('input.hs-input:eq(5)').val();
var firstname = $('input.hs-input').val();
var lastname = $('input.hs-input:eq(1)').val();
var phone = $('input.hs-input:eq(4)').val();
Example #4 - Removing fields from script

If you wish to remove fields from the script, you must remove them at all instances. Take note of the following bolded text, and remember to remove all appropriate options, or the script may error.

The example below has removed First Name and Last Name. The HubSpot form has the field order Email, X Field, Y Field, Phone Number, where X field and Y field are not captured.

<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.hs-input').val();
var phone = $('input.hs-input:eq(3)').val();

runConversion(email,phone);
//event.preventDefault();
});
}, 2500);
});

function runConversion(email,phone) {
window.rrSpace = (
rrSettingsConversion = {
debug: "false",
parameters: {
email: email,
phone: phone
}
}
);
(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_DELETE.referralrock.com/webpixel/beta/universalv03.js');
}
</script>

Add Script to HubSpot Pages

1. After logging into HubSpot, click on the drop-down menu Marketing > Website > Website Pages or Landing Page.

2. Select Edit on the corresponding Web Page or Landing page that you have the HubSpot form embedded on.

3. Click the Settings tab at the top of the screen.

4. Scroll down to Advanced, and find the Head HTML under Additional code snippets.

5. Copy and paste the script that was created in the above section to the Head HTML

How did we do?

Instapage

Active Campaign Forms

Contact