In this tutorial, we will explore how to embed a HubSpot form in Webflow. If you are using Webflow to build your website and want to collect leads or gather information from your visitors, integrating a HubSpot form can be an excellent solution.
With HubSpot’s powerful marketing automation capabilities and Webflow’s easy-to-use website builder, you can create a seamless experience for your users. Let’s dive in!
Step 1: Create a HubSpot Form
To begin, you need to have a form set up in your HubSpot account. If you don’t have one yet, log in to your HubSpot account and navigate to the Forms section. Create a new form or choose an existing one that you would like to embed on your Webflow site.
Step 2: Copy the Embed Code
Once you have your form ready, click on the “Embed” button or option provided by HubSpot. This will generate the necessary code that you will need to copy and paste into your Webflow project.
Note: It is essential to have access to modify the HTML code of your Webflow project for this integration.
Step 3: Open Your Webflow Project
Log in to your Webflow account and open the project where you want to embed the HubSpot form. Navigate to the page where you want the form to appear.
Step 4: Add an HTML Embed Element
In Webflow, drag and drop an HTML Embed element onto the desired location on your page. This element allows you to insert custom HTML code directly into your project.
Step 5: Paste the Embed Code
Double-click on the HTML Embed element and paste the copied HubSpot embed code into it. Save or apply changes if prompted.
Note:
Make sure that there are no conflicting scripts or styles on your page that could interfere with the form’s functionality. Test the form to ensure it is working correctly.
Step 6: Style Your Form (Optional)
If you want to customize the appearance of your HubSpot form to match your website’s design, you can use CSS styles. Add a