# HTML custom module ignoring inner content

**URL:** <https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695>\
**Category:** CMS Development\
**Created:** [June 5, 2024, 10:51am UTC](https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695 "2024-06-05T10:51:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![MAmbrogi](https://avatars.discourse-cdn.com/v4/letter/m/ba9def/32.png) [@MAmbrogi](https://community.hubspot.com/u/MAmbrogi)\
**Post date:** [June 5, 2024, 10:51am UTC](https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695/1 "2024-06-05T10:51:22Z")

</div>

hello, HTML custom module, seems to be bugged as it is not showing any content inside.  
find a demo page here: [https://content.welcometothearkage.com/demo](https://content.welcometothearkage.com/demo)  
there should be an HTML element with a simple div inside, id=‘hubspot\_support’ but it is not shown, it seems like the entire component is ignored

any hint?

ty

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [June 5, 2024, 11:28am UTC](https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695/2 "2024-06-05T11:28:19Z")

</div>

Hi @MAmbrogi,

thank you for the preview link but since the whole module is - as you’ve said - ignored/not shown it’s hard to provide more information.

Could you please provide the source code of the module?

best,

Anton

---

<div class="post-metadata">

**Author:** ![MAmbrogi](https://avatars.discourse-cdn.com/v4/letter/m/ba9def/32.png) [@MAmbrogi](https://community.hubspot.com/u/MAmbrogi)\
**Post date:** [June 5, 2024, 11:33am UTC](https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695/3 "2024-06-05T11:33:42Z")

</div>

sure, the issue raised when I tried to embed an external form, then switched to an easier version, with a sample silly code 😄

`<div id='hubspot_support' style='min-height: 500px;'>ciao</div>`

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [June 5, 2024, 2:42pm UTC](https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695/4 "2024-06-05T14:42:00Z")

</div>

hmm.

How do you work with this module? Is the html code embedded in the module.html or do you use a rich-text to have something like a HTML editor option while building pages?

Also does the console (bottom left) show something like this?

![Bildschirmfoto 2024-06-05 um 16.15.25.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/9/a9ae5337eca73a79b89f197c61f2c1b13925c22a.png)

How do you embed the module into the page? Simply by drag&drop or via template?

Also something that might be causing an error(never experienced that but you never know):  
Replace the quotes with double quotes like this:

`<div id="hubspot_support" style="min-height: 500px;">ciao</div>`

best

---

<div class="post-metadata">

**Author:** ![MAmbrogi](https://avatars.discourse-cdn.com/v4/letter/m/ba9def/32.png) [@MAmbrogi](https://community.hubspot.com/u/MAmbrogi)\
**Post date:** [June 5, 2024, 2:54pm UTC](https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695/5 "2024-06-05T14:54:20Z")

</div>

Hello again,

it’s a common HTML module:

 ![Screenshot 2024-06-05 alle 16.53.48.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/3/3b1d37d1a010235e67a54176e973870a6375bc36.png)

the real code has double “quotes”

 ![Screenshot 2024-06-05 alle 16.52.23.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/8/b8186c0eeb9c46dfb2e5a1cc913ca9c0f855df13.png)

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [June 6, 2024, 5:55am UTC](https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695/6 "2024-06-06T05:55:40Z")

</div>

Hi @MAmbrogi,

seems to be the old HTML module that was available for download before the marketplace revamp last year(or the year before). If it’s the old HTML module it isn’t available anymore because HubSpot dropped the support of it for many reasons like security.

Therefore it might not work properly.

If you want to use this module often and have some sort of flexibility like showing different embeds based on your page you can create a custom module like this:

`<div id="my_fillout" class="drop some CSS classes here" data-fillout-id="{{ module.fillout_id }}" ... ></div>`

add a simple text(not rich-text) called “Fillout ID” as a function to the module and you’re good. The one thing that you’ll need to add to this module in the future would be just something like “32XsHk8Euhus” and it should work.

Also make sure that your embed code doesn’t require a JavaScript. Becuase if it requires a script it has to be placed somewhere in the page like

```lia-code-sample
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
{# ^ this is the script that is required so that the code below works properly #}

<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "XXXXXXXXX",
 formId: "xxx-xxx-xxx-xxx"
 });
</script>

```

If your embed requires a JavaScript put it in the HTML or custom module like this

```lia-code-sample
<script src="PATH-TO-SCRIPT" type="text/javascript"></script>

<div id="my_fillout" class="drop some CSS classes here" data-fillout-id="{{ module.fillout_id }}" ... ></div>

```

If this works I’d recommend to put it into a required\_js function to improve page-performance like this

```lia-code-sample
{% require_js %}
 <script src="PATH-TO-SCRIPT" type="text/javascript"></script>
{% end_require_js %}

<div id="my_fillout" class="drop some CSS classes here" data-fillout-id="{{ module.fillout_id }}" ... ></div>

```

This will put the script before the closing body tag AND HubSpot will check if this script is getting loaded already and won’t put it twice/multiple times into your page if you’re using the module several times on the page.

best,

Anton

---

<div class="post-metadata">

**Author:** ![MAmbrogi](https://avatars.discourse-cdn.com/v4/letter/m/ba9def/32.png) [@MAmbrogi](https://community.hubspot.com/u/MAmbrogi)\
**Post date:** [June 6, 2024, 1:02pm UTC](https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695/7 "2024-06-06T13:02:43Z")

</div>

ok, not an intuitive solution, but working 🙂

QUESTION:

\<div  
data-fillout-id=“{{module.fillout\_id}}”  
data-fillout-embed-type=“standard”  
data-fillout-inherit-parameters  
data-fillout-dynamic-resize\>  
\</div\>  
\<script src=“[https://server.fillout.com/embed/v1/](https://server.fillout.com/embed/v1/)”\>\</script\>

in interesting, at least we can dyamize form ids, BUT…

cannot understand how to make it editable from the dragNdrop editor 😞

I can only see the icon 🙂

 ![Screenshot 2024-06-06 alle 15.02.33.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/8/832119305383db9998c4748c75f199c81ca61b69.png)

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [June 6, 2024, 5:21pm UTC](https://community.hubspot.com/t/html-custom-module-ignoring-inner-content/108695/8 "2024-06-06T17:21:50Z")

</div>

Hey @MAmbrogi,

you have to add the function to the module like this:

 ![Bildschirmfoto 2024-06-06 um 19.09.26.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/d/9dc0edfe50cfb6601100d92f64ac9e48a62ef26b.png)

Simply click on “add fields” and select “text”(not rich-text) since this is a plain text input.

If you have multiple forms that you just want to choose from you can select the choice field and put the IDs into the value fields

 ![Bildschirmfoto 2024-06-06 um 19.12.27.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/8/688e46798e5d6e35e4659529927b59b37c169780.png)

If you’d like to have a combination of both you can do it like this:

 ![Bildschirmfoto 2024-06-06 um 19.14.19.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/3/03c53d1a253fa4c69a7821ebcf89368f69596952.png)

 ![Bildschirmfoto 2024-06-06 um 19.19.17.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/3/7310da947b16f94cef8813b6333142d190843466.png)

Here’s the whole code and the corresponding json file(if you’re working with local development/VS Code)

module.html

```lia-code-sample
{% if module.fillout_type == "predefined" %}
 {% set fillout_id = module.predefined_fillout_id %}
{% elif module.fillout_type == "custom" %}
 {% set fillout_id = module.custom_fillout_id %}
{% endif %}

<div
data-fillout-id="{{ fillout_id }}"
data-fillout-embed-type="standard"
data-fillout-inherit-parameters
data-fillout-dynamic-resize>
</div>

```

fields.json

```lia-code-sample
[
 {
 "type": "choice",
 "id": "63940e4e-388d-4a88-d465-7dcc8b872af5",
 "display": "radio",
 "choices": [
 [
 "predefined",
 "Predefined"
 ],
 [
 "custom",
 "Custom"
 ]
 ],
 "label": "Fillout type",
 "name": "fillout_type"
 },
 {
 "type": "text",
 "id": "a018a600-a693-63ce-0ffe-062dc1efab2a",
 "validation_regex": "",
 "label": "Custom fillout ID",
 "name": "custom_fillout_id",
 "visibility": {
 "controlling_field_path": "fillout_type",
 "operator": "EQUAL",
 "controlling_value_regex": "custom"
 }
 },
 {
 "type": "choice",
 "id": "f17eb7fa-9dbd-3413-09da-b3167e90ab75",
 "display": "radio",
 "choices": [
 [
 "XYZ123zyx",
 "Form A"
 ],
 [
 "ABC321cba",
 "Form B"
 ]
 ],
 "label": "Predefined fillout ID",
 "name": "predefined_fillout_id",
 "visibility": {
 "controlling_field_path": "fillout_type",
 "operator": "EQUAL",
 "controlling_value_regex": "predefined"
 }
 }
]

```

hope that helps

best,

Anton