Are you looking to integrate your HubSpot form into your Webflow website? Look no further!
In this tutorial, we will guide you through the step-by-step process of embedding a HubSpot form into Webflow. Let’s get started!
Step 1: Create a Form in HubSpot
The first step is to create a form in your HubSpot account. Log in to your HubSpot dashboard and navigate to the Forms section. Click on the “Create form” button to start building your form.
Once you’re in the form editor, you can customize the fields, layout, and design of your form according to your requirements. Make sure to save the form after making any changes.
Step 2: Generate Embed Code
After creating and saving your form in HubSpot, it’s time to generate the embed code. To do this, go back to the Forms section and click on the name of the form you just created.
On the right side of the screen, you will find an “Embed” button. Click on it.
A modal window will appear with options for embedding your form. Select “Inline embed code” from the available options.
Note: You can also customize additional settings like styling options and behavior before generating the embed code.
Copy the provided embed code by clicking on the “Copy code” button or using Ctrl+C (or Command+C for Mac users).
Step 3: Add Embed Code to Webflow
Now that we have our embed code ready, let’s add it to our Webflow website. Open your Webflow project and navigate to the page where you want to add your HubSpot form.
In Webflow, you can add custom code using the Embed element. Drag and drop an Embed element onto your page.
Within the Embed element, you will find a code editor. Paste the HubSpot form embed code you copied earlier into the code editor.
Note: If you want to adjust the size or position of your form, you can do so using CSS within the Embed element or by editing your Webflow project’s CSS stylesheets.
Step 4: Publish and Test
You’re almost there! Save your changes in Webflow and publish your website to see the embedded HubSpot form in action. Open your published website and navigate to the page where you added the form.
If everything is set up correctly, you should be able to see your HubSpot form displayed on your Webflow website. Test out the form by submitting some test data to ensure it is working as expected.
Conclusion
Congratulations! You have successfully embedded a HubSpot form into your Webflow website.
By following these simple steps, you can seamlessly integrate forms from HubSpot into any Webflow project. Now you can collect valuable data from your website visitors and automate your marketing efforts with ease!
Remember: If you ever need to make changes or updates to your embedded form, simply edit it in HubSpot and the changes will automatically reflect on your Webflow site.
- Step 1: Create a Form in HubSpot
- Step 2: Generate Embed Code
- Step 3: Add Embed Code to Webflow
- Step 4: Publish and Test
Now that you know how to embed a HubSpot form into Webflow, go ahead and enhance your website’s functionality by integrating powerful forms seamlessly!