How to embed hubspot form into pillar pages

Develop, Build & Integrate CMS Development
1

Please help me!!

2

Hey @MNongrum2,

it depends on your setup.
If your pillar page is build in HubSpot you can

  • use the default form module
  • use a theme specific form module
  • create a custom module with a form field (as of now custom modules don’t support multi-step forms)
  • paste the form embed code into the source-code view of a rich-text (not recommended).

If you want to embed a HubSpot form on an external page, the best way is to copy/paste the embed code. Depending on your external setup you can either paste it in the source-code view of a rich-text or into a codeblock (if you have something like this)

best,

Anton

3

Hey @MNongrum2,

Getting your HubSpot form onto a pillar page is totally doable. The exact method depends on how your pillar page is built:

If you’re working with HubSpot-hosted pillar pages, the smoothest way is usually to drag in a form module or use your theme’s built-in tools, most themes have an easy way to drop a form right into your layout.

Or you can create a custom module and add a form field there.

If you’re working outside of HubSpot, like on a WordPress or Webflow site, you’ll want to grab the embed code from your form’s “Share” tab in HubSpot, then paste it directly into your page’s HTML (or into a code block if your builder has one).

Be cautious when pasting into a rich text editor, as it may not always load scripts properly.

If you’d like a custom module tailored to your design or layout, I’d be happy to help build that for you as well.

Hope this helps!

Regards,

4

Hi, I am using hubspot’s built in dynamic pages, so the options you just mentioned would work if my pillar page was a normal page but hubspot’s dynamic pages especially the pillar pages, are not available in the page editor. Correct me if I’m wrong

5

Hey @MNongrum2,

for dynamic pages (HubDB) you can add a new text column and use it for the form-id(you get it from the URL or the embed code).
In your dynamic page template, use any embed-code of a form and replace the form-id with the column-name

Example:

{% for page in dynamic_page %} {# just an example #}
...
<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 portalId: "{{ hub_id }}",
 formId: "{{ page.column_name }}",
 region: "na1"
 });
</script>
...
{% endfor %}

best,

Anton

6

but doing so won’t I need to add the form ID in every row in the hubdb??

7

Yes - if you don’t want to provide a form in each page, you can wrap the whole form code in an if-statement like

{% for page in dynamic_page %} {# just an example #}
...
{% if page.form_id_column_name %}
<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 portalId: "{{ hub_id }}",
 formId: "{{ page.form_id_column_name }}",
 region: "na1"
 });
</script>
{% endif %}
...
{% endfor %}

by doing so it will render the whole form code only if there’s a form id

8

I want to the form to be in every pillar page but without the need of adding the form in every row since it might not be user friendly

9

If it’s the same form in the same spot, then add a form module or an embed code to the template directly.

{% module "form"
 path="@hubspot/form"
 form={
 "form_id": "123456-123456-12358-7894", 
 "response_type": "redirect",
 "message": "Thanks for submitting the form.",
 "redirect_id": null,
 "redirect_url": "http://www.google.com"
 }
%}

^ example of the default form module usage in a template. Simply modify the data

If you want to have the same form but want to decide if you’d like to display it or not on a page, add a checkbox or choice column(options: true/false) to your hubdb and use it in an if-statement around the module/embed code

10

*Note from the moderator:
This content appears to be created with the help of AI tools and might be of low relevance or could contain incorrect information.
We recommend fact-checking the content.
Please use AI responsibly going forward (see Community Guidelines).
-----------------------
Want to add a form to your pillar page? Here are two easy ways:
Option 1: Same Form in the Same Spot on Every Page

If you’re using the same form in the same place across all pillar pages (like in the sidebar or at the bottom), you can just add it directly to the page template.

How to do it:

  • If you’re using a coded template, a developer can drop in a few lines of code with the form’s ID (HubSpot gives you this ID when you create the form).

  • If you’re using a drag-and-drop editor, just:

    1. Open the form in HubSpot.
    2. Click “Share” and copy the embed code.
    3. Add a custom HTML module to the page and paste the code in.

That’s it — the form will now show up on all pillar pages using that template.

------------------------------------------------------------------------

Option 2: Show or Hide the Form Based on a HubDB Setting

If you’re using HubDB to manage pillar pages and want to control whether the form shows up or not for each page, here’s what to do:

Steps:

  1. In your HubDB table, add a column like “Show Form?” with a Yes/No option.
  2. In your template, ask HubSpot to only display the form if “Show Form?” is set to Yes.

This is great if you only want the form to show up on some pillar pages, not all.

Quick Recap

What You Need What To Do
Show the same form on all pillar pages Add form code directly to the template or use the embed code
Show the form only on selected pages Use HubDB and a Yes/No switch to control it

Ankita Gupta
HubSpot Advisor