How Do I Add HubSpot Forms to Webflow?

Adding HubSpot forms to your Webflow website can help you capture valuable leads and gather important information from your visitors. With the seamless integration between HubSpot and Webflow, you can easily embed forms directly into your site. In this tutorial, we will guide you through the step-by-step process of adding HubSpot forms to your Webflow website.

Step 1: Create a Form in HubSpot

Before you can add a form to your Webflow site, you need to create it in HubSpot. Login to your HubSpot account and navigate to the Forms dashboard. Click on the “Create form” button to get started.

Step 1.1: Choose a Template

Select a template that suits your needs from the available options. You can also start from scratch by choosing the “Blank template”.2: Add Form Fields

Customize your form by adding fields such as name, email address, phone number, etc. Use the drag-and-drop interface provided by HubSpot to rearrange and organize these fields as desired.3: Configure Form Options

HubSpot allows you to configure various options for your form, such as defining a thank-you message or redirecting users to a specific page after submission. Customize these settings according to your requirements.4: Publish Your Form

Once you are satisfied with the design and settings of your form, click on the “Publish” button to make it live.

Step 2: Get Embed Code

To add the HubSpot form to your Webflow website, you need to obtain the embed code for the form. Return to the Forms dashboard in HubSpot and locate the form you just created. Click on the “Embed” button next to it.

Step 2.1: Copy the Embed Code

A pop-up will appear with the embed code for your form. Copy the entire code provided.

Step 3: Add Form to Webflow

Now that you have the embed code, you can proceed to add the HubSpot form to your Webflow site.

Step 3.1: Open Webflow Designer

Login to your Webflow account and open your project in Webflow Designer.2: Select a Page

Select the page where you want to add the HubSpot form from the Pages panel on the left-hand side of the screen.3: Add an Embed Element

In Webflow Designer, drag and drop an “Embed” element onto your selected page where you want to place the form.4: Paste Embed Code

Paste the embed code you copied from HubSpot into the Embed element in Webflow Designer.

Step 4: Style Your Form (Optional)

If desired, you can style your HubSpot form to match your website’s design and branding.

Step 4.1: Customize Form Styles

In Webflow Designer, select the Embed element containing your form and apply custom CSS styles using either inline styles or by creating a new class within Webflow’s style panel.

Step 5: Preview and Publish

You’re almost there! Preview your Webflow site to see how the HubSpot form looks and functions. Once you’re satisfied, publish your site to make it live.

Congratulations! You have successfully added a HubSpot form to your Webflow website. Now, sit back and watch as the leads start rolling in!