Adding php to a template

[fisicx]

I've created a php/jQuery form that calculates repayments. I've tested this using a simple php page and it all works. I now need to import the code onto the appropriate template but there doesn't seem to be any way to edit the template code.

I also need to add all the CSS to the template but I can't find the stylesheet anywhere.

Any suggestions?

[Jsum · Accepted solution]

@fisicx,

I say this as well "You can't use server side code in Hubspot" but the truth is that HubL is server side code. You are used to php, I would imagine WordPress, right? WordPress is build in PHP and uses a custom version of PHP for templating. Hubspot is built in Python and uses a custom version of python, HubL (similar to jinja, django templates, or other python templating languages) for templating. 

While it is true that, unlike WordPress or other self hosted content management systems, you cannot access the systems core, you can still do quite a bit with HubL, especially now with the new custom modules setup. 

I would imagine that you would want a calculator to be interactive. Pure php would still require a page load and passing data, most likely through the url, to save values. If you want a truly user friendly calculator you would want to use javascript whether your system is php or python, because javascript allows you to do on page interaction without the server having to process the inputs.

There are some limitations here, but that goes for any cms. before careful not to write something off as a limitation when it is actually just requiring a python friendly solution. PHP and Python are totally different languages. teamtreehouse.com has a great python course that honestly goes a long way in helping you understand the concepts surrounding Hubspot's HubL.

[Jsum · Accepted solution]

@fisicx,

I say this as well "You can't use server side code in Hubspot" but the truth is that HubL is server side code. You are used to php, I would imagine WordPress, right? WordPress is build in PHP and uses a custom version of PHP for templating. Hubspot is built in Python and uses a custom version of python, HubL (similar to jinja, django templates, or other python templating languages) for templating. 

While it is true that, unlike WordPress or other self hosted content management systems, you cannot access the systems core, you can still do quite a bit with HubL, especially now with the new custom modules setup. 

I would imagine that you would want a calculator to be interactive. Pure php would still require a page load and passing data, most likely through the url, to save values. If you want a truly user friendly calculator you would want to use javascript whether your system is php or python, because javascript allows you to do on page interaction without the server having to process the inputs.

There are some limitations here, but that goes for any cms. before careful not to write something off as a limitation when it is actually just requiring a python friendly solution. PHP and Python are totally different languages. teamtreehouse.com has a great python course that honestly goes a long way in helping you understand the concepts surrounding Hubspot's HubL.

[Phil_Vallender]

Hi @fisicx

You can't run server-side code on HubSpot's platform. If you need to use php to power your calculator, you'll need to host it on an external domain. 

Hope this helps.

[fisicx]

Thanks Phil,

I'm now discovering all sorts of limitations with hubspot. One of which is the ancient version of jQuery it uses and the aparent inability to add to the global stylesheet.

And it's not even possible to inspect/edit the template code which makes things a lot more diffiucult.

Graham

[benvanlooy]

Hubspot does have many limitations. For many of them, you just have to find a practical way around them, for some, there isn't a solution.

You should probably look at it like this in Hubspot:

PHP = Hubl code (with it's many restrictions of course). 

I find it easiest developing a site in HTML/CSS/JAVASCRIPT - then creating a template out of the html pages using the hubl code.

As for JQuery, if you do the programming yourself, you can add any version of jQuery you want to the page.

[fisicx]

Thanks for that. The problen is still PHP.

For the calculator to work we need to include a number of  PHP classes. These set up the variables to be used in the calculator (range slider min and max for example). There is also a very complex jQuery function that does the amortization calculations and manages all the outputs.

You can see some examples of the calculator here: Loan Calculator

I'd also like to add the CSS to global stylesheet (better for SEO) but that doesn't appear to be an option either.

I just can't see how this can be done. Unless I'm missing something fundamental

[benvanlooy]

From what I've seen:

Those sliders and calculations can purely work on javascript without php.

I just think storing the values could become tricky because the forms within hubspot are generated after the page is loaded, so adding those values to the form is probably not that easy.

You can perfectly host your page on a different website though and go old-school and use iframes, but that's obviously not very interesting.

[fisicx]

Hmm....

So it might be possible if we got for pure HTML and no variables.

What's the best way to insert HTML into a template? There doesn't appear to be a 'code view' option

(I should point out that I'm a wordpress developer so this is all very new to me).

[Gonzalo · Accepted solution]

As far I can see you have two solutions:

- As it has been mention before, you can convert your PHP calculator to a javascript version and use a form to load/save the variables. If it the calculator has some steps (reloading page, different forms etc.) I suggest you to save the mid. steps in a cookie before send everything to HS in the last step.

- But as you already have the calculator working in PHP I would suggest just use an external hosting (if you own one) for that and use AJAX for those external call. That should work fine to keep everything working without re-do stuff.

Regarding the CSS: you need to create a custom CSS file. Add the styles there and then you should be able to attach files to templates (recomended).

If you want to add the same for all the pages (even landing, thanks etc.) and put something as "global"  you can go to content -> content settings-> site header HTML (or footer) and add there all you need.

[benvanlooy]

For Hubspot - I only develop templates using html/css/javascript - I don't really use the building blocks as I find they are often too limited for the designs I want to create.

When creating a new file, try choosing the Code Editor instead of the template builder 🙂

[fisicx]

OK so I've now built a new HTML template and it all seems to work (the sliders move and the calculations to their thing).

But this really needs to be a module so it can be inserted into an exisiting page. How do I do this?

[Gonzalo]

You need to convert that to a custom module