👋 Start Here
There are two set up options for Typeform. Please click the form type below that you would like to setup based on how you have your form 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: Send event data via Cometly Webhooks or Zapier
There are two methods for sending event data from Typeform to Cometly (Cometly Webhooks or Zapier). Click the article below for step-by-step set up for both methods.