Forms and Angular


#1

Hello,

I am trying to embed HubSpot form on our website, but it doesn’t show up.
Does it work with angular?


#2

Hi @Mirielle,

The form embed code is loaded via javascript, so in theory it should work. Can you send me a link to the page where the form isn’t appearing correctly?


#3

Angular2+ deletes all script tags within component markup due to security limitations.

I am currently working on finding a solution to integrate HubSpot with angular2+, however the HS blogs have effectively white-washed any information on the subject from Google.

The best avenue I've found so far is by using angular's Http to post to the hubspot endpoint, in a similar method to what's found here: https://stackoverflow.com/questions/35180562/i-need-to-do-a-http-request-to-a-mail-chimp-subscription-list-via-a-component-po/35181085#35181085

It would be extremely nice of the @hubspot team to figure out a solution for people using Angular, Ionic, etc


#4

Hi @AaronSR,

Your best bet is likely to create your own custom form and submit to HubSpot via the Forms API. The form embed code was built to be plug-and-play on standard websites, but not necessarily with all frontend frameworks. With the forms API, you can have full control over the form in Angular while still being able to pass the data into HubSpot:


#5

Well, I hope you might have already figured this out. But this might be helpful for people who are looking further. I had the same requirement and this is how I did it and it's working perfectly.

In Index.html:
< script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/shell.js">

In Template:
< div id="hubspotForm">

In Component:

declare var hbspt: any // put this at the top

ngAfterViewInit(){
hbspt.forms.create({
portalId: "[YOUR-PORTAL-ID]",
formId: "[YOUR-FORM-ID]",
target: "#hubspotForm"
});
window.scrollTo(0, 0); // used this because the scroll position is not at the top after inserting the form, so i'm manually pushing it :wink:
}

Cheers