Integrating HubSpot in Webflow is a great way to streamline your inbound marketing efforts and enhance your website’s functionality. In this tutorial, we will walk you through the steps of integrating HubSpot into your Webflow website. Let’s get started!
First, make sure you have a HubSpot account and access to your Webflow project. Once you have these prerequisites in place, follow the steps below:
Step 1: Generate the HubSpot embed code
To integrate HubSpot, you need to generate an embed code from your HubSpot account. Here’s how:
1. Log in to your HubSpot account. 2. Navigate to the “Marketing” tab and click on “Lead Capture” or “Forms”. 3. Click on “Create form” or select an existing form if you already have one. 4. Customize the form options according to your requirements.
5. Once done, click on “Publish” or “Get Code”. 6. In the popup window, select the option that says “Embed code”. 7. Copy the generated code.
Step 2: Add the HubSpot embed code to Webflow
Now that you have the embed code from HubSpot, it’s time to add it to your Webflow project:
1. Open your Webflow project.
2. Navigate to the page where you want to add the HubSpot form.
3. Drag and drop an Embed element onto that page.
Note:
If you want to add a form directly into a specific section of a page instead of using an Embed element, make sure that section has a unique identifier (ID) assigned.
4.
In the Embed element settings, paste the copied HubSpot embed code.
Step 3: Customize the HubSpot form
Now that you have added the HubSpot embed code to your Webflow project, you can customize the form according to your preferences:
1.
To style the form elements and layout, use Webflow’s Designer tool. You can modify the form’s appearance by selecting the appropriate classes and adjusting their styles.
2.
To add custom fields or remove existing ones from the form, you need to make changes in your HubSpot account. Navigate back to your HubSpot account and edit the desired form accordingly.
Note:
Any changes made in HubSpot will automatically reflect on your Webflow project once you save those changes.
Additional Tips
- Implementing progressive profiling: With HubSpot’s progressive profiling, you can collect additional information from returning visitors without overwhelming them with a lengthy form. This feature allows you to gradually gather more data over time.
- Setting up email notifications: To receive email notifications when someone submits a form on your Webflow website, head over to your HubSpot account and configure email alerts within each specific form’s settings.
- A/B testing: Take advantage of HubSpot’s A/B testing capabilities to optimize your forms. Test different variations of headlines, colors, layouts, or even different types of forms altogether to see which ones perform better in terms of conversions.
In Conclusion
Integrating HubSpot into Webflow is a seamless process that allows you to harness the power of inbound marketing while maintaining control over your website’s design and customization. By following these steps, you can easily incorporate lead capture forms from HubSpot into your Webflow project and enhance your marketing efforts. Remember to customize the form’s appearance and functionality to align with your brand and objectives.
We hope this tutorial was helpful in guiding you through the process of integrating HubSpot in Webflow. Happy marketing!