<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: Custom Information in OOB forms in Lead Capture Tools</title>
    <link>https://community.hubspot.com/t5/Lead-Capture-Tools/Custom-Information-in-OOB-forms/m-p/1209648#M13266</link>
    <description>&lt;P&gt;Hi&amp;nbsp;&lt;a href="https://community.hubspot.com/t5/user/viewprofilepage/user-id/724427"&gt;@hafizusama&lt;/a&gt;,&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;I believe this is the documentation you're looking for &lt;span class="lia-unicode-emoji" title=":slightly_smiling_face:"&gt;🙂&lt;/span&gt;&amp;nbsp;&lt;A href="https://developers.hubspot.com/docs/cms/start-building/features/forms/legacy-forms#embed-code-callbacks" target="_blank"&gt;https://developers.hubspot.com/docs/cms/start-building/features/forms/legacy-forms#embed-code-callbacks&lt;/A&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;Best regards!&lt;/P&gt;</description>
    <pubDate>Wed, 08 Oct 2025 06:57:25 GMT</pubDate>
    <dc:creator>karstenkoehler</dc:creator>
    <dc:date>2025-10-08T06:57:25Z</dc:date>
    <item>
      <title>Custom Information in OOB forms</title>
      <link>https://community.hubspot.com/t5/Lead-Capture-Tools/Custom-Information-in-OOB-forms/m-p/1209647#M13265</link>
      <description>&lt;P data-start="246" data-end="260"&gt;Hi everyone,&lt;/P&gt;
&lt;P data-start="262" data-end="449"&gt;I’m currently working on customizing a HubSpot form (OOB — out-of-the-box) and would like to display some additional information either &lt;STRONG data-start="409" data-end="415"&gt;on&lt;/STRONG&gt;, or &lt;STRONG data-start="420" data-end="446"&gt;before the Submit button&lt;/STRONG&gt;.&lt;/P&gt;
&lt;P data-start="451" data-end="684"&gt;Additionally, I’d like to know if it’s possible to &lt;STRONG data-start="502" data-end="560"&gt;control or customize the Submit button’s functionality&lt;/STRONG&gt; — for example, running custom validation, triggering scripts, or modifying its behavior before the form actually submits.&lt;/P&gt;
&lt;P data-start="686" data-end="880"&gt;Has anyone implemented something similar or can share the best approach to achieve this within HubSpot’s form framework (either through the embed code, custom HTML/JS, or HubSpot’s form APIs)?&lt;/P&gt;</description>
      <pubDate>Wed, 08 Oct 2025 06:55:20 GMT</pubDate>
      <guid>https://community.hubspot.com/t5/Lead-Capture-Tools/Custom-Information-in-OOB-forms/m-p/1209647#M13265</guid>
      <dc:creator>hafizusama</dc:creator>
      <dc:date>2025-10-08T06:55:20Z</dc:date>
    </item>
    <item>
      <title>Re: Custom Information in OOB forms</title>
      <link>https://community.hubspot.com/t5/Lead-Capture-Tools/Custom-Information-in-OOB-forms/m-p/1209648#M13266</link>
      <description>&lt;P&gt;Hi&amp;nbsp;&lt;a href="https://community.hubspot.com/t5/user/viewprofilepage/user-id/724427"&gt;@hafizusama&lt;/a&gt;,&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;I believe this is the documentation you're looking for &lt;span class="lia-unicode-emoji" title=":slightly_smiling_face:"&gt;🙂&lt;/span&gt;&amp;nbsp;&lt;A href="https://developers.hubspot.com/docs/cms/start-building/features/forms/legacy-forms#embed-code-callbacks" target="_blank"&gt;https://developers.hubspot.com/docs/cms/start-building/features/forms/legacy-forms#embed-code-callbacks&lt;/A&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;Best regards!&lt;/P&gt;</description>
      <pubDate>Wed, 08 Oct 2025 06:57:25 GMT</pubDate>
      <guid>https://community.hubspot.com/t5/Lead-Capture-Tools/Custom-Information-in-OOB-forms/m-p/1209648#M13266</guid>
      <dc:creator>karstenkoehler</dc:creator>
      <dc:date>2025-10-08T06:57:25Z</dc:date>
    </item>
    <item>
      <title>Re: Custom Information in OOB forms</title>
      <link>https://community.hubspot.com/t5/Lead-Capture-Tools/Custom-Information-in-OOB-forms/m-p/1216614#M13320</link>
      <description>&lt;P data-start="175" data-end="194"&gt;Hi &lt;a href="https://community.hubspot.com/t5/user/viewprofilepage/user-id/111325"&gt;@karstenkoehler&lt;/a&gt;,&lt;/P&gt;
&lt;P data-start="175" data-end="194"&gt;&amp;nbsp;&lt;/P&gt;
&lt;P data-start="196" data-end="254"&gt;Thank you so much for sharing the reference documentation.&lt;/P&gt;
&lt;P data-start="196" data-end="254"&gt;&amp;nbsp;&lt;/P&gt;
&lt;P data-start="256" data-end="451"&gt;I’ve been working on this for the past few days and my goal is to style a specific field/property within a HubSpot form — specifically, I’d like to display a dropdown field as selectable “pills.”&lt;/P&gt;
&lt;P data-start="256" data-end="451"&gt;&amp;nbsp;&lt;/P&gt;
&lt;P data-start="453" data-end="489"&gt;Here’s the code I’m currently using:&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;DIV class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary"&gt;
&lt;DIV class="overflow-y-auto p-4" dir="ltr"&gt;&lt;CODE class="whitespace-pre! language-html"&gt;&lt;SPAN&gt;&lt;SPAN class="hljs-tag"&gt;&amp;lt;&lt;SPAN class="hljs-name"&gt;script&lt;/SPAN&gt;&lt;/SPAN&gt;
  &lt;SPAN class="hljs-attr"&gt;charset&lt;/SPAN&gt;=&lt;SPAN class="hljs-string"&gt;"utf-8"&lt;/SPAN&gt;
  &lt;SPAN class="hljs-attr"&gt;type&lt;/SPAN&gt;=&lt;SPAN class="hljs-string"&gt;"text/javascript"&lt;/SPAN&gt;
  &lt;SPAN class="hljs-attr"&gt;src&lt;/SPAN&gt;=&lt;SPAN class="hljs-string"&gt;"//js.hsforms.net/forms/embed/v2.js"&lt;/SPAN&gt;
&amp;gt;&lt;SPAN class="hljs-tag"&gt;&amp;lt;/&lt;SPAN class="hljs-name"&gt;script&lt;/SPAN&gt;&lt;/SPAN&gt;&amp;gt;
&lt;SPAN class="hljs-tag"&gt;&amp;lt;&lt;SPAN class="hljs-name"&gt;script&lt;/SPAN&gt;&lt;/SPAN&gt;&amp;gt;&lt;SPAN class="language-javascript"&gt;
  hbspt.&lt;/SPAN&gt;&lt;SPAN class="hljs-property"&gt;forms&lt;/SPAN&gt;.&lt;SPAN class="hljs-title function_"&gt;create&lt;/SPAN&gt;({
    &lt;SPAN class="hljs-attr"&gt;portalId&lt;/SPAN&gt;: &lt;SPAN class="hljs-string"&gt;''&lt;/SPAN&gt;,
    &lt;SPAN class="hljs-attr"&gt;formId&lt;/SPAN&gt;: &lt;SPAN class="hljs-string"&gt;''&lt;/SPAN&gt;,
    &lt;SPAN class="hljs-attr"&gt;onFormReady&lt;/SPAN&gt;: &lt;SPAN class="hljs-keyword"&gt;function&lt;/SPAN&gt; (&lt;SPAN class="hljs-params"&gt;$form&lt;/SPAN&gt;) {
      &lt;SPAN class="hljs-comment"&gt;// Custom script here&lt;/SPAN&gt;
      &lt;SPAN class="hljs-variable language_"&gt;console&lt;/SPAN&gt;.&lt;SPAN class="hljs-title function_"&gt;log&lt;/SPAN&gt;(&lt;SPAN class="hljs-string"&gt;'Yes from form.'&lt;/SPAN&gt;);
    },
  });
&lt;SPAN class="hljs-tag"&gt;&amp;lt;/&lt;SPAN class="hljs-name"&gt;script&lt;/SPAN&gt;&lt;/SPAN&gt;&amp;gt;&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/DIV&gt;
&lt;DIV class="overflow-y-auto p-4" dir="ltr"&gt;&lt;CODE class="whitespace-pre! language-html"&gt;&lt;/CODE&gt;&lt;/DIV&gt;
&lt;/DIV&gt;
&lt;P data-start="799" data-end="823"&gt;&lt;STRONG data-start="799" data-end="823"&gt;Steps I’ve followed:&lt;/STRONG&gt;&lt;/P&gt;
&lt;OL data-start="824" data-end="1054"&gt;
&lt;LI data-start="824" data-end="855"&gt;
&lt;P data-start="827" data-end="855"&gt;Created a multi-step form.&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-start="856" data-end="885"&gt;
&lt;P data-start="859" data-end="885"&gt;Created a custom module.&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-start="886" data-end="955"&gt;
&lt;P data-start="889" data-end="955"&gt;Embedded the form within the custom module using the above code.&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-start="956" data-end="1054"&gt;
&lt;P data-start="959" data-end="1054"&gt;Noticed that the &lt;CODE data-start="976" data-end="989"&gt;onFormReady&lt;/CODE&gt; callback doesn’t seem to fire — the console log isn’t appearing.&lt;/P&gt;
&lt;/LI&gt;
&lt;/OL&gt;
&lt;P data-start="1056" data-end="1202"&gt;My challenge is that I can apply CSS to the dropdown using class selectors, but this also affects other dropdowns globally, which I want to avoid.&lt;/P&gt;
&lt;P data-start="1204" data-end="1455"&gt;&amp;nbsp;&lt;/P&gt;
&lt;P data-start="1204" data-end="1455"&gt;After reviewing the documentation, I attempted to use the &lt;CODE data-start="1262" data-end="1275"&gt;onFormReady&lt;/CODE&gt; callback to isolate and style the specific field, but it doesn’t seem to be executing. Additionally, in the module’s JS file, element selection by ID is returning an empty result.&lt;/P&gt;
&lt;P data-start="1457" data-end="1597"&gt;&amp;nbsp;&lt;/P&gt;
&lt;P data-start="1457" data-end="1597"&gt;Is there a recommended way to address this issue or a more reliable method to target and style a specific form field within a custom module?&lt;/P&gt;
&lt;P data-start="1599" data-end="1642"&gt;&amp;nbsp;&lt;/P&gt;
&lt;P data-start="1599" data-end="1642"&gt;Your guidance would be greatly appreciated.&lt;/P&gt;
&lt;P data-start="1644" data-end="1677"&gt;&amp;nbsp;&lt;/P&gt;
&lt;P data-start="1644" data-end="1677"&gt;Thank you in advance,&lt;/P&gt;</description>
      <pubDate>Mon, 27 Oct 2025 11:31:20 GMT</pubDate>
      <guid>https://community.hubspot.com/t5/Lead-Capture-Tools/Custom-Information-in-OOB-forms/m-p/1216614#M13320</guid>
      <dc:creator>hafizusama</dc:creator>
      <dc:date>2025-10-27T11:31:20Z</dc:date>
    </item>
  </channel>
</rss>

