topic Re: Forms and Angular in APIs & Integrations

Forms and Angular

Mon, 20 Nov 2017 18:58:30 GMT

Hello,

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

Re: Forms and Angular

Derek_Gervais — Tue, 21 Nov 2017 19:22:56 GMT

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?

Re: Forms and Angular

AaronSmileRight — Mon, 17 Aug 2020 14:32:04 GMT

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

Re: Forms and Angular

Derek_Gervais — Wed, 18 Apr 2018 22:53:43 GMT

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:

Re: Forms and Angular

Tue, 11 Sep 2018 02:31:36 GMT

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

Re: Forms and Angular

GerardRosetta — Mon, 10 Feb 2020 10:23:13 GMT

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>

Re: Forms and Angular

bsplosion — Tue, 10 Mar 2020 14:45:27 GMT

@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!

Re: Forms and Angular

PaulEsprit — Fri, 19 Jun 2020 06:50:24 GMT

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

Re: Forms and Angular

JessicaH — Fri, 19 Jun 2020 14:01:24 GMT

@Derek_Gervais @bsplosion @WendyGoh would you have any suggestions for @PaulEsprit?

Re: Forms and Angular

FelixPrados — Thu, 16 Jul 2020 16:03:39 GMT

When trying to use

hubspot.forms.create

I get an undefined for the forms object

And this is what I see when I inspect the hubspot object

Re: Forms and Angular

sumith1596 — Sun, 06 Sep 2020 15:24:22 GMT

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 !!

Re: Forms and Angular

devlucho — Wed, 10 Apr 2024 15:03:39 GMT

Angular 12 o superiores

En index.html de tu proyecto

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

Con esto tu formulario debe funcionar en Angular 12 o superiores