# ClickFunnels
The ReferralHero / ClickFunnels integration provides seamless functionality, empowering you to use your own ClickFunnels form to capture signups.
## ClickFunnels Classic
1. Log into your ClickFunnels account
2. Access the Funnel page by hovering over the ClickFunnels drop-down menu from your dashboard and clicking on Funnels
3. Choose the funnel you want to edit by clicking on the Funnel Name
4. Select the desired funnel step
5. Click on the Edit Page button of your funnel page to access the Page Editor
6. Scroll down and click “Get CSS Info” to note the button ID
7. Go to Settings > Tracking Code
8. Add the following scripts to the Header Code section:\
i. ReferralHero Global Tracking Code\
ii. Replace the button ID and campaign ID with your ClickFunnels button ID and ReferralHero campaign ID
<script>
document.addEventListener('DOMContentLoaded', function () {
var submitButton = document.querySelector('#tmp_button-310 a');
submitButton.onclick = function () {
var form = document.getElementById('cfAR');
var data = {
email: form.querySelector('#cf_contact_email').value
};
if (RH_MFxxxxxxxxx) {
RH_MFxxxxxxxxx.pendingReferral(data);
}
};
});
</script>
9. Save the changes
## ClickFunnels 2
1. Log into your ClickFunnels account
2. Go to Sites > Funnels
3. Access the Funnel page
4. Choose the funnel you want to edit by clicking on the Funnel Name
5. Select the desired funnel step
6. Click on the Edit Page button of your funnel page to access the Page Editor
7. Click on the button where you would like to add the script to edit the property, then go to the “Advanced” tab
8. In the section “Custom Attributes”, click “Add Custom Attribute”. Then enter “data-rh-form” in the Name field, and “true” in the Value field. Then save the changes
9. Click on the \ at the top right. Then go to the “Header Code” tab
10. Add the Global Tracking Code and the following javascript. Then click Save
<script>
document.addEventListener('DOMContentLoaded', function () {
var submitButtons = document.querySelectorAll('[data-rh-form] a');
submitButtons.forEach(function (submit) {
submit.onclick = function () {
var form = document.getElementById('cfAR');
var data = {
email: form.querySelector('#cf_contact_email').value,
utm_source: form.querySelector('#utm_source').value,
extra_field: form.querySelector('input[name="recognition_display_name"]') ? form.querySelector('input[name="recognition_display_name"]').value : null,
extra_field2: form.querySelector('input[name="recognition_display_link"]') ? form.querySelector('input[name="recognition_display_link"]').value : null
};
if (data.extra_field === null) {
delete data.extra_field;
}
if (data.extra_field2 === null) {
delete data.extra_field2;
}
if (RH_MFxxxxxxxxxx) {
RH_MFxxxxxxxxxx.form.submit(data);
}
};
});
});
</script>
[^1]: replace this button ID with your ClickFunnels button ID
[^2]: replace this campaign ID with your ReferralHero campaign ID if the multi campaigns feature is enabled
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://support.referralhero.com/integrate/platform/clickfunnels.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.