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:

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

3 Likes

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:

Hey Elijah,

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.

Any tips?

@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): https://youtu.be/zeFjQ8xVqos?t=23

This seems very interesting! Is this possible with the Hubspot free version?
Thank you in advance!

@Charlotte_Rottiers Yes, it works with both paid and free tiers of Hubspot :slight_smile:

@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.

You get either the Radio Button settings

Or the Radio Button Field settings

Would you put the HubSpot property name in either/both of these places, or do you use the HubSpot Internal Value here?

Any help would be greatly appreciated!