In this tutorial, we will learn how to connect a HubSpot form to a Webflow website. HubSpot forms are a powerful tool for capturing leads and gathering information from your website visitors. By integrating HubSpot forms with Webflow, you can easily collect and manage data without the need for any complex coding.
Step 1: Create a HubSpot Form
To begin, log in to your HubSpot account and navigate to the Forms section. Click on the “Create form” button to start building your form. You can choose from various templates or create a custom form from scratch.
Step 2: Customize Your Form
After selecting a template or creating a new form, you can customize it according to your requirements. Add fields such as name, email address, phone number, etc., by dragging and dropping them onto the form builder interface. You can also customize the design of your form by changing colors, fonts, and adding your logo.
Step 3: Publish Your Form
Once you have finished customizing your form, click on the “Publish” button to make it live. HubSpot provides you with different options for embedding your form on your website. In this tutorial, we will focus on integrating the form with Webflow.
Step 4: Copy the Form Embed Code
In order to connect your HubSpot form to Webflow, you need to copy the embed code provided by HubSpot. To do this, go back to the Forms section in HubSpot and click on the name of the form you want to integrate. Then, click on the “Embed” tab and copy the provided code snippet.
Step 5: Open Webflow
Now, log in to your Webflow account and open the project where you want to connect the HubSpot form. Navigate to the page where you want to add the form or create a new page if needed.
Step 6: Add an Embed Element
In Webflow, you can add an embed element by dragging and dropping it onto your page. The embed element allows you to insert custom code on your website.
Step 7: Paste the Form Embed Code
Double-click on the newly added embed element to open its settings panel. Within the settings panel, select the “Custom Code” option and paste the HubSpot form embed code that you copied earlier into the provided text area.
Step 8: Adjust Settings and Publish
You can further customize the appearance and behavior of your form by modifying its settings within Webflow. Once you are satisfied with how everything looks, click on the “Publish” button to make your changes live on your Webflow website.
Step 9: Test Your Form
To ensure that everything is working correctly, visit your live Webflow website and test your HubSpot form. Fill out the form fields with some test data and submit it. Check if the data is successfully captured in HubSpot’s database.
Congratulations! You have successfully connected a HubSpot form to a Webflow website. Now, you can start collecting valuable leads and managing them efficiently using HubSpot’s powerful marketing tools.