LP: Unterschiedliche Inhalte je nach Interesse

[Dennis-DWFB]

Hi zusammen,

ist es auf HubSpot Landing Pages möglich, folgendes Szenario umzusetzen:

Es gibt insgesamt 4 Themenfelder des Unternehmens. Für 3 Themenfelder soll es die direkte Anzeige des Ansprechpartners geben; für 1 Themenfeld soll ein Formular erscheinen.

Also ungefähr so, als ob man ein Formular verschachtelt und dann sagt "Wenn dieser Wert gleich A ist, zeig dieses weitere Feld A". Nur dass eben nur in 1 Falle überhaupt ein Formular angezeigt werden soll.

Klingt wahrscheinlich verwirrender als ich es eigemtlich meine. Vielleicht hat ja trotzdem jemand eine Idee 😉

Wie immer vielen Dank vorab!

Dennis

[Anton]

Hi @Dennis-DWFB, 

ich würde es mit einem Custom Modul lösen, da du bei Custom Modulen Smart-rules anwenden kannst. 

Ein ganz simples Custom Modul für Formular wäre so aufgebaut:

1. neues Modul erstellen
2. Formular Funktion zum Modul hinzufügen
3. Funktion Snippet in den HTML+Hubl bereich copy/pasten
4. Custom Modul auf der Seite/im Template einbauen
5. Smart-Rules erstellen
6. fertig

Die Smart-Rules könntest du anhand von Listenzugehörigkeiten steuern und die Kontakte mittels Workflow den entsprechenden Listen zuordnen.

Hoffe, das hilft

VG

Anton

[Dennis-DWFB]

Hi @Anton ,

sehr cool, danke für dein individuelles Feedback! Aber: Mit Smart Rules werden wir hier nicht weit kommen, da die Funktion bereits für jeden Website-Besucher greifen soll.

Ich liebäugel gerade ein wenig mit der Akkordeon-Funktion, weiß aber (als Nicht-Programmierer) nicht wie sehr sich die einzelnen Reiter individualisieren lassen bzw. ob ich dann in 1 Reiter ein Formular anzeigen lassen könnte und in den anderen 3 Reitern Ansprechpartner mit Bild und Kontaktdaten. Hast du da Erfahrungen bei Akkordeons?

https://designers.hubspot.com/code-gallery/entry/founders/esparkbizhubspot-Tabs-to-Accordion-Module

Edit: Hab's gerade mal mit nem kostenlosen Akkordeon aus dem Marketplace versucht. Funktioniert. Ich kann jeden Reiter individualisieren und auch in 1 Reiter ein Formular einbinden. Freue mich aber natürlich weiterhin auf etwaige andere Ideen.

[Anton · Accepted solution]

Hi @Dennis-DWFB, 

bin persönlich kein großer Freund von Akkordeons, da sie aus meist aus Barrierefreiheitsgründen eher schwierig sind. (Ein weiterer Klick für den User; Man muss die einzelnen Reiter mit "Tab" und "Leertaste" ansteuern können etc). Das Beispiel aus der Code-Gallery ist - von Werk aus - nicht auf eine Tastatur Navigation ausgelegt.

Bei Bootstrap gibt es ein sehr gutes Akkordeon, welches man natürlich an HubSpot anpassen kann. 

Das wäre eine angepasste Version:

Hier der Code:

<div class="accordion" id="{{ module.akkordeon_name|lower|cut(' ') }}">
  {% for single_acc in module.akkordeon %}
		<div class="accordion-item">
    <h2 class="accordion-header" id="{{ single_acc.headline|lower|cut(' ') }}">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ single_acc.headline|lower|cut(' ') }}" aria-expanded="true" aria-controls="{{ single_acc.headline|lower|cut(' ') }}">
        {{ single_acc.headline }}
      </button>
    </h2>
    <div id="{{ single_acc.headline|lower|cut(' ') }}" class="accordion-collapse collapse show" aria-labelledby="{{ single_acc.headline|lower|cut(' ') }}" data-bs-parent="#{{ single_acc.akkordeon_name|lower|cut(' ') }}">
      <div class="accordion-body">
        {{ single_acc.content }}
      </div>
    </div>
  </div>
{% endfor %}
</div>

Bitte beachte, das hier noch die komplette CSS und Javascripts fehlen, die für die Funktionalität zuständig sind. 

Den Content kann man natürlich individuell ausbauen. Beispielsweise mit einem sogeannten "Choise"(if-statement). Wie das Aussehen kann siehst du hier:

Code:

<div class="accordion" id="{{ module.akkordeon_name|lower|cut(' ') }}">
		{% for single_acc in module.akkordeon %}
		<div class="accordion-item">
				<h2 class="accordion-header" id="{{ single_acc.headline|lower|cut(' ') }}">
						<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ single_acc.headline|lower|cut(' ') }}" aria-expanded="true" aria-controls="{{ single_acc.headline|lower|cut(' ') }}">
								{{ single_acc.headline }}
						</button>
				</h2>
				<div id="{{ single_acc.headline|lower|cut(' ') }}" class="accordion-collapse collapse show" aria-labelledby="{{ single_acc.headline|lower|cut(' ') }}" data-bs-parent="#{{ single_acc.akkordeon_name|lower|cut(' ') }}">
						<div class="accordion-body">
								{% if single_acc.content_typ == "text" %}
								{{ single_acc.content }}
								{% elif single_acc.content_typ == "form" %}
								{% form
		              form_to_use="{{ single_acc.form_select.form_id }}"
		              response_response_type="{{ single_acc.form_select.response_type }}"
		              response_message="{{ single_acc.form_select.message }}"
		              response_redirect_id="{{ single_acc.form_select.redirect_id }}"
		              response_redirect_url="{{single_acc.form_select.redirect_url}}"
		              gotowebinar_webinar_key="{{ single_acc.form_select.gotowebinar_webinar_key }}"
	              %}
								{% elif single_acc.content_typ == "image" %}
								{% if single_acc.image_field.src %}
				          {% set sizeAttrs = 'width="{{ single_acc.image_field.width }}" height="{{ single_acc.image_field.height }}"' %}
				          {% if single_acc.image_field.size_type == 'auto' %}
					          {% set sizeAttrs = 'width="{{ single_acc.image_field.width }}" height="{{ single_acc.image_field.height }}" style="max-width: 100%; height: auto;"' %}
				          {% elif single_acc.image_field.size_type == 'auto_custom_max' %}
					          {% set sizeAttrs = 'width="{{ single_acc.image_field.max_width }}" height="{{ single_acc.image_field.max_height }}" style="max-width: 100%; height: auto;"' %}
				          {% endif %}
				          {% set loadingAttr = single_acc.image_field.loading != 'disabled' ? 'loading="{{ single_acc.image_field.loading }}"' : '' %}
		                <img src="{{ single_acc.image_field.src }}" alt="{{ single_acc.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
	                {% endif %}
								{% endif %}
						</div>
				</div>
		</div>
		{% endfor %}
</div>

Den Content bereich (accordion-body) kannst du natürlich noch nach Bedarf weiter ausbauen. Allerdings sind Akkordeons hauptsächlich für (lange) Texte gedacht. 

VG

Anton

[Dennis-DWFB]

Mega @Anton , danke für deine Mühe. Schauen wir uns an!

[MiaSrebrnjak]

Hi @Dennis-DWFB,

danke für die Frage! 

Lass uns die CMS-Experten fragen, ob sie weiterhelfen können:

hi @Anton, @Oezcan, @StefanWendt, habt ihr eine Idee, wie man sowas umsetzen könnte? Danke!  🙂

Liebe Grüße

Mia, Community Team