Das Kontaktformular ermöglicht Ihren Kunden mit Ihnen in Kontakt zu treten und Fragen zu stellen. Standardmäßig enthält Shopify ein vorgefertigtes Kontaktformular nur die grundlegenden Felder wie Name, E-Mail-Adresse, Telefon und Nachricht. Wenn jedoch spezifische Informationen von Kunden abgefragt werden sollen, können eigene Felder zum Kontaktformular hinzufügt werden.
Felder im Kontaktformular hinzufügen
Es ist wichtig zu beachten, dass diese Anleitung auf einem Standard-Shopify-Theme basiert. Wenn ein benutzerdefiniertes Theme oder ein Drittanbieter-Theme verwendet wird, können sich die genauen Schritte und Dateinamen unterscheiden. In diesen Fall ist es empfehlenswert den Entwickler des jeweiligen Themes zu kontaktieren oder in die Dokumentation des Themes zu schauen.
Um eigene Felder dem Kontaktformular hinzuzufügen, loggen Sie sich in Shopify im Adminbereich ein und navigieren Sie zu den Themes über „Vertriebskanäle > Onlineshop > Themes„.
Klicken Sie beim gewünschten Theme auf die drei kleinen Punkte und wählen Sie dann „Code bearbeiten“ aus dem Dropdown-Menü aus. Im Code-Editor suchen Sie nach der Datei „contact.liquid“ oder „contact-form.liquid“. In den meisten Fällen befindet sich diese Datei unter „Abschnitte“ oder „Snippets„.
Theme – Code anpassen
Öffnen Sie die „contact.liquid“-Datei im Code-Editor und suchen Sie nach dem <form>-Tag, der das Kontaktformular umgibt.
{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
Unterhalb dieser Zeile befindet sich der Inhalt des Formulars bis hin zur Zeile:
{% endform %}
Fügen Sie das gewünschte Feld wie folgt zwischen den oben genannten Zeilen ein und orientieren Sie sich an bereits vorhandenen Feldern bzgl. des HTML Aufbaus.
Hier ein Beispiel für ein Feld (einzeiliges Textfeld) im Dawn Theme:
<div class="field">
<input
class="field__input"
type="text"
id="ContactForm-Feldbezeichnung"
name="contact[Feldbezeichnung]"
value=""
placeholder="Feldbezeichnnung"
>
<label class="field__label" for="ContactForm-Feldbezeichnung">Feldbezeichnung</label>
</div>
Ersetzen Sie dabei „Feldbezeichnung“ mit dem gewünschten Namen für das eigene Feld. Man kann auch den input-Tag anpassen, um ein anderes Eingabeformat wie E-Mail oder Dropdown-Menü zu verwenden.
Speichern Sie nach dem Hinzufügen die Änderungen.
Das neue Kontaktformular
Das Hinzufügen von zusätzlichen Feldern im Kontaktformular ist praktisch. Insbesondere mit Kenntnissen von HTML und Liquid hat man hier viele Möglichkeiten das Standard-Kontaktformular von Shopify aufzuwerten. Ohne Kenntnisse sollte vor den Anpassungen am besten ein Backup gemacht werden, um auf Nummer sicher zu gehen. Andernfalls kann relativ schnell das Kontaktformular überarbeitet werden.
