You can embed HubSpot Forms directly into your Vev project to capture information from website visitors and convert them into leads. This integration uses the built-in HubSpot form component or the Embed Anything component, depending on your use case.

Before you can embed a HubSpot form in Vev, you need to retrieve two key values from HubSpot: the Portal ID and Form ID.

Open your form in HubSpot and click Edit.

Click the Embed button in the top-right corner.

In the popup, select the Embed code tab.

Copy the following values from the code snippet:

- <code>portalId</code>
- <code>formId</code>

1. Open your form in HubSpot and click Edit.
2. Click the Embed button in the top-right corner.
3. In the popup, select the Embed code tab.
4. Copy the following values from the code snippet:
 - <code>portalId</code>
 - <code>formId</code>

Once you have your IDs, follow these steps in Vev:

Double-click the HubSpot form component on the Vev canvas.

Go to the Properties panel on the right.

Paste the Portal ID and Form ID into their respective fields.

1. Double-click the HubSpot form component on the Vev canvas.
2. Go to the Properties panel on the right.
3. Paste the Portal ID and Form ID into their respective fields.

HubSpot forms cannot be styled directly in Vev.

To change the appearance of your form, use HubSpot’s own design tools.

Visit the <a href="https://knowledge.hubspot.com/forms" rel="nofollow noopener noreferrer" target="_blank">HubSpot Knowledge Base</a> for more details on customizing forms.

- To change the appearance of your form, use HubSpot’s own design tools.
- Visit the <a href="https://knowledge.hubspot.com/forms" rel="nofollow noopener noreferrer" target="_blank">HubSpot Knowledge Base</a> for more details on customizing forms.

You can configure your form to redirect users after submission.

In HubSpot, open your form and click Options.

- Use a full URL, or
- Link to a subpage in your current Vev project (e.g., <code>/thank-you</code>)

1. In HubSpot, open your form and click Options.
2. Choose Redirect to another page.
3. Set the redirect URL:
 - Use a full URL, or
 - Link to a subpage in your current Vev project (e.g., <code>/thank-you</code>)
4. Click Add to save the settings.

After submitting the form, users will be redirected to the specified "Thank You" page.

Duplicate Form Error - Do not embed the same form more than once on the same page. HubSpot restricts multiple instances of the same form on a single page.

Form not loading when integrating your content outside of Vev - If you're using the <a href="https://help.vev.design/en/articles/6141975-embed-your-project">Embed Anywhere</a> component and your HubSpot form isn’t loading, try the following:

1. Click the Publish button in your Vev project.
2. In the Publish modal, click Get Embed Code.
3. Go to Advanced Options.
4. Disable the option labeled "Encapsulate Embed on Destination Page."

Learn more about encapsulation and its impact on embedded forms here.

- Duplicate Form Error - Do not embed the same form more than once on the same page. HubSpot restricts multiple instances of the same form on a single page.
- Form not loading when integrating your content outside of Vev - If you're using the <a href="https://help.vev.design/en/articles/6141975-embed-your-project">Embed Anywhere</a> component and your HubSpot form isn’t loading, try the following:
 1. Click the Publish button in your Vev project.
 2. In the Publish modal, click Get Embed Code.
 3. Go to Advanced Options.
 4. Disable the option labeled "Encapsulate Embed on Destination Page."
 
 Learn more about encapsulation and its impact on embedded forms here.

HubSpot form

Get Your HubSpot Form ID and Portal ID

How to Find Your HubSpot IDs

Configure the HubSpot Form in Vev

Styling the HubSpot form

Add a ‘Thank You’ or Success Page

How to Add a Redirect Page

Troubleshooting HubSpot Forms in Vev