I have the form field in numerous custom modules in our theme and for some reason, we can only see forms created with the legacy editor. What am I missing for the forms created in the new editor?
I do not see any settings on the form field that allow both form types.
Thanks,
Terry
Hi @tmcmillan99 ,
In HubSpot, the form field used within custom modules or theme modules currently only supports legacy forms.To use drag-and-drop forms created in the new form editor, we recommend using HubSpot’s built-in Form module. This module is available in the page editor’s left panel and fully supports the latest form functionality without requiring custom code.
Hope this helps!
Thanks
Hey @tmcmillan99,
as @SanjayKumar pointed out correctly custom modules currently support only legacy forms - huge bummer but there are ways how you can embed/use the new forms in custom modules.
Something you can do to use the new forms in custom modules is:
- Grab an embed code from the new form builder
- paste it in your custom module
- modify it to your needs and add a text field(not rich-text) to the module for the form id
Example:
the default embed code
<script src="https://js-eu1.hsforms.net/forms/embed/123456789.js" defer></script>
<div class="hs-form-frame" data-region="eu1" data-form-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" data-portal-id="123456789"></div>
becomes this:
{% require_head %}
<script src="https://js-eu1.hsforms.net/forms/embed/{{hub_id}}.js" defer></script>
{% end_require_head %}
<div class="hs-form-frame" data-region="eu1" data-form-id="{{module.form_id_text}}" data-portal-id="{{hub_id}}"></div>
Note that form_id_text is not a form function but a simple text one.
best,
Anton
@Anton @SanjayKumar Thanks for the replies and additional information. That’s what I was looking for. I was wondering how theme creators were suppose to handle that scenario with their custom modules. Unless I missed it, Hubspot doesn’t really address that with the new form editor.