Streaming live at 10am (PST)

A better / free way to connect Webflow & Hubspot

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 :frowning_face:

Several startups I help use Webflow and Hubspot. They love the flexibility of Webflow’s designer :100: 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 :ok_hand:

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 :muscle:

Today we’re making it accessible to the Webflow community… for free of course :boom:

Check it out here: https://vimkit.com/tools/hubspot-webflow-form-tool

How-to guide: https://vimkit.com/help/guides/hubspot-webflow-form-tool/

Let us know if you find it useful or have questions :wave:

4 Likes

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? :slight_smile: I’m a WF veteran but new to Hubspot.

  1. 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?
  2. Do you have offer tech support? Considering I’ll be building a client project, is there a way to reach out for help?

Cheers! And thanks again for the initiative!

Thanks @pitz! Quick responses to your questions:

  1. 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?

  2. Yes, we offer support via email. Just email support@vimkit.com or check vimkit.com/help for FAQs

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.

Happy to hear you guys offer support!

@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 :confused:)

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 :+1:

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:

  1. 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.
  2. 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 (https://knowledge.hubspot.com/forms/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.

Feel free to reach out if I can be of help.

@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 :grimacing:). Will keep updating on my progress!

Cheers

Sure @pitz! Here are a few short videos that walk through this.

Step 1: Setup Hubspot - https://www.youtube.com/watch?v=ZZFIX2QCOTQ
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 - https://www.youtube.com/watch?v=hx4XtBhB24I
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 - https://www.youtube.com/watch?v=twIVz2CKVuE
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.

Step 4: Add Hubspot tracking code - https://www.youtube.com/watch?v=uECQ0OrKBT4
Turn off non-Hubspot form submissions on Hubspot settings, copy the tracking code, and add it to the Webflow site. Publish the site.

Step 5: Test it - https://www.youtube.com/watch?v=osIwuTBwdZ0
Open the webpage, fill out form 1 and form 2. On Hubspot, you’ll see the data from both forms associated with the same contact.

Hope this helps :smiley:

This is great work!

Very nice to share this with the webflow community!

Thanks @Yatsuba! Glad you like it :smiley:

Hi Elijah,

First of all I must say that this is a great tool. So thanks! However, I am having an issue when passing the submisisons to Hubspot. This is the url: https://coya.webflow.io/form-testing-page-coya
This is the read only link: https://preview.webflow.com/preview/coya?utm_medium=preview_link&utm_source=designer&utm_content=coya&preview=e55c0fa091fd7485b591add167d67c5e&pageId=5e73a9f6f9b6d17929f46acf&mode=preview

But the submissions come in with no contact record whatsoever. Do you know why this can be?

Hi @javirevi,

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

Let me know if that doesn’t resolve the issue.

Silly me! Thanks, it works now :slight_smile: