How Do I Add a HubSpot Form to Webflow?

Adding a HubSpot Form to Webflow

If you’re looking to integrate HubSpot forms into your Webflow website, you’ve come to the right place! In this tutorial, we’ll guide you through the process step by step. So let’s get started!

Step 1: Create a Form in HubSpot
The first thing you need to do is create a form in your HubSpot account. Make sure to include all the necessary fields and customize it according to your requirements.

Step 2: Generate the Embed Code
Once you have created your form, navigate to the “Publish” tab within HubSpot’s Form Editor. Here, you’ll find the embed code that you need to add to your Webflow site. Copy this code and proceed to the next step.

Step 3: Open Your Webflow Project
Open your project in Webflow’s Designer tool. Choose the page where you want to add the form or create a new one if needed.

Step 4: Add an Embed Element
In Webflow’s Designer, drag and drop an “Embed” element onto your desired page. This element allows us to embed external content like our HubSpot form.

Note: You can find the “Embed” element in the “Elements Panel” on the left side of the Designer interface.

Step 5: Paste the Embed Code
With the “Embed” element selected, click on its settings icon (gear icon) in the top-right corner of the Designer interface. A modal will appear where you can paste your HubSpot embed code into the “Embed Code” field.

Note: You may also adjust other settings like width and height if necessary.

Congratulations!

You have successfully added a HubSpot form to your Webflow website!

Wasn’t that easy? By following these simple steps, you can seamlessly integrate HubSpot forms into your Webflow site and start capturing valuable leads. Remember to customize the form’s design using Webflow’s powerful styling options to ensure it matches your website’s overall look and feel.

  • Make sure to test your form after adding it to make sure it functions as expected.
  • If you need to make any changes to the form, simply update it in HubSpot, and the changes will automatically reflect on your Webflow site.

Now that you’ve learned how to add a HubSpot form to Webflow, you can leverage the power of both platforms to boost your lead generation efforts. Happy designing!