In this article, we will explore the process of integrating Webflow with HubSpot CRM. By doing so, whenever a new user responds to your Webflow form, their information will automatically be used to generate contacts in HubSpot
To achieve this, we will employ Pabbly Connect for a one-time setup process.
First, we will connect Webflow to Pabbly Connect to collect respondent information, and subsequently, link Pabbly Connect to HubSpot to create contacts in HubSpot using the collected respondent details.
Steps to Create HubSpot Contacts from New Webflow Form Responses
1. Sign In / Sign Up to Pabbly Connect and Create a Workflow
2. Establish a Connection between Webflow and Pabbly Connect
3. Setup HubSpot as the Action App to Create Contacts
Step 1:- Sign In / Sign Up to Pabbly Connect and Create a Workflow
A. Sign In / Sign Up
To begin this process, visit Pabbly Connect and create your account by clicking on the ‘Sign Up Free’ button. You can also click on Sign In if you already have an account.
![](https://pabblytuts.com/wp-content/uploads/2022/10/imageedit_2_6011743577.png)
Click on the Pabbly Connect ‘Access Now’ button
![](https://pabblytuts.com/wp-content/uploads/2022/10/imageedit_4_9618164568-1024x512.png)
B. Create Workflow
To create a new workflow, click the ‘Create Workflow’ button.
![](https://pabblytuts.com/wp-content/uploads/2022/10/imageedit_1_7918839683-1024x397.png)
Name your workflow, and click on ‘Create’.
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_3_9249882282.png)
Step 2:- Establish a Connection between Webflow and Pabbly Connect
Our focus now shifts to the process of setting up a link between Webflow and Pabbly Connect, which will allow us to collect responses from Webflow Forms.
A. Trigger App
Trigger allows us to choose the application that will retrieve the data for Pabbly Connect. In this instance it would be Webflow.
Choose ‘Webflow’ as the Trigger App, and select ‘New Form Submission’ as an Action Event.
![](https://pabblytuts.com/wp-content/uploads/2022/12/imageedit_21_2103007360-1024x314.png)
B. Webhook URL
A new Webhook URL will get generated. You will use this Webhook URL to create a connection with your Webflow account. Copy the Webhook URL.
![](https://pabblytuts.com/wp-content/uploads/2022/10/imageedit_2_7712306557-1024x115.png)
Once you’ve copied the Webhook URL, Pabbly Connect will immediately begin searching for data from Webflow, which is indicated by the rotating Waiting For Webhook Response button.
![](https://pabblytuts.com/wp-content/uploads/2022/10/imageedit_2_7136417938-1024x216.png)
C. Connect Webflow Account
To establish a connection with your Webflow account, log in and navigate to the Webhooks section. From there, click on the Add Webhook button.
![](https://pabblytuts.com/wp-content/uploads/2022/12/imageedit_23_6633386121-1024x277.png)
Choose “Form submission” as your Trigger Type, then paste the Webhook URL you copied earlier into the appropriate field. Finally, click on the ‘Add Webhook’ button.
![](https://pabblytuts.com/wp-content/uploads/2022/12/imageedit_25_8059572560.png)
D. Test Connection
Submit a form with dummy information and confirm that a response has been received.
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_15_7586687643.png)
Switch back to Pabbly Connect, then expand the Response Received section to check if the respondent details you entered is visible, which confirms the successful establishment of your connection.
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_16_2890317783-1024x666.png)
Step 3:- Setup HubSpot as the Action App to Create Contacts
Action allows us to choose the application that will get executed by the workflow trigger.
Our ultimate goal is to utilize the information collected from Webflow respondents to generate contacts in HubSpot, making HubSpot our designated Action App.
A. Action App
Choose ‘HubSpot CRM’ as the Action App, select ‘Create a Contact’ as an Action Event, and click on ‘Connect’.
![](https://pabblytuts.com/wp-content/uploads/2022/12/image-23-1024x393.png)
B. Connect HubSpot Account
To connect with your HubSpot account, select ‘Add New Connection’ and click on ‘Connect With HubSpot CRM’. Additionally, grant authorization to enable the connection.
![](https://pabblytuts.com/wp-content/uploads/2022/12/imageedit_56_9945965567.png)
C. Enter / Map the Necessary Fields
Once you’ve successfully linked your HubSpot account, the next step is to map the respondent details from the previous step. By mapping, we ensure that our data remains dynamic and adapts to the responses we receive.
Map the Email Address from the step above.
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_18_4215742038-1024x318.png)
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_20_5100991317-1024x406.png)
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_22_4928945771-1024x156.png)
Likewise, map the remaining details, leaving any irrelevant ones blank, and then click on ‘Save & Send Test Request’.
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_24_8693420099-1024x304.png)
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_26_3188824198-1024x301.png)
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_28_6254957587-1024x140.png)
When you click on Save & Send Test Request, the respondent’s information will be added to your HubSpot contact list.
![](https://pabblytuts.com/wp-content/uploads/2023/03/imageedit_30_2767418896-1024x390.png)
Our automation is now complete, and we have successfully integrated Webflow with HubSpot. From now on, whenever a user submits a response to your Webflow form, their information will automatically be utilized to generate contacts in HubSpot CRM.
You can copy this entire workflow by clicking this link.
Sign Up for a free Pabbly Connect account, and start automating your business
Subscribe to our Youtube Channel for more such automation
For any other queries, visit our forum