Including a HubSpot form in an external website is a highly effective method for acquiring leads and obtaining important data from visitors on your site. In this guide, I will walk you through the process of embedding a HubSpot form on your external site, while also sharing my own insights and comments along the way.
Step 1: Create a HubSpot Form
The first step is to create a form in your HubSpot account. HubSpot offers a user-friendly form builder that allows you to customize the fields and design of your form. You can add fields such as name, email address, phone number, and more, depending on the information you want to collect from your visitors.
Once you have created your form, make sure to save it and take note of the form ID, as we will need it later to embed the form in the external site.
Step 2: Generate the HubSpot Form Embed Code
After creating the form, HubSpot provides you with an embed code that you can insert into your external website to display the form. To generate the embed code, navigate to your HubSpot Forms dashboard and select the form you want to embed.
Inside the form editor, click on the “Publish” tab and then select the “Embed” option. HubSpot will generate the necessary HTML code for embedding the form.
Copy the generated code to your clipboard, as we will be pasting it into your external site in the next step.
Step 3: Insert the HubSpot Form Code into Your External Site
Now it’s time to integrate the HubSpot form into your external website. Depending on the platform you are using, the process may vary slightly. However, the general idea remains the same.
If you are using a content management system (CMS) like WordPress, you can paste the HubSpot form embed code into an HTML widget or customize the page template to include the code.
For custom websites, open your HTML editor and locate the section of the page where you want to display the form. Paste the HubSpot form embed code into that section. Make sure to save the changes and publish the page to see the form live on your external site.
Step 4: Customize the Styling of the Embedded Form
If you want your HubSpot form to match the design and branding of your external site, you can customize its styling. HubSpot provides CSS customization options that allow you to change the appearance of the form.
To access the CSS customization options, go to your HubSpot Forms dashboard, select the form, and click on the “Options” tab. From there, you can modify the form’s colors, fonts, alignment, and more. Take your time to adjust the settings until the form looks seamless with your external site’s design.
Conclusion
Embedding a HubSpot form in an external website is a fantastic way to collect valuable lead information and streamline your lead generation process. By following the steps outlined in this article, you can easily integrate a HubSpot form into your external site, ensuring a seamless user experience for your visitors. Remember to customize the form’s design to match your site’s branding for a cohesive and professional look.