Insert form as hidden module

Developer Support CMS Development
1

Hi,

Does anyone know if it is possible to insert and render a HubSpot form as a hidden module in a template?

I know it can be added as a static module but we have other fields as hidden and would be nice to group them together.

Any help is greatly appreciated.

2

Hey @RAnderson91,

can you please provide some more context of what you’re trying do achieve?

3

Hi @Anton,

We’ve created a blog called Datasheets, where we currently have a hero image and summary set up as hidden modules which we can output no problem.

I’ve tried adding a form as a hidden module like so:

{% module “form” path=“@hubspot/form” label=“Form”, export_to_template_context=True %}

I can view all the data by using {{ widget_data.form }} which returns the following:

{form_follow_ups_workflow_id=, parent_widget_container=null, label=Form, smart_type=NOT_SMART, type=module, title=, export_to_template_context=true, follow_up_type_simple=false, field_types={follow_up_type_automation=boolean, sfdc_campaign=salesforcecampaign, form=form, notifications_are_overridden=boolean, notifications_override_email_addresses=email, form_follow_ups_workflow_id=workflow, simple_email_for_live_id=followupemail, title=text, follow_up_type_simple=boolean}, path=@hubspot/form, definition_id=null, module_id=1155238, follow_up_type_automation=false, sfdc_campaign=, form={form_id=, response_type=redirect, message=Thanks for submitting the form., redirect_id=null, redirect_url=http://www.google.com}, notifications_are_overridden=false, notifications_override_email_addresses=, simple_email_for_live_id=, extra_classes=widget-type-form, wrap_field_tag=div, smart_objects=[]}

However, when I try something like {{ widget_data.form.form_id }} I get back nothing.

I could be missing something really obvious as I’m not familiar with how hidden modules work.

Thanks,

Ryan

4

Hey @RAnderson91,
thanks for the code.

Okay - so “hidden modules” might be a wrong term here, as most people (including me) would thing of this doc first hand.

The export_to_template_context function is most commonly used for modifying the template, but technically you could use it to hide/show modules & sections.

I think there are two things to look at.

  1. The export_to_template_context function will prevent the module from rendering on the actual page as it’s provides the module data to the template without rendering the actual module.
  2. the form module doesn’t have a form_id, so the module is not getting rendered

This means:

{% module "form_module" 
 path="@hubspot/form" 
	label="Form",
	export_to_template_context=true,
	form={
	 "form_id":"12345-65486-6484621-456812"
		}
%}
{{ widget_data.form_module|pprint }}

will show in the template:

(SizeLimitingPyMap: {definition_id=null, export_to_template_context=true, extra_classes=widget-type-form, field_types={follow_up_type_automation=boolean, sfdc_campaign=salesforcecampaign, form=form, notifications_are_overridden=boolean, notifications_override_email_addresses=email, form_follow_ups_workflow_id=workflow, simple_email_for_live_id=followupemail, title=text, follow_up_type_simple=boolean}, follow_up_type_automation=false, follow_up_type_simple=false, form={form_id=12345-65486-6484621-456812, response_type=redirect, message=Thanks for submitting the form., redirect_id=null, redirect_url=http://www.google.com}, form_follow_ups_workflow_id=, label=Form, module_id=1155238, notifications_are_overridden=false, notifications_override_email_addresses=, parent_widget_container=null, path=@hubspot/form, sfdc_campaign=, simple_email_for_live_id=, smart_objects=[], smart_type=NOT_SMART, title=, type=module, wrap_field_tag=div})

If you want to display the form somewhere in the template, the code would look like this:

{% module 'custom_module' 
 path="path/to/custom/module" 
 content="
 form={
 "form_id"= widget_data.form_module.form.form_id 
 }
"%}

Personally I think this will get out of hand and hard to manage quite fast as you could use the actual form module directly or implement a form function in a custom module.

If you like to stick to export_to_template_context and toggle the visibility of a module I’d recommend to do it like this:

{% module "show_form" path="@hubspot/choice", label="Display form on page", value="true, false" export_to_template_context=True %}
...
{% if widget_data.show_form.value == "true"
{% module "form_module" 
 path="@hubspot/form" 
	label="Form",
	form={
	 "form_id":"12345-65486-6484621-456812"
		}
%}
{% endif %}

In a custom module it’s quite similar and a bit better in terms of UX imo.

You can either add a boolean, choice-field or simply nothing :wink:

The custom module code would look like this:

{% if module.show_form %} {# boolean version #}
{% form
	form_to_use="{{ module.form_field.form_id }}"
	response_response_type="{{ module.form_field.response_type }}"
	response_message="{{ module.form_field.message }}"
	response_redirect_id="{{ module.form_field.redirect_id }}"
	response_redirect_url="{{module.form_field.redirect_url}}"
	gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"
%}
{% endif %}

{% if module.show_form == "true" %} {# choice field version #}
{% form
	form_to_use="{{ module.form_field.form_id }}"
	response_response_type="{{ module.form_field.response_type }}"
	response_message="{{ module.form_field.message }}"
	response_redirect_id="{{ module.form_field.redirect_id }}"
	response_redirect_url="{{module.form_field.redirect_url}}"
	gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"
%}
{% endif %}

{% if module.form_field.form_id %} {# will render the form as soon as a form_id is present #}
{% form
	form_to_use="{{ module.form_field.form_id }}"
	response_response_type="{{ module.form_field.response_type }}"
	response_message="{{ module.form_field.message }}"
	response_redirect_id="{{ module.form_field.redirect_id }}"
	response_redirect_url="{{module.form_field.redirect_url}}"
	gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"
%}
{% endif %}

best,

Anton

5

Hi @Anton,

That makes sense, thanks for the detailed response.

I’m relatively new to HubSpot development so referred to it as a hidden module because that’s how they get labelled in the page editor, will know in the future to refer to it as something else.

On a slightly different topic, is it possible to pull through the hero image & summary to a recent posts module? Or even a blog listing template?

Thanks,

Ryan

6

Hey @RAnderson91,

no worries. :slightly_smiling_face:

Do you mean to display the last/last X post information like headline, featured image, maybe publish date, author and a read more button by
“…pull through the hero image & summary to a recent post module…”?

Quick answer: yes it’s possible

But I’d recommend to either create a custom module and put it into the blog listing template or write a custom code directly into the blog-listing template for this.

The most common solution is using the blog_recent_posts function and a layout like this (it’s a bit on the advanced side but I’ve added some comments that should help you):

{% set posts = blog_recent_posts("default", 1) %} {# Replace the 'your_blog_id' with the actual blog id; 1 is the amount of posts that should be pulled from the blog. As it's set to '1', only 1 post will be pulled #}

...

{% require_css %}
{# you delete the require_css brackets and put this whole CSS part into a dedicated CSS file #}
<style>
 .blog-listing-hero-bg{
	height:66vh;
	width:100%;
	padding:5vh 5vw;
 }

 .blog-listing-hero-content{
	max-width: 1400px; {# Replace it with your default content-width or any other value #}
	margin: 0 auto;
	display:flex;
	flex-direction:column;
	gap:2rem;
 }
</style>
{% end_require_css %}

...

<div class="blog-listing-hero">
 {% for first_post in posts %}
 <div class="blog-listing-hero-bg" style="background-image:url({{ first_post.featured_image }});background-size:cover;background-position:">
	<div class="blog-listing-hero-content">
	 <h1 class="headline">{{ first_post.title }}</h1>
	 {% unless first_post.post_body == null %} {# optional but handy as wrapping elements in an if-/unless-statement like this will reduce DOM rendering for empty elements #}
	 <p class="description">
		{{ first_post.post_body|striptags|truncate(180) }}
	 </p>
	 {% endunless %}
	 <a href="{{ first_post.absolute_url }}" class="btn read-more-btn">
		Read more
	 </a>
	</div>
 </div>
 {% endfor %}
</div>

Best,

Anton

7

Hey @Anton,

Sounds good, appreciate all the help.

Thanks,

Ryan