Hallo,
ich habe ein Kontaktformular, welches ein Dropdown-Auswahlfeld beinhaltet (“Thema der Kontaktaufnahme”).
Ich möchte gern, dass bei Auswahl eines bestimmten Themas ein Hinweistext eingeblendet wird (zb. ähnlich wie der Fehlertext, der erscheint, wenn ein Pflichtfeld nicht ausgefüllt ist.
Mir fehlt die Idee, wie ich das umsetzen kann. Kann mir jemand auf die Sprünge helfen?
Danke vorab und Gruß
@Anton, kannst du hier weiterhelfen?
Hi @JFasselt,
erster Gedanke war es ein Text Element zum Formular hinzufügen und mittels Personalization Tokens entsprechende Texte zu zeigen. In der Praxis funktioniert es aber leider nicht.
Zweiter Gedanke war dann die Labels der einzelnen Optionen mit HTML zu bearbeiten damit sie Mehr Informationen anzeigen - funktioniert leider auch nicht.
Die Informationen zu allen Auswahlmöglichkeiten gesammelt in den “Help text” Bereich zu schreiben ist keine Möglichkeit, oder? Wäre am einfachsten, allerdings kann es - je nach Inhalt ziemlich viel werden.
Ansonsten fällt mir nur noch eine code Lösung ein.
Wenn du es statisch(am einfachsten) haben möchtest, kannst du es mit folgendem Code versuchen
<script>
$(document).ready(function() {
$('#selectOption').change(function() {
var selectedOption = $(this).val();
var descriptionContent = '';
if (selectedOption === 'option1') {
descriptionContent = 'Description for Option 1';
} else if (selectedOption === 'option2') {
descriptionContent = 'Description for Option 2';
} else if (selectedOption === 'option3') {
descriptionContent = 'Description for Option 3';
}
// Remove the existing description field, if present
$('#description').remove();
// Add the new description field dynamically
var descriptionField = $('<div id="description">' + descriptionContent + '</div>');
$('#selectOption').after(descriptionField);
});
});
</script>
Dieser Code sucht die Dropdownauswahl (“#selectOption”; musst du durch die jeweiligen ID des Dropdowns austauschen) und fügt eine neue Zeile hinzu. Je nach Auswahl (option1, option2…) wird der Inhalt (“Description for Option 1”, “Description for Option 2”…) angezeigt/ausgetauscht.
Wenn du diesen Code statisch verwenden möchtest, kannst du ihn auf der jeweiligen Seite bei Einstellungen/Erweiterte Optionen/Footer-HTML einfügen und die entsprechenden Positionen editieren.
Du kannst den Code auch zu einem sogenannten custom Modul machen. Dies wird dir die Möglichkeit geben, (nahezu) alles direkt beim Seitenbau zu editieren und nicht ständig mit dem Code-Editor zu hantieren.
Für ein custom Modul öffne den Design-Manager (oder Design-Tools wie es neuerdings heißt) den du über Marketing-> Dateien und Tempaltes → Design-Tools findest, öffne dein Theme Ordner (optional), erstelle mittels Rechtsklick auf den modules Ordner oder mittels Datei/Neue Datei in der linken Sidebar ein neue Datei. Wähle im Pop-up Fenster “Modul” aus, fülle die einzelnen Optionen aus(Hinweis: lokale Module werden pro verwendung eingestellt; gloable Module haben immer den selben Inhalt. Wenn du an einer Stelle den Inhalt änderst, änderst du ihn auf jeder Seite bei dem das Modul zum Einsatz kommt).
Füge über die rechte Sidebar folgende Felder hinzu:
Gruppiere Option und Beschreibung mittels Aktion/Gruppieren
und jetzt das wichtigste: Aktiviere die Repeater Option(ganz unten) in dieser Gruppe.
Für das folgende Beispiel habe ich die Gruppe “Options” genannt.
Füge den Code von oben in den HTML+Hubl Bereich (Mitte) ein und ändere ihn wie folgt
{% require_js %}
<script>
$(document).ready(function() {
$('#{{ module.select_id }}').change(function() {
var selectedOption = $(this).val();
var descriptionContent = '';
{% for item in module.options %}
{% if loop.first %}
if (selectedOption === '{{ item.option }}') {
descriptionContent = '{{ item.beschreibung }}';
}
{% else %}
else if (selectedOption === '{{ item.option }}') {
descriptionContent = '{{ item.beschreibung}}';
}
{% endif %}
{% endfor %}
// Remove the existing description field, if present
$('#description').remove();
// Add the new description field dynamically
var descriptionField = $('<div id="description">' + descriptionContent + '</div>');
$('#{{ module.select_id }}').after(descriptionField);
});
});
</script>
{% end_require_js %}
Speichere dieses Modul und füge es entweder beim Aufbau der Seite(n) an eine beliebige Position ein (ich empfehle es immer als letztes Element der Seite einzufügen.
Die ID ist - in den meisten Fällen der “interne Name” mit dem “-input” Zusatz.
In deinem Fall wäre es vermutlich:
thema_der_kontaktaufnahme-input.
Du kannst es aber auch überprüfen in dem du die Seite mit dem Formular anschaust und dann mittels Rechtsklick das Dropdown-Feld untersuchst.
Mein Test Property war Codeseitig so aufgebaut:
Du musst nur noch die einzelnen Optionen und Beschreibungen eingeben und sichern.
hoffe das hilft.
Grüße
Anton
Hallo @Anton .
Vielen lieben Dank für die schnelle und ausführliche Anleitung. Leider übersteigt die Umsetzung meinen Horizont. Ich hatte gehofft, dass die Lösung einigermaßen “einfach” umzusetzen sei. Hinzu kommt noch die Herausforderung, dass dieses Formular auf über 200 Seiten eingebunden ist.
Ich danke dir nochmals für dein Engagement und @karstenkoehler für die Vernetzung, habe meine Anforderung aber nun an unsere Entwicklung weitergegeben.
Lieben Gruß
Jörg
