CMS Development

peesen
Contributor

Select field in HubL and show form or meeting module by selection

SOLVE

Hello everyone

 

I have a HubL Template where i need to show a form or a meeting based on a selection. Now my quesiton. Is it possible to add a select field by hubl and depending on what i chose in the select field, i show the meeting or the form field on the template (backend & frontend).

 

It should look something like this:

 

{% selectfield with two values %}

{% if select = "form" %}
{% form "event-form" %}
{% else %}
{% module "meetings" path="@hubspot/meetings" %}
{% endif %}

 

Thank you so much for your help!

0 Upvotes
2 Accepted solutions
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Select field in HubL and show form or meeting module by selection

SOLVE

Hi @peesen

sorry for the belated answer. 

change the code as following:

{% if widget.data.form_style.value == 'form'%}
<p>
  Das ist eine Form-Element
    </p>
{% elif widget.data.form_style.value == 'meeting' %}
<p>
  Das ist ein MEeeting-Element
    </p>
{% endif %}

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Select field in HubL and show form or meeting module by selection

SOLVE

Hi @peesen

thank you for the reminder. I wasn't around a PC for a few weeks.

 

I've tried this code in a few random templates and it works(outside of dnd_areas) for me. 

 

Bildschirmfoto 2021-04-13 um 22.42.14.png

If you see this - no worries - hover this element(after a reload if this isn't visible or clickable) and select "edit module". This will open up the meeting settings in the left sidebar. 

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

8 Replies 8
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Select field in HubL and show form or meeting module by selection

SOLVE

Hi @peesen

yes - it's possible and you're quite near the right solution. 

You have two options(maybe more but those two come to my mind)

  1. create a custom module with 3 things.
    1. select option(optional: display as radio buttons for a better user experience)
    2. form function
    3. meeting function
  2. go the "export_to_template" way (nearly the same but personaly I would go the first one since it's a bit more flexible)

 

For the first one the source code of the custom module should look like this:

{% if module.form_selector == 'meeting'%}
						{{ module.meeting_field }}
						{% elif module.form_selector == 'form' %}
						{% form
	form_to_use="{{ module.form.form_id }}"
	response_response_type="{{ module.form.response_type }}"
	response_message="{{ module.form.message }}"
	response_redirect_id="{{ module.form.redirect_id }}"
	response_redirect_url="{{module.form.redirect_url}}"
	gotowebinar_webinar_key="{{ module.form.gotowebinar_webinar_key }}"
%}
						{% endif %}

first - it's without any grid styling so if you'd like modify it with all of your custom classes

second modify it to your namings/grouping. This code above is for this "layout"

Bildschirmfoto 2021-03-24 um 21.03.43.png

if you group the elements, you'll need to change the code. 

 

 

For the "export_to_template" way it's nearly the same (but as mentioned not as flexbile as the first way)

The code should look like this:

... 
YOUR Template
...

{% choice "form_style" label='Choose form styling', value='form', choices='form, meeting', no_wrapper=True, export_to_template_context=True %}
...
{% if widget.data.form_style == 'form'%}
{% module "form" path="@hubspot/form" %}
{% elif widget.data.form_style == 'meeting' %}
{% module "meetings" path="@hubspot/meetings" %}
{% endif %}
...

If you want to go this way I recommend to place the {% choice %}-part right above the if-loop. By doing so it should be visible right above the form/meeting module in the content-tab of the particular page. Also consider that this solution works only for one form/meeting on one page. The first one works per module. So if you would place - let's say - 3 custom modules(first solution) right next to each other you could decide per module what should be displayed. If you use the second one you can control(without further modifications) the same 3 form/meeting modules. So you would have 3 forms or 3 meetings next to each other. 

 

 

best, 

Anton

Anton Bujanowski Signature
peesen
Contributor

Select field in HubL and show form or meeting module by selection

SOLVE

@AntonHello Anton, thank you so much for your help. I used the second option in my HubL-Template. I get the select field in the template and the possibility to select form or meeting but the if/else is not working and showing no content based on the selection. I also tried this a little minified:

 

{% if widget.data.form_style == 'form'%}
<p>
  Das ist eine Form-Element
    </p>
{% elif widget.data.form_style == 'meeting' %}
<p>
  Das ist ein MEeeting-Element
    </p>
{% endif %}

 

Is it something im doing wrong? Thank you so much for all your help!

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Select field in HubL and show form or meeting module by selection

SOLVE

Hi @peesen

sorry for the belated answer. 

change the code as following:

{% if widget.data.form_style.value == 'form'%}
<p>
  Das ist eine Form-Element
    </p>
{% elif widget.data.form_style.value == 'meeting' %}
<p>
  Das ist ein MEeeting-Element
    </p>
{% endif %}

 

best, 

Anton

Anton Bujanowski Signature
peesen
Contributor

Select field in HubL and show form or meeting module by selection

SOLVE

Hey Anton, i now could make the script work. It works with widget_data and not widget.data. But now i have another problem. Depending on the choice i load a form or a meeting element (module). But when i switch from form which is the default value to meeting. The meeting-module is not loading as expected. I cannot see the module in the content sidebar and when i click on it inside the editor i can not select a meeting. Is this even possible?

{% choice "form_style" label='Select a Sidebar-Element', value='Form', choices='Form, Meeting', export_to_template_context=True %}
{% if widget_data.form_style.value == 'Form' %}
    {% form "event-form" %}
{% elif widget_data.form_style.value == 'Meeting' %}
    {% module "meetings" path="@hubspot/meetings" %}
{% endif %}
0 Upvotes
peesen
Contributor

Select field in HubL and show form or meeting module by selection

SOLVE

@AntonHey Anton, thank you so much for all your help so for. I posted the question above two weeks ago. Do you know if its possible to solve this problem or do i need to create two different template files (one for meeting and one for form) to give the user the opotunity to create the same view but one with the meeting module and one with the form module. Thank you so much and have a great day!

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Select field in HubL and show form or meeting module by selection

SOLVE

Hi @peesen

thank you for the reminder. I wasn't around a PC for a few weeks.

 

I've tried this code in a few random templates and it works(outside of dnd_areas) for me. 

 

Bildschirmfoto 2021-04-13 um 22.42.14.png

If you see this - no worries - hover this element(after a reload if this isn't visible or clickable) and select "edit module". This will open up the meeting settings in the left sidebar. 

 

best, 

Anton

Anton Bujanowski Signature
peesen
Contributor

Select field in HubL and show form or meeting module by selection

SOLVE

Hey @Anton, thank you so much. Now i could finally make this work. Its as you said after you switch the choice field the form or meeting-module is not editable. You need to reload the page and then you can work with the module. This is not perfect but i will mention this workaround to the users. Thank you so much!

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Select field in HubL and show form or meeting module by selection

SOLVE

Hey @peesen ,

Looks like you are moving in the correct direction.  @Anton is pretty good with this stuff and can probably help