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!