If you use Hubspot or have been looking for a way to add CRM/marketing automation to your Webflow site, this is for you.
There’s no easy way to use Hubspot with Webflow. I’ve tried Zapier, embedded Hubspot forms etc… they all have several limitations and incur additional costs
Several startups I help use Webflow and Hubspot. They love the flexibility of Webflow’s designer They also really like Husbpot’s CRM/marketing automation - for example, Husbpot does email domain validation even on the free tier! This weeds out invalid emails submitted on forms and protects domain reputation
We needed an easy way to connect Webflow to Hubspot. So earlier this year, we created a tool (for our own use). We used Hubspot’s API to send data from Webflow forms to Hubspot in real-time
Today we’re making it accessible to the Webflow community… for free of course
Hey @elijah, just saw this while looking for a way to create a sales funnel using WF. First, it’s looking pretty cool! I hope you’ve got a minute to answer a couple of questions? I’m a WF veteran but new to Hubspot.
I need to send data submitted on one page to another page. Example - a visitor fills in their name and email on the first page and on the second page they can fill in more info, or buy something. Is this something that can be done with your integration tool?
Do you have offer tech support? Considering I’ll be building a client project, is there a way to reach out for help?
I’d like to make sure I understand what you need here. Do you need the data submitted on the first page to show on the second page or do you just need the data from the first page and the second page to be associated in Hubspot i.e. know the email & name associated with the data submitted on page two?
I want the data submitted to be used on the 2nd page. Which means the data syncs to hubspot instantly, I think. So there’s a smooth experience for the user.
@elijah I went ahead and gave it a try. Verification went ok and I can see my test submission on my WF dashboard, but not on Hubspot. Any idea how to debug this?
Edit: I’ve also tested the HS form by submitting directly on the HS form link. I could see these submissions on my HS dashboard, but not the ones submitted through WF + Vimkit.
Edit #02: I now see my submission from 15m ago… I guess it is working but not instantly? Does that mean I can’t streamline the visitor’s experience using progressive forms?
Edit #03: I realised the account was not verified (the form was though, so you might wanna look into the UX there). After fixing it something weird happened. A new form was created for me on HS, and I can’t edit it. It tagged it as a “non-hubspot-form”. Now the form does not work (it thinks some fields are not filled in so I guess there’s a mismatch, but I can’t edit it on HS )
Edit #04 (lol): It’s working! What I did: deleted all previous tests. Tried again from scratch. Worked instantly. Gonna try now to build a progressive form (that’s the ultimate goal!)
@pitz Glad it’s working now (and sorry it took a couple of attempts)! Kudos to you for persevering
Vimkit sends the form submission instantly (in milliseconds) to Hubspot. When used with Hubspot’s tracking code (https://knowledge.hubspot.com/reports/install-the-hubspot-tracking-code), form inputs from the same user/session will be associated with the same contact on Hubspot - so you can do progressive data collection.
A couple of points to be aware of for this use case:
Hubspot typically requires an email field in the form to create a contact. So the first form a user fills out needs to have an email field. In your case since page 1 has an email field, you should be fine.
When using Vimkit with Hubspot’s tracking code, you’ll need to turn off non-Hubspot form collection to prevent duplicates / the weird non-editable form on Hubspot (Use non-HubSpot forms)
Finally, while this allows you to collect data progressively, Hubspot/Vimkit doesn’t provide a way to show data collected from page 1 on page 2. So if you need to show values entered by the user on previous pages, unfortunately, that isn’t possible. I’ll have that in mind for future extensions to the tool though.
@elijah thanks for the info. As for your last comment, doesn’t it mean I can’t do progressive forms? If each form has to have an email field the email provided on page one must be present on page two. Does this mean the visitor must fill it in again and again on every page?
@pitz No, you need the email field only on page one (i.e. to create a new contact on Hubspot). Forms on subsequent pages need not have the email field (i.e. they will only add additional data to an existing contact). This allows you to do progressive data collection.
For example, the form on page one can have email and name fields. The form on page 2 can have just the mailing address. When a visitor fills out the forms on page 1 and page 2, the contact on Hubspot will have the visitor’s name, email, and mailing address.
Happy to help troubleshoot as you set up the sequence of forms.
Thanks @elijah! Tbh, I tried to create 2 forms but no dice. Not sure what’s going wrong, but I’ll try tomorrow again. Would be awesome if you could make a little video to show how it’s done (hope it’s not too much to ask ). Will keep updating on my progress!
Sure @pitz! Here are a few short videos that walk through this.
Step 1: Setup Hubspot - Progressive Form Step 1 - Setup Hubspot - YouTube
I’ve set up two forms on Hubspot. Form 1 captures the name and email. Form 2 collects the address. Note that form 2 doesn’t have an email field. Remember to publish the forms on Hubspot!
Step 2: Setup Webflow - Progressive Form Step 2 - Setup Webflow - YouTube
I’m using a Webflow site with two pages. The home page has form 1 (name & email). The contact page has form 2 (address). Field names on the Webflow forms must match field names on Hubspot.
Step 3: Connect Webflow & Hubspot using Vimkit - Progressive Form Step 3 - Connect Webflow & Hubspot using Vimkit - YouTube
Generate and install the Vimkit code snippet on the Webflow site. Then connect to Hubspot, generate the custom attribute for form 1, and add the custom attribute to form 1 on Webflow. Repeat for form 2.
Thanks for describing the issue in detail and sharing a read-only link! It looks like the form field names are empty on Webflow (see screenshot - missing field name|690x354).
All form field names on Webflow must match the field names you’re using on Hubspot. Check out this video for more on how to locate & match field names: https://youtu.be/zeFjQ8xVqos?t=20
Thanks so much for making this tool for the community! Unfortunately I haven’t had the best luck getting it to work: whenever I add the custom attribute, my forms start giving an error that some fields are required, even when I have put input inside them. When I get rid of the custom attribute off the form field, this issue goes away but it obviously isn’t connected to vim kit anymore.
@emstr Can you share a read-only link to the Webflow site so we can help troubleshoot the issue?
One potential reason for an error like this could be because the field names on your Webflow form don’t match the field names that you are using on Hubspot. See this video for more on matching field names (specifically 0:23 - 0:32): How to connect Webflow forms to Hubspot using Vimkit's free tool - YouTube
@elijah Vimkit looks like a great tool! Working on setting it up now and am looking for some guidance on how to handle “nested” form field inputs such as a dropdown, multiple checkboxes, or radios.
For example, I have a radio form field in my HubSpot form that looks like this:
You can see that there is a property name up top as well as internal value names for each input option.
On the Webflow side, when you create radio inputs there doesn’t seem to be an input group wrapper around all of the radio options that you would logically use for where you specify the name of the HubSpot property name.
They also really like Husbpot’s CRM/marketing automation - for example, Husbpot does email domain validation even on the free tier! This weeds out invalid emails submitted on forms and protects domain reputation 
I’m a WF veteran but new to Hubspot.
)
). Will keep updating on my progress!
