How Do I Add HubSpot to Webflow?

by

Adding HubSpot to Webflow is a straightforward process that can greatly enhance your website’s functionality and lead generation capabilities. In this tutorial, we will walk you through the steps to seamlessly integrate HubSpot into your Webflow site.

Step 1: Create a HubSpot Account

If you don’t have a HubSpot account yet, head over to their website and sign up for a free account. Once you’ve completed the registration process, log in to your HubSpot account.

Step 2: Generate the HubSpot Embed Code

To add HubSpot to your Webflow site, you need to generate an embed code from your HubSpot account. Follow these steps:

  1. Go to your HubSpot Dashboard and click on “Settings” in the main navigation menu.

  2. In the left sidebar, navigate to “Marketing” > “Lead Capture” > “Forms”.

  3. Select the form you want to embed on your Webflow site or create a new one.

  4. Click on the “Publish” tab within the form editor.

  5. Scroll down and copy the embed code provided under the “Embed Code” section.

Note:

Make sure you have customized your form settings as per your requirements before copying the embed code. You can choose fields, set up notifications, and personalize various other aspects of your form within HubSpot’s form editor.

Step 3: Add HubSpot Embed Code in Webflow

Now that you have generated the embed code from HubSpot, it’s time to add it to your Webflow site. Follow these steps:

  1. Open your Webflow project in the Webflow Designer.

  2. Navigate to the page where you want to add the HubSpot form.

  3. Drag and drop an HTML Embed element onto your page from the Add Panel.

  4. Paste the HubSpot embed code that you copied earlier into the HTML Embed element.

It’s important to note that the embed code provided by HubSpot usually contains a script tag. In Webflow, you don’t need to include the script tag separately, as the HTML Embed element automatically includes it for you.

Step 4: Customize and Style Your HubSpot Form

Once you have added the HubSpot form to your Webflow site, you can customize its appearance and style it according to your website’s design. Use CSS classes or inline styles to modify elements like input fields, buttons, and form layout. This allows you to create a cohesive look and feel across your entire website.

Note:

If you are using a CMS template in Webflow and want to display different forms dynamically based on page or collection item, make sure to follow Webflow’s instructions for implementing dynamic embed codes.

Congratulations! You have successfully added HubSpot to your Webflow site. Visitors can now fill out forms directly on your website, and their information will be captured in your HubSpot account for further lead nurturing and marketing automation.

Remember to regularly check your HubSpot account for new leads and take advantage of all the powerful marketing tools it offers!