👋 Start Here
This article will cover the step-by-step instructions for setting up tracking of Typeform responses back to the correct source.
There are two set up options for Typeform. Please click the form type below that you would like to setup:
Non-embedded Typeform forms (where your site visitors click a button that takes them to a Typeform URL)
(EMBEDDED) Setting Up Embedded Typeform forms
To track Typeform forms that are embedded on your web page, your typeform must redirect to a web page with the Cometly pixel installed in the <head> and dynamically pass customer information parameters.
The Cometly pixel will automatically capture the customer information that is dynamically passed to your URL. On your redirect URL, you should include any of the following customer information fields available below:
email
first_name
last_name
phone
(NON-EMBEDDED) Setting Up Non-Embedded Typeform forms
Step 1: Create hidden field for your Typeform
Click Logic
Add fp as the hidden field option
Click Save to save your changes
Step 2: Configure your button & how to find the element ID for your button on your webpage
IMPORTANT: Ensure that your button URL is empty as the code in the following steps will. The button should not be linked.
Watch the video below to find your button element ID
(Webflow Example) If your button does not have an element ID, you need to assign an ID to the button. Please see the video below using Webflow as an example for adding an element ID:
Step 3: Add the Cometly Typeform event listener code below to your webpage
Add the code below before the </body> on the web page where your button is that will take your visitor to your Typeform URL.
Ensure the button is not linked to any URL as the Cometly Typeform event listener code below will automatically take the visitor to your Typeform URL.
Changes you need to make to the code below:
Change the live-demo-button in the code below to your button element ID from the previous steps.
Change the Typeform URL https://5qpqychou5s.typeform.com/to/D9uuqaS0 in the code below to your Typeform URL.
Ensure that you do not have #fp=XXXX on your URL, you will see that on your Typeform URL in Typeform platform because you have added a hidden field.
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('live-demo-button').addEventListener('click', async function() {
try {
let fingerprint = await cometFingerprint();
let typeformBaseURL = 'https://5qpqychou5s.typeform.com/to/D9uuqaS0';
let typeformURL = typeformBaseURL + '#fp=' + encodeURIComponent(fingerprint);
window.location.href = typeformURL;
} catch (error) {
console.error("An error occurred:", error);
}
});
});
</script>
Step 4: Publish your changes after the code has been added and test your webpage
In the example in the video below, the URL after clicking the button is this:
https://5qpqychou5s.typeform.com/to/D9uuqaS0?typeform-source=www.cometly.com#fp=7d52b3cd4dc9fe8af1e7c474e345d384
Your URL should have a series of numbers and letters after fp= as that is the fingerprint that will be recording in the Typeform response upon completion that you will be able to retreive in Zapier on Step 5.
Step 5: Use Webhooks or Zapier to send form responses as events to Cometly
Webhooks
Navigate to Connect on your Typeform
Click Webhooks
Click Add a Webhook
Choose your Cometly event you want to send upon successful Typeform submission and generate a new Cometly webhook following the steps in the Webhooks article.
Paste the Webhook inside Typeform and click Save.
Zapier
Create your Zap in Zapier.
Use Typeform as your Trigger.
Submit a new test response through your Typeform.
Configure Cometly as your action.
Choose your event you want to send to Cometly.
You must include the following fields: Event, Event Time, Email, Fingerprint
Event: select the event you want to send to Cometly (required)
Event Time: write in 'now' (required)
Email: choose the email from Typeform trigger (required)
Fingerprint: choose the hidden_fp field from your Typeform trigger (required)
Other recommended fields:
Full Name: choose the full name from Typeform trigger
OR - First Name: choose the first name from your Typeform trigger
OR - Last Name: choose the first name from your Typeform trigger
Watch Video For Setting Up Zap in Zapier:
The video below will show you how to setup Typeform as your trigger and Cometly as your action so you can send Typeform responses to Cometly as events.