Forms and Angular

Not applicable

Hello,

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

0 Upvotes
10 Replies 10
Derek_Gervais
HubSpot Moderator

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 Upvotes
AaronSmileRight
Participant

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 Upvotes
Derek_Gervais
HubSpot Moderator

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
Member

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 Upvotes
JessicaH
HubSpot Alumni

@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 Upvotes
Not applicable

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
Member

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>
0 Upvotes
bsplosion
Contributor

@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 Upvotes
FelixPrados
Member

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 Upvotes
sumith1596
Member

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

'