APIs & Integrations

Non applicable

Forms and Angular

Hello,

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

0 Votes
11 Réponses
devlucho
Participant

Forms and Angular

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

 

 

 

 

 

 

 

 

0 Votes
Non applicable

Forms and Angular

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

GerardRosetta
Membre

Forms and Angular

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>
bsplosion
Contributeur

Forms and Angular

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

0 Votes
FelixPrados
Membre

Forms and Angular

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

hubspot_object.PNG

0 Votes
sumith1596
Membre

Forms and Angular

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

'

Derek_Gervais
Ancien salarié HubSpot
Ancien salarié HubSpot

Forms and Angular

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:

PaulEsprit
Membre

Forms and Angular

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

0 Votes
JessicaH
Ancien salarié HubSpot
Ancien salarié HubSpot

Forms and Angular

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


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, in dem du deine Spracheinstellungen änderst !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Votes
AaronSmileRight
Participant

Forms and Angular

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-subscriptio...

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

0 Votes
Derek_Gervais
Ancien salarié HubSpot
Ancien salarié HubSpot

Forms and 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?

0 Votes