{"id":3177,"date":"2023-07-13T13:35:52","date_gmt":"2023-07-13T13:35:52","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/hubspot-embed-hubspot-forms-in-ion\/"},"modified":"2025-02-17T11:53:34","modified_gmt":"2025-02-17T11:53:34","slug":"hubspot-embed-hubspot-forms-in-ion","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/hubspot-embed-hubspot-forms-in-ion\/","title":{"rendered":"HubSpot: Embed HubSpot forms in ion"},"content":{"rendered":"

If you\u2019d like to embed HubSpot forms into your ion experiences, check out this post to easily repurpose your HubSpot embed code into a reusable ion widget. Taking these steps will enable you to redirect respondents to an ion page after form submission and to add ion rule logic to your HubSpot forms.<\/p>\n

Before we begin<\/strong><\/h3>\n

Before setting up a HubSpot form widget in ion, you will want to understand where to find your HubSpot portal ID and the form ID of the HubSpot form(s) you want to add to your ion pages.<\/p>\n

Your HubSpot portal ID is a numeric value that is always present in the URL of every page within your HubSpot account. For example, when reviewing contacts in your HubSpot account, your URL should look something like the below. In this example, we\u2019ve made the portal ID bold to make it easy to identify the portal ID.<\/p>\n

https:\/\/app.hubspot.com\/contacts\/123456<\/strong>\/contacts<\/pre>\n
 <\/p>\n
You\u2019ll also need to understand where to find your form IDs. The form ID is a longer alpha-numeric string that you will see in the URL when editing your HubSpot form or viewing form performance in HubSpot. Please find examples below of URLs you will see in your address bar when editing a HubSpot form or viewing performance with the form ID bold. <\/p>\n
Edit Form<\/strong>:<\/p>\n
https:\/\/app.hubspot.com\/forms\/123456\/editor\/a1bbbcd2-345b-1234-1234-1a23b456c789<\/strong>\/edit\/form<\/a><\/pre>\n
 <\/p>\n
Form Performance<\/strong>:<\/p>\n
https:\/\/app.hubspot.com\/forms\/123456\/a1bbbcd2-345b-1234-1234-1a23b456c789\/performance<\/a><\/pre>\n
 <\/p>\n
 <\/p>\n
Let\u2019s get started<\/strong><\/h3>\n
Now that you know where to find your HubSpot portal ID and form ID values, we can start working on the form widget in ion. You can put your portal ID and form ID values to the side for now until it\u2019s time to add your HubSpot form widget to a page.<\/p>\n
Add widget code to your ion library<\/strong><\/h4>\n
The first step in ion is to add the below code to your ion Widget Library.<\/p>\n
In ion, navigate to Libraries<\/strong> ><\/strong> Widgets<\/strong> and click the New widget<\/strong> button to add a new widget. We recommend labeling the widget something like Embed Form and storing it in a category called HubSpot. <\/p>\n
Next, paste the widget code below into the editor.<\/p>\n
<script<\/strong> src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script<\/strong>>\n<!--[if lte IE 8]>\n<script charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/v2-legacy.js\"><\/script>\n<![endif]-->\n<script<\/strong> charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/v2.js\"><\/script<\/strong>>\n<script<\/strong>>\nhbspt.forms.create({\nportalId: '##portalId',\nformId: '##formId',\n  onFormSubmitted: function($form) {\ntop.location.href = '##OnSubmittedUrl'\n},\n});\n<\/script<\/strong>><\/pre>\n
This code includes variables that you will be able to populate with your portal ID and form ID when the time comes to add it to your page. It also includes a variable that will allow you to specify what page to go to when the form is submitted.<\/p>\n
Before saving, go ahead and set the Portal ID<\/strong> and Form ID<\/strong> as required text and Next Page<\/strong> as a required action, like the example below:<\/p>\n
<\/p>\n
 Add the widget to your ion experience<\/strong><\/p>\n
Navigate to the page where you’d like to embed the HubSpot form. Drag the Widget<\/strong> icon from the Basics<\/strong> palette onto your page and select your new HubSpot<\/strong> ><\/strong> Embed Form widget<\/strong>. Next, under Variables<\/strong> in Creative studio, enter the portal ID<\/strong> and form ID, in the Source text option,<\/strong> from your HubSpot account and select the ion page you seek to redirect to.<\/p>\n
Voila! Your HubSpot form is now embedded in your ion experience! You can even add ion rule logic to your HubSpot form. <\/p>\n","protected":false},"excerpt":{"rendered":"
If you\u2019d like to embed HubSpot forms into your ion experiences, check out this post to easily repurpose your HubSpot embed code into a reusable ion widget. Taking these steps will enable you to […]<\/p>\n","protected":false},"author":21,"featured_media":5350,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2175,2078],"tags":[2173,2200,2216,2208],"class_list":["post-3177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ion-integrations-the-advanced-capabilites","category-the-advanced-capabilites","tag-advanced","tag-data-management","tag-hubspot","tag-ion-integration"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=3177"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3177\/revisions"}],"predecessor-version":[{"id":5351,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3177\/revisions\/5351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5350"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=3177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=3177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=3177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}