Hubspot form integration with Builder.io

[mariameir]

I’m having trouble integrating the hubspot form with the builder.
I copy the HTML code that husbpot gives me to incorporate into my page and paste it into my Custom Code tab in Builder and I still can’t see the form on my page.

[garima]

Hi @mariameir,

Welcome to Builder.io Forum!

In order for me to be able to help you, could you please provide me with the Builder Content Entry link where you’re experiencing an issue this will further my investigation.

Here is how to find it:

Thanks in advance!

[mariameir]

thanks for the feedback! here: Builder.io: Visual Development Platform

[Stephane]

Hi Maria,

Sorry for the delay, I am having issues accessing your page, but here some general steps on how to integrate a HubSpot form with Builder.IO:

Integrating a HubSpot form into Builder.io can be accomplished by embedding the form using HubSpot’s embed code. You can use the custom code feature of Builder.io to add the form to your content. Here’s how you can do it step-by-step:

Step-by-Step Guide

1. Retrieve the Embed Code from HubSpot:

   • Log in to your HubSpot account.
   • Navigate to Marketing > Lead Capture > Forms.
   • Find the form you want to embed and click on it.
   • Click on the Embed option and copy the embed code provided.

2. Add the Embed Code to Builder.io:

   • Log in to your Builder.io account.
   • Navigate to the content where you want to add the HubSpot form or create a new content entry.
   • Use the Custom Code block to include the HubSpot embed code.

Detailed Steps:

Retrieve the Embed Code from HubSpot

1. Log in to HubSpot:

   • Go to the HubSpot dashboard and log in with your credentials.

2. Navigate to Forms:

   • Go to Marketing in the top navigation menu.
   • Click on Lead Capture > Forms to see a list of your forms.

3. Get the Embed Code:

   • Find the form you want to integrate and click on it.
   • Click on the Embed button.
   • Copy the embed code from the dialog that appears. It should look something like this:

     <!-- Start of HubSpot Embedded Form -->
     <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
     <script>
       hbspt.forms.create({
         region: "na1",
         portalId: "YOUR_PORTAL_ID",
         formId: "YOUR_FORM_ID"
       });
     </script>
     <!-- End of HubSpot Embedded Form -->
     

Add the Embed Code to Builder.io

1. Log in to Builder.io:

   • Go to Builder.io and log in with your credentials.

2. Edit or Create Content:

   • Navigate to the content entry where you want to add the HubSpot form.
   • You can edit an existing page/section or create a new one.

3. Add a Custom Code Block:

   • In the Builder.io Visual Editor, find the place where you want to add the form.
   • Drag and drop a Custom Code block into your content.

4. Insert the Embed Code:

   • Paste the HubSpot embed code directly into the Custom Code block.
   • It should look something like this:

     <!-- Start of HubSpot Embedded Form -->
     <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
     <script>
       hbspt.forms.create({
         region: "na1",
         portalId: "YOUR_PORTAL_ID",
         formId: "YOUR_FORM_ID"
       });
     </script>
     <!-- End of HubSpot Embedded Form -->
     

Example in Builder.io

import { Builder } from '@builder.io/react';

// Define a custom component to add the HubSpot form
const HubSpotForm = (props) => (
  <div dangerouslySetInnerHTML={{ __html: props.embedCode }} />
);

// Register the component with Builder.io
Builder.registerComponent(HubSpotForm, {
  name: 'HubSpotForm',
  inputs: [
    {
      name: 'embedCode',
      type: 'html',
      defaultValue: '',
      helperText: 'Paste the HubSpot embed code here.',
    },
  ],
});

// In your template or page
<HubSpotForm embedCode={`<!-- Start of HubSpot Embedded Form -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "YOUR_PORTAL_ID",
    formId: "YOUR_FORM_ID"
  });
</script>
<!-- End of HubSpot Embedded Form -->`} />

Verify the Form

1. Save and Publish:

   • Save the changes in Builder.io and publish the content.
   • Preview the page to ensure the HubSpot form is rendering correctly.

2. Test the Form:

   • Go to the live page and test the form to make sure it’s working as expected.

Summary

1. Retrieve the embed code from HubSpot following the steps provided.
2. Add the embed code to Builder.io using a Custom Code block.
3. Verify the form is rendering correctly and test it to ensure it’s functioning as desired.

By following this guide, you should be able to seamlessly integrate HubSpot forms into your Builder.io content, providing a smooth experience for collecting leads and other form submissions.