Has anyone got the Hubspot app working inside of Webflow by linking an existing form? I’ve built my form, launched the Hubspot app, “Map Webflow form to Hubspot” and have successfully linked them. It even shows up under “Connected forms” but every time I submit a form entry, it just goes straight into Webflow and nothing in Hubspot.
I’ve mapped all the input names to that inside Hubspot and even double checked by “Add existing Hubspot form into site” which writes all the HTML for you and can see the name attribute matches. I don’t want to do this however as this limits what I can design in Webflow.
A Point
I noticed that when I link the forms the app states “Only select the matching HubSpot form field for each corresponding Webflow field below” but there is nothing below…
Hi Samuel, I actually mapped my Webflow form to HubSpot’s default form that is structured differently. As a result, a new form was automatically created in HubSpot on the first Webflow form submission. I converted it to a HubSpot form & renamed. Then back in Webflow, linked the Webflow form to the new HubSpot form. Subsequent form submissions worked fine.
Probably not the intended approach, but it worked!
Thanks for getting back to me! We don’t have the default form in Hubspot anymore. The forms I have created in HS appear in the dropdown when mapping my existing form. You can see from my image that there is successful linking. Very odd.
It sounds to me like even though you linked an existing form, the fact the values were different forced to create a new form in HS. For me instead of the default, I’ve already created a form so would expect the same to happen. Unless I’m misunderstanding something from you?
I believe this is something to do with the app itself. I’ve linked everything correctly and it’s even added hidden fields but the JavaScript from the app is failing at the fetch request.
I’ve contacted the makers of the app to see if I can get it looked into.
@flowst8 - I can’t debug a non-existent published link so no way to provide additional assistance. I normally recommend the use of Make to handle HubSpot integration since it is much lighter (non-existant) on the client payload which HS is not. Plus it integrates well with Pinegrow .
I was hoping to use the shiny new app ecosystem but working without it might be the solution. I have time to do that.
I’ve been debugging and it seems the plugin is not binding the right url to the form. If I create a form with the App (“Add existing Hubspot form to page”), the action is different from the id it gives a “mapped” form. Whether this is the issue I’m not 100% sure but seems odd to use a different actions.
Can you file a Webflow Customer Support ticket with your site details? They will redirect it to the appropriate team and investigate what’s happening here. Thanks!
This is not the answer but I’ve literally had to brute force it.
I added the form via Hubspot app, took the action from that and applied it to my own form. Not ideal because I miss out on a bunch of Webflow form functionality but at least it’s working.
After further tests, I’ve realised my previous setup described wasn’t working. Instead I’ve left it as a Webflow form that is still captured by HubSpot. Steps for my setup are:
Connect the Webflow site to HubSpot account via Webflow Apps
Skip the mapping of the Webflow form to HubSpot form
Submit a Webflow form via the website, which submission is captured in HubSpot
Rename the captured form in HubSpot
I’m still only new to HubSpot so not sure what features I’m missing out on by not mapping a Webflow form to a HubSpot form.
There must be something else you’ve got into the mix for Hubspot to be triggered on form submission. Any idea what that is?
In the same approach, here was my solution.
Create form in Hubspot
Create form in Webflow (and make sure field names match)
Using Hubspot App > “Add existing Hubspot form to page”
Steal the created form’s Action
Add action to Webflow form and add “data-wf-hs-form” custom attribute
Delete created form
The Hubspot App’s JavaScript runs on every page and looks for either data-wf-hs-form or data-webflow-hubspot-api-form-url and overrides the submit event on any form that has these attributes.
Quite frankly this feature of the App is broken and they need to fix it. Hesitant to mark these as solutions because the solution is on the App makers.
Actually on second thought, what’s happening is that by adding the Hubspot App, the hubspot tracker now exists on your website which automatically picks up form on your website (freaky feature!!) so yeah, I understand why yours is working now. You could bypass this by adding the tracker to your website through Google Tag Manager or directly through a script tag. You don’t need the Webflow app. That’s just adding bloat (something I want to cover in a video next week).
Something to bear in mind - You’re submitting to Webflow AND Hubspot. Whether GDPR is a concern for you I don’t know but you might not want it to be submitted to both locations.
The HubSpot data attribute was still on the form and the tracking script was installed for the HubSpot Chat. I’m just testing different setups at the moment and impressed with HubSpot CRM so thought I’d check out their Webflow App.
.