Display template content conditionally

Develop, Build & Integrate CMS Development
1

This is probably an easy one, but I can not figure it out how to hide an element if it has no value:

<h1>{% text "h1" label='Enter H1', value='This is the H1' %}</h1>  

<style>
{% if "h1" is none or "h1" == "" %}
 h1 {
 display: none;
 } 
{% endif %}
</style>

This doesn’t work, H1 never gets “display: none;”.

If I try

{% if h1 is none or h1 == "" %}

instead (no “” around the name), it will hide H1 even if it has a value.

2

a nicer approach of course would be no wrap the element itself in a condition, so it doesn’t get into the markup if it’s empty. However, this doesn’t seem to work, because then it is not possible to set a value for h1 anymore.

3

@Hello @andre9000 - Your HUBL tags are going to be in a dictionary, so you would inspect the data cominng from your tag by accessing “widget_data”. You should combine this with the “export_to_template_context” tag attribute as well.

Shorthand:

{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{{'<h1>'+widget_data.h1.value+'</h1>' if widget_data.h1.value != ""}}

Or, longhand:

{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{% if widget_data.h1.value != '' %}
 <h1>{{widget_data.h1.value}}</h1>
{% endif %}

If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

4

Awesome, works perfectly. Thank you, good to know!