Hi there!
I just wanted to share our solution on how to successfully integrate Segment into Webflow for tracking/identifying form submissions.
For reference, we tried several solutions online, including this one:
But it did not work properly for forms.
So decided to build one from scratch that can support multiple forms with any form input.
This is the result:
Hope this will help more people in the future!
Feel free to let me know if any feedback!
Has anyone tested it this?
This works for sending Track events - is there a way to send the “Track” event AND the “Identify” action
Yes, just add identify call together with the tracking call
@segmentWebflower - thanks so much for sharing this code! This works to gather form submit data 
Glad to hear it works for you!
Sorry I didn’t find time to reply your original post, didn’t find time to troubleshoot, but happy to hear it worked for you eventually!
@segmentWebflower thank you again for providing this script.
With some help, I modified the script you provided slightly so that ALL form data comes in labeled, “lead form submit”, and then I have a property on the form to differentiate each form (see code below). This makes it easier to see ALL form submits, and then I can filter accordingly (vs. having to join different forms).
I also added an Identify call, which works, but it’s auto-appending “lead form submit” as the userID.
Identify call to Salesforce, but I can’t find anywhere HOW to do that! Do you know how insert that into the below javascript? (Salesforce Destination | Segment Documentation)<script>
const formElemList = document.querySelectorAll("form");
formElemList.forEach((form) => {
form.addEventListener("submit", (e) => {
// on form submission, prevent default
e.preventDefault();
// construct a FormData object, which fires the formdata event
new FormData(form);
});
form.addEventListener("formdata", (e) => {
// Get the form data from the event object
let data = e.formData;
let obj = {};
const entries = [...data.entries()];
entries.forEach((entry) => (obj[entry[0]] = entry[1]));
obj.form_name=form.attributes[2].nodeValue
analytics.track("lead form submit", obj);
analytics.identify("lead form submit", obj);
});
});
</script>
Thanks for contributing to the script!
For your questions:
- What do you recommend to set as the UserID?
So, Segment recommends using something like a databaseID as the user ID. They do not recommend using email as this is a user property that can change (a user can change their email).
So the way I solved this, was to set up a Segment Function that was triggered using the Webflow Form Webhook to send the form data to Segment Functions, which from there could call our backend to create a userId from the user email submitted in the form.
This is why in my original script, I do not include identify because I did the identify from Segment Functions with the data being passed through the Webflow Form Webhook.
The reason for this, is because doing client-side API-calls to your backend, is both a security issue as well as often blocked client-side.
But of course, the easiest way would just to use email as the userID to save you all of the above trouble.
- How do you dynamically pass in a variable to set the UserID as what you are recommending?
Then you need to know what userID you’re looking for, and where it is in your form. So if you want to use email as the userID, or even the anonymousId as the userID, you can also pass these.
I collected the anonymousId using this code:
let user, anonymousId;
analytics.ready(function () {
user = analytics.user();
anonymousId = user.anonymousId();
});
There are so many ways to identify a user, the most important is that it is aligned with how you generally identify users in your system.
- Segment, in their docs, mention I need to set “Salesforce”: true in an integration object in order to send the
Identifycall to Salesforce, but I can’t find anywhere HOW to do that! Do you know how insert that into the below javascript? (Salesforce Destination | Segment Documentation)
You can do this:
analytics.identify({
integrations: {
All: false,
Salesforce: true,
},
});
This will only send data to Salesforce, and no other destinations.
Thank you for the detailed note, @segmentWebflower!
So am I suppose to make TWO identify calls? One to collect the lead form submit and the other to set integrations Salesforce: True?
Unfortunately, I am having trouble getting those calls to work. I am sure I am inserting it incorrectly into my javascript above. I included my code below. Any idea where it is going wrong?
<script>
const formElemList = document.querySelectorAll("form");
formElemList.forEach((form) => {
form.addEventListener("submit", (e) => {
// on form submission, prevent default
e.preventDefault();
// construct a FormData object, which fires the formdata event
new FormData(form);
});
form.addEventListener("formdata", (e) => {
// Get the form data from the event object
let data = e.formData;
let obj = {};
const entries = [...data.entries()];
entries.forEach((entry) => (obj[entry[0]] = entry[1]));
obj.form_name=form.attributes[2].nodeValue
analytics.track("lead form submit", obj);
analytics.identify("lead form submit", obj);
analytics.identify({
integrations: {
All: false,
Salesforce: true,
},
});
let user, anonymousId;
analytics.ready(function () {
user = analytics.user();
anonymousId = user.anonymousId();
});
});
});
</script>
You can try something like this:
analytics.identify('user_123', {
email: 'jane.kim@example.com',
name: 'Jane Kim'
}, {
integrations: {
'All': false,
'Salesforce': true
}
});
More details here:
Hi there, sorry to ask a silly question but does someone have a step by step on this with video?
Or where and how to complete the integration?
Many Thanks
Hello! Is there a way to use the native Webflow form to submit data via Segment but NOT get logged into Webflow’s native form backend and using up a form submission out of the quota?
This code doesn’t appear to work from the OP:
e.preventDefault();
@timjohnson2584
Here’s what I did:
<script>
const formElemList = document.querySelectorAll("form");
formElemList.forEach((form) => {
form.addEventListener("submit", (e) => {
// on form submission, prevent default
e.preventDefault();
// construct a FormData object, which fires the formdata event
new FormData(form);
});
form.addEventListener("formdata", (e) => {
// Get the form data from the event object
let data = e.formData;
let obj = {};
const entries = [...data.entries()];
entries.forEach((entry) => (obj[entry[0]] = entry[1]));
analytics.identify(obj["email"]);
analytics.track("Form Submission", {
form_name: form.attributes[2].nodeValue,
fields: obj,
});
});
});
</script>
By default a Webflow form uses its own internal form submission handler, which wires up some javascript, captures the response, sends you a notification, etc.
If you’re not needing that, you disable that by setting your own Action in the form settings. Even a # should prevent Webflow from trying to handle the form.