Skip to main content
All CollectionsIntegrationsZoho Forms
Zoho Forms Integration Setup
Zoho Forms Integration Setup

Learn how to setup the Zoho Forms integration.

Updated over a week ago

Start Here ๐Ÿ‘‹

The Zoho Forms integration will help you automatically send form entries from your Zoho Forms directly to Cometly as an event. Please follow the steps below step-by-step and ensure you have watched each setup video to ensure the integration was properly setup.

Important: The Cometly Pixel Helper will not work on your embedded Zoho form. At end of setup article, we will show you how to test your server event to ensure Cometly received data.

Step 1: Add Cometly base code pixel before </head> tag

Install the Cometly base pixel before the </head> tag on every page of your funnel or website.

Step 2: Add custom code before </body> tag on the page where Zoho form is embedded

On the web page where your Zoho form is embedded, please add the following code before the </body> tag. This code will ensure the hidden fields on your form in the following steps will be automatically passed into Zoho.

<script>
function waitForCometlyAndExecute(callback, maxAttempts = 10, interval = 500, delay = 2000) {
setTimeout(() => {
let attempts = 0;

const checkAndExecute = () => {
if (typeof cometFingerprint === "function" && typeof cometToken === "function") {
callback();
} else if (attempts < maxAttempts) {
attempts++;
setTimeout(checkAndExecute, interval);
} else {
console.error("Cometly functions not available after multiple attempts.");
}
};

checkAndExecute();
}, delay);
}

waitForCometlyAndExecute(() => {
cometFingerprint().then(function(fingerprint) {
var cometTokenValue = cometToken();

var iframe = document.querySelector("iframe[src*='zohopublic.com']");
if (iframe) {
var originalSrc = iframe.getAttribute('src');
var delimiter = originalSrc.includes('?') ? '&' : '?';
var newSrc = `${originalSrc}${delimiter}fingerprint=${encodeURIComponent(fingerprint)}&comet_token=${encodeURIComponent(cometTokenValue)}`;

iframe.setAttribute('src', newSrc);
} else {
console.error("Iframe not found.");
}
}).catch(function(error) {
console.error("Error obtaining Cometly fingerprint:", error);
});
});
</script>

Step 3: Add hidden form fields to your Zoho form

For Cometly to accurately track the Zoho form submission back to the correct source, create two hidden fields on your form.

Add two Multi Line fields to your Zoho form:

Hover over the first Multi Line field and click Properties

Edit the first Multi Line field label and rename it: fingerprint

  • Select Hide Field Label

  • Select Hide Field under Visibility section

  • Click Save

Edit the second Multi Line field label and rename it: comet_token

  • Select Hide Field Label

  • Select Hide Field under Visibility section

  • Click Save

Step 4: Setup Zoho Form to automatically prefill hidden field values

The script in Step 2 appends the fingerprint and comet_token to the iframe URL. Configure your Zoho Form settings so Zoho will automatically prefill the hidden fields on your form with the values for the fingerprint and comet_token.

  • Edit your form and click Settings

  • Under General on the left panel, click Field Alias - Prefill URL

  • Click Configure Now

Configure form to prefill the fingerprint and comet_token automatically

  • For the Field Label selection, choose fingerprint and in the Field Alias box type fingerprint.

  • Click the + sign.

  • On the second Field Label selection, choose comet_token and in the Field Alias box type comet_token.

  • Click Save

Step 5: Test your form to ensure fingerprint and comet_token included on your entries

Watch the video below to learn how to test your form to ensure the fingerprint and comet_token are included on your entries. You need to ensure your form has both prior to continuing to the next setup step.

Step 6: Configure sending of server event from Zoho Form to Cometly

In this step you are going to retrieve the Zoho webhook from within your Cometly account and add to your form settings in Zoho to send the form opt-in information directly to Cometly as an event of your choice.

Click Space Settings and navigate to the Integrations page in Space Settings and choose Zoho Forms as your integration:

Click Activate Zoho Forms

Copy the webhook URL

Login to your Zoho forms account, find the form you want to track, and select settings for that form:

Click Integrations and then click Webhooks

See the example setup and configure the webhook with the following steps:

  • Webhook Status: set to Enable

  • Webhook URL: paste the Cometly Zoho Forms webhook into this field

  • Content Type: select application/json

  • Authorization Type: set to General

Payload Parameters

On the left column, ensure you enter the forms exactly as they appear in the table below. Text is case sensitive, ensure it is exactly as it appears for your webhook:

ip

IP Address

email

Email

first_name

Name - First Name

last_name

Name - Last Name

phone

Phone

fingerprint

fingerprint

comet_token

comet_token

URL Parameters

Enter the following in the URL Parameters section:

  • event_name

event_name

lead_generated

Enter event_name on the left and the event you would like to send on the right

You can choose from the event list below and select what event you would like to send to Cometly. Only choose one event:

  • lead_generated

  • view_content

  • schedule

  • purchase

  • subscribe

  • add_to_cart

  • contact

  • initiate_checkout

  • add_payment_info

  • complete_registration

  • start_trial

  • sign_up

  • submit_application

  • webinar_registration

Scroll down to the bottom and click Save

Step 7: Test the integration and view the data in the Events Log

Click the Test Server Events resource below to learn how to test your Zoho form to ensure you are receiving the server event in the Events Log inside your Cometly space.

You have successfully setup your Zoho forms to send events to Cometly to accurately report the source of the form submission.

Did this answer your question?