Hi there,
Still using Umbraco v7. I would like to use a Hubspot form in Umbraco, perhaps using an iframe.
Anyone know how to achieve this?
Looking forward to your response
You could create a Document Type called HubspotForm which had one property: HubspotFormUrl.
Then in the associated page template you could write out the value of that field inside an iframe src attribute...
I think with Hubspot there is also a way of integrating a particular form using a snippet of javascript that you can generate when you design the form... So another way might be to create a InsertHubspotForm Macro that has a parameter that takes the Id of the form or full snippet, that then has a partial view that renders the snippet, this might be cool if you want editors to be able to insert forms in the grid or a rich text property...
I actually created the doc type as you suggested but mirrored one that is like a form that I know is working.
Then I said I wanted that doc type to be allowed in Stak sections. But I can't seem to select that doc in Staks as an insertable stak choice.
I don't know how I can apply it to my page. There are forms in staks, but not this doc type that I know collects data and places it in Hubspot.
Joanne
If it's a page on your site, then all you may need to do is find which Document Type the page is based on... Should be able to see on the info/general properties tab
Then go find that document type in the settings section, and click on 'permissions' - here you can say which types of pages can be created under this type of page. Add your hubspot form type of page to this list and that should mean you get the option to create a hubspot page underneath your staks section back in the content tree...
I appreciate that you are trying to help me. A stak is a document type which most of our pages are built on. Staks make up the page.
I tried to add it to the list of data types that can be inserted as part of a stak, but it just doesn't seem possible. I also have no "permissions" setting to click.
The earliest versions had a different way to do it...
The Document Type had a 'structure' tab... And on this a setting called 'Allowed Child Node Types' which was a checkbox list of all the other Doc Types, and you'd just need to tick your new hubspot type...
In later versions of v7 it got renamed as Permissions, but it's still a bit obscure as it's top right of the screen and not really a tab... But sort of a button... Anyway have another look and if it's still hiding from you, if you can say which version can provide a screenshot..
You are so kind to continue to try to help me
. I created the doc type and I did as you said - selected that I wanted it on a "stak section" as the child node.
I think what I am trying to find is how to get that doc type as an item in the Grid Editor , so that it can be one of my items that I can input as a stak. "New Contact Form" is a type in the stak grid data type, but that form in the form builder doesn't sync to Hubspot.
Contact Form is the one on my ContactUs page. I modeled the settings of my Hubspot form off of that.
So I was thinking you'd have the Hubspot form on a page in its own right.
Eg. in the Content Section, you were trying to create a Hubspot type of page underneath another page - that's where the permissions/structure comes into it. You control where in the Content tree you can create different types of pages.
But now if I understand you correctly, you perhaps have a type of page (perhaps called a Stak) that has the Umbraco Grid defining its content, and you have lots of different types of Grid Editors that you can use in different grid cells to build up the content of the page - and you'd like a HubForm to be one of those options... ?
It looks like you are using a plugin called 'Le Blender' that was fashionable back in the day to create custom grid editors, based on Umbraco properties, but not on Document Types. (A later plugin called Doc Type Grid Editor did the same kind of thing, but was based on Document Types)...
... but I think the simplest thing to do here is to create a Macro (as you can see from your list of grid editors, that 'Macro' is one of the options.
To do this you'd need to go into the Developer Section
And create a New Macro, call it Insert Hubspot Form
And you want to tick the checkbox for PartiaViewMacro as the type
This means you'll also need to create (also in the developer section) a Macro Partial View, (in fact if you create the Macro Partial View first, it will prompt you to create a matching Macro!)
So there are two parts to it the 'Macro' and the 'Macro Partial View'
In the Macro Configuration you need to tick the box 'use in rich text editor and grid'
And then at the top click on 'Parameters'
And add a new parameter of string/text type called HubspotFormUrl and make a note of the alias.
Save the Macro configuration
Then in your matching Macro View Partial
You need to read the parameter and set it as your IFrame src
something like
@using Umbraco.Extensions
@inherits Umbraco.Cms.Web.Common.Macros.PartialViewMacroPage
@{
// read in the parameter using the alias you created for it in the macro configuration
var hubspotFormUrl = Model.GetParameterValue<string>("hubspotFormUrl");
}
<iframe src="@hubspotFormUrl"></iframe>
Now you need to find the 'DataType' that defines your Grid Property that your content pages uses...
... you might not need to do this ...
but basically there is configuration in that property for which types of rows you can use in your grid, and in each of the grid cells in those rows, there is configuration to say which grid editors are ok to use in that cell...
... so if you don't have the option to insert a macro into your grid cell, you will need to update the configuration so it's possible! (you have to click into the cell, and tick the checkbox for Macro)
But hopefully that's already in place.
Now you should be able to edit a content page, click on a grid cell and choose Insert Macro, then get a dropdown of Macros (possibly only this one!) and choose our HubspotForm Macro - it will then ask you for the Url - which you can stick in - and then the Macro Partial View will take that value and put it in the Iframe... tada!
Hopefully that's what you are after and I haven't misunderstood once more.
Just to be clear - the doc type that i a calling HubspotForm, isn't really a Hubspot form - I only called it that bc it is an Umbraco form that I am hoping will work synching to hubspot.
I do have a real Hubspot form that I attempted to pull in - if anything I think your macro and iframe may work with this.
I appreciate that you have been so responsive and have tried a few options with me.
Joanne
Yes I think the Macro will work with the HubSpot form URL.
If you have an Umbraco Form (eg a form built with the plugin Umbraco Forms) that you want to integrate with a HubSpot form with matching form field names then you could use a custom Umbraco Forms Workflow step, to post the values to the Hubspot end point (on the design of your Umbraco form look for the 'Workflow' option and add a new 'workflow' to see the possibilities... basically when an Umbraco form is submitted the workflows are executed one after another with the posted form data... but if you are not using Umbraco Forms then ignore me!
Annoyingly there is a package for integrating Umbraco and HubSpot but it's only for Version 8 and above:
Hubspot Form in Umbraco 7
Hi there, Still using Umbraco v7. I would like to use a Hubspot form in Umbraco, perhaps using an iframe. Anyone know how to achieve this? Looking forward to your response
Hi Joanne
You could create a Document Type called HubspotForm which had one property: HubspotFormUrl.
Then in the associated page template you could write out the value of that field inside an iframe src attribute...
I think with Hubspot there is also a way of integrating a particular form using a snippet of javascript that you can generate when you design the form... So another way might be to create a InsertHubspotForm Macro that has a parameter that takes the Id of the form or full snippet, that then has a partial view that renders the snippet, this might be cool if you want editors to be able to insert forms in the grid or a rich text property...
Regards
Ma4c
I actually created the doc type as you suggested but mirrored one that is like a form that I know is working. Then I said I wanted that doc type to be allowed in Stak sections. But I can't seem to select that doc in Staks as an insertable stak choice. I don't know how I can apply it to my page. There are forms in staks, but not this doc type that I know collects data and places it in Hubspot. Joanne
Hi Joanne
What is staks?
If it's a page on your site, then all you may need to do is find which Document Type the page is based on... Should be able to see on the info/general properties tab
Then go find that document type in the settings section, and click on 'permissions' - here you can say which types of pages can be created under this type of page. Add your hubspot form type of page to this list and that should mean you get the option to create a hubspot page underneath your staks section back in the content tree...
Regards
Marc
I appreciate that you are trying to help me. A stak is a document type which most of our pages are built on. Staks make up the page. I tried to add it to the list of data types that can be inserted as part of a stak, but it just doesn't seem possible. I also have no "permissions" setting to click.
Hi Joanne
Ooh, which version of Umbraco 7 do you have?
The earliest versions had a different way to do it...
The Document Type had a 'structure' tab... And on this a setting called 'Allowed Child Node Types' which was a checkbox list of all the other Doc Types, and you'd just need to tick your new hubspot type...
In later versions of v7 it got renamed as Permissions, but it's still a bit obscure as it's top right of the screen and not really a tab... But sort of a button... Anyway have another look and if it's still hiding from you, if you can say which version can provide a screenshot..
Regards
Marc
You are so kind to continue to try to help me . I created the doc type and I did as you said - selected that I wanted it on a "stak section" as the child node. I think what I am trying to find is how to get that doc type as an item in the Grid Editor , so that it can be one of my items that I can input as a stak. "New Contact Form" is a type in the stak grid data type, but that form in the form builder doesn't sync to Hubspot. Contact Form is the one on my ContactUs page. I modeled the settings of my Hubspot form off of that.
I guess I am missing how it all works together
Hi Joanne
Aha!
So I was thinking you'd have the Hubspot form on a page in its own right.
Eg. in the Content Section, you were trying to create a Hubspot type of page underneath another page - that's where the permissions/structure comes into it. You control where in the Content tree you can create different types of pages.
But now if I understand you correctly, you perhaps have a type of page (perhaps called a Stak) that has the Umbraco Grid defining its content, and you have lots of different types of Grid Editors that you can use in different grid cells to build up the content of the page - and you'd like a HubForm to be one of those options... ?
It looks like you are using a plugin called 'Le Blender' that was fashionable back in the day to create custom grid editors, based on Umbraco properties, but not on Document Types. (A later plugin called Doc Type Grid Editor did the same kind of thing, but was based on Document Types)...
... but I think the simplest thing to do here is to create a Macro (as you can see from your list of grid editors, that 'Macro' is one of the options.
To do this you'd need to go into the Developer Section And create a New Macro, call it Insert Hubspot Form
And you want to tick the checkbox for PartiaViewMacro as the type
This means you'll also need to create (also in the developer section) a Macro Partial View, (in fact if you create the Macro Partial View first, it will prompt you to create a matching Macro!)
So there are two parts to it the 'Macro' and the 'Macro Partial View'
In the Macro Configuration you need to tick the box 'use in rich text editor and grid'
And then at the top click on 'Parameters'
And add a new parameter of string/text type called HubspotFormUrl and make a note of the alias.
Save the Macro configuration
Then in your matching Macro View Partial
You need to read the parameter and set it as your IFrame src something like
Now you need to find the 'DataType' that defines your Grid Property that your content pages uses...
... you might not need to do this ...
but basically there is configuration in that property for which types of rows you can use in your grid, and in each of the grid cells in those rows, there is configuration to say which grid editors are ok to use in that cell...
... so if you don't have the option to insert a macro into your grid cell, you will need to update the configuration so it's possible! (you have to click into the cell, and tick the checkbox for Macro)
But hopefully that's already in place.
Now you should be able to edit a content page, click on a grid cell and choose Insert Macro, then get a dropdown of Macros (possibly only this one!) and choose our HubspotForm Macro - it will then ask you for the Url - which you can stick in - and then the Macro Partial View will take that value and put it in the Iframe... tada!
Hopefully that's what you are after and I haven't misunderstood once more.
regards
Marc
ok I will give this a shot.
Just to be clear - the doc type that i a calling HubspotForm, isn't really a Hubspot form - I only called it that bc it is an Umbraco form that I am hoping will work synching to hubspot.
I do have a real Hubspot form that I attempted to pull in - if anything I think your macro and iframe may work with this.
I appreciate that you have been so responsive and have tried a few options with me. Joanne
Hi Joanne
Yes I think the Macro will work with the HubSpot form URL.
If you have an Umbraco Form (eg a form built with the plugin Umbraco Forms) that you want to integrate with a HubSpot form with matching form field names then you could use a custom Umbraco Forms Workflow step, to post the values to the Hubspot end point (on the design of your Umbraco form look for the 'Workflow' option and add a new 'workflow' to see the possibilities... basically when an Umbraco form is submitted the workflows are executed one after another with the posted form data... but if you are not using Umbraco Forms then ignore me!
Annoyingly there is a package for integrating Umbraco and HubSpot but it's only for Version 8 and above:
https://umbraco.com/blog/integrating-umbraco-cms-with-hubspot-forms/
The sourcecode for it is open sourced here:
https://github.com/umbraco/Umbraco.Cms.Integrations/tree/main/src/Umbraco.Cms.Integrations.Crm.Hubspot
so that might have some inspiration if you desire to build a custom workflow step for V7 that integrates with Hubspot....
... but lets see if the iframe macro gets you close to what you need first!
regards
Marc
Thanks so much. I have shared your post with my manager who has more Umbraco skill than me :-). Appreciate all of your help! Joanne
is working on a reply...