> For the complete documentation index, see [llms.txt](https://support.referralhero.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.referralhero.com/integrate/platform/clickfunnels.md).
# 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