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.
Get Your HubSpot Form ID and Portal ID
Before you can embed a HubSpot form in Vev, you need to retrieve two key values from HubSpot: the Portal ID and Form ID.
How to Find Your HubSpot IDs
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:
portalIdformId
Configure the HubSpot Form in Vev
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.
Styling the HubSpot form
HubSpot forms cannot be styled directly in Vev.
To change the appearance of your form, use HubSpot’s own design tools.
Visit the HubSpot Knowledge Base for more details on customizing forms.
Add a ‘Thank You’ or Success Page
You can configure your form to redirect users after submission.
How to Add a Redirect Page
In HubSpot, open your form and click Options.
Choose Redirect to another page.
Set the redirect URL:
Use a full URL, or
Link to a subpage in your current Vev project (e.g.,
/thank-you)
Click Add to save the settings.
After submitting the form, users will be redirected to the specified "Thank You" page.
Troubleshooting HubSpot Forms in Vev
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 Embed Anywhere component and your HubSpot form isn’t loading, try the following:
Click the Publish button in your Vev project.
In the Publish modal, click Get Embed Code.
Go to Advanced Options.
Disable the option labeled "Encapsulate Embed on Destination Page."
Learn more about encapsulation and its impact on embedded forms here.