Hello,
I am trying to embed HubSpot form on our website, but it doesn’t show up.
Does it work with angular?
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?
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 glossed-over 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
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:
Submit data to a form | HubSpot Forms API
POST https://forms.hubspot.com/uploads/form/v2/:portal\_id/:form\_guid - Send form submission data to HubSpot. Form submissions from external sources can be made to any registered HubSpot form. You can see a list of forms on your portal by going to…
Hi I would like to know how integrate HubSpot Chat with Angular2 project.
Many people suggest to use chat form on client side and send post request to hubspot API. Are there any suggestions or examples to do this?
Many thanks Yuriy
@Derek_Gervais @bsplosion @WendyGoh would you have any suggestions for @PaulEsprit?
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
}
Cheers
I’m getting this error: “hbspt.forms.create is not a function” with Angular 7
This is my code:
Index.html
<script charset="utf-8" src="https://js.hsforms.net/forms/shell.js"></script>
home.component.ts
declare var hbspt: any // put this at the top
ngAfterContentInit() {
hbspt.forms.create({
portalId: "xxxxxx",
formId: "xxxxxx",
target: "#hubspotForm"
});
}
home.component.html
<div id="hubspotForm"> </div>
@GerardRosetta one tweak made it work for me - just replace the shell.js import with this instead:
<script type="text/javascript" charset="UTF-8" src="https://js.hsforms.net/forms/v2.js"></script>
Thanks anonymous person for pointing out that we could use the AfterViewInit hook to accomplish this!
Hi @FelixPrados ,
Just add ‘typings.d.ts’ into your angular app and add the declaration there.
declare const hbspt: any;
No need to declare any variables on the component.
Embed code will work once you add this.
Happy coding !!
’
Angular 12 o superiores
En index.html de tu proyecto
<script type="text/javascript" charset="UTF-8" src="https://js.hsforms.net/forms/v2.js"></script>
En el componente donde quieras que esté el formulario
declare var hbspt: any // pega esto arriba del componente
Esto en el componente como tal
ngAfterContentInit() {
hbspt.forms.create({
region: "xxx",
portalId: "xxxxxxxx",
formId: "xxxxxxxxx",
target: "#hubspotForm"
});
}
Y esto en tu html
<div class="col-12 mb-5">
<div id="hubspotForm"></div>
</div>
Con esto tu formulario debe funcionar en Angular 12 o superiores