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

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

peesen — Wed, 24 Mar 2021 14:10:25 GMT

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!

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

dennisedson — Wed, 24 Mar 2021 18:51:05 GMT

Hey @peesen ,

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

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

Anton — Wed, 24 Mar 2021 20:16:57 GMT

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)

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
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"

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

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

peesen — Thu, 25 Mar 2021 08:44:29 GMT

@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'%} Das ist eine Form-Element {% elif widget.data.form_style == 'meeting' %} Das ist ein MEeeting-Element {% endif %}

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

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

Anton — Fri, 26 Mar 2021 21:09:27 GMT

Hi @peesen,

sorry for the belated answer.

change the code as following:

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

best,

Anton

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

peesen — Wed, 31 Mar 2021 13:38:03 GMT

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 %}

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

peesen — Mon, 12 Apr 2021 13:13:02 GMT

@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!

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

Anton — Tue, 13 Apr 2021 20:57:04 GMT

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.

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

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

peesen — Wed, 14 Apr 2021 08:17:36 GMT

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!