Kontaktformular

Ausgewählte Links

1. Company XYZ-Dokumentation zu Header-Einstellungen
2. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
3. Company XYZ-Dokumentation zu Farbeinstellungen
4. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
5. Shopify-Dokumentation zu Abschnitten und Blöcken

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie diesen Block, um Kundenmeldungen in einem klaren, markengerechten Layout zu erfassen. Sie können das Formular mit optionalem Überschriftinhalt einleiten, den Stil der Absende-Schaltfläche anpassen und fein abstimmen, wie der Block auf Desktop und Mobile angezeigt wird. Einen breiteren Überblick darüber, wie Blöcke im Theme-Editor funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Die Grundeinstellungen prägen den wichtigsten Call-to-Action des Formulars. Beginnen Sie hier, wenn der Block präsenter wirken oder auf kleineren Bildschirmen leichter zu verwenden sein soll.

1. Wählen Sie einen Schaltflächenstil, der zur Seite passt. Gefüllte Stile funktionieren in der Regel am besten, wenn das Senden einer Nachricht die Hauptaktion ist, während einfache Stile leichter wirken, wenn das Formular neben anderem Inhalt steht.
2. Aktivieren Sie eine mobile Schaltfläche mit voller Breite, wenn die Bedienbarkeit auf dem Smartphone wichtig ist. Dadurch lässt sich die Absende-Aktion in engeren Layouts leichter erkennen und antippen.

Tipp

Wenn dieser Block der Hauptzweck der Seite ist, verwenden Sie einen stärker hervorgehobenen Schaltflächenstil und die Option für die mobile Vollbreite, damit der Abschluss unkomplizierter wirkt.

Header-Einstellungen

Header-Einstellungen helfen Ihnen, den Zweck des Formulars zu erklären und dem Block eine klarere Struktur zu geben. Sie sind optional, können die Seite aber übersichtlicher und leichter erfassbar machen. Siehe Header-Einstellungen für das gemeinsame Header-Muster.

1. Fügen Sie eine Überschrift und eine Unterüberschrift hinzu, um Besuchern mitzuteilen, wofür das Formular gedacht ist, worauf sie sich beziehen können oder welche Antwort sie erwarten sollten.
2. Verwenden Sie die Beschriftung und das Symbol sorgfältig, wenn Sie etwas mehr Persönlichkeit oder Hervorhebung wünschen. In formelleren Layouts ist ein einfacher Header nur mit Text oft die klarere Wahl.
3. Legen Sie den Überschriftentyp so fest, dass er zur Seitenstruktur passt, damit der Block integriert wirkt statt mit dem Hauptseitentitel zu konkurrieren.
4. Richten Sie den Text passend zum Layout aus. Linksbündige Ausrichtung ist normalerweise am leichtesten zu lesen, während zentrierter Text in eher werblichen oder minimalistischen Designs gut funktionieren kann.

Vermeiden Sie es hier, die oberste Überschriftenebene der Seite zu verwenden, es sei denn, dieser Block soll den Hauptseitentitel tragen.

Standard-Block-Einstellungen

Blockhintergrund-Einstellungen

Mit diesen Einstellungen können Sie das Formular vor einem Hintergrund aus Farbe, Farbverlauf, Bild oder Video platzieren. Sie sind nützlich, wenn Sie den Block vom umliegenden Inhalt abheben oder in einen stärker markengerechten Bereich verwandeln möchten. Siehe Hintergrundeinstellungen für das gemeinsame Verhalten.

1. Verwenden Sie eine Volltonfarbe oder einen dezenten Farbverlauf, wenn Lesbarkeit Priorität hat. Dies ist in der Regel die sicherste Option für Formulare.
2. Fügen Sie über Bildern oder Videos ein Overlay hinzu, damit der Überschriftenbereich vor unruhigen Medien lesbar bleibt.
3. Legen Sie mobile-spezifische Medien nur bei Bedarf fest, wenn das Desktop-Bild oder -Video auf kleineren Bildschirmen ungünstig beschnitten wird.
4. Verwenden Sie Video-Hintergründe sparsam, damit die Bewegung nicht vom Ausfüllen des Formulars ablenkt.

Achtung

Nachdem Sie ein Hintergrundbild, einen Farbverlauf oder ein Video hinzugefügt haben, prüfen Sie den Block sowohl auf Desktop als auch auf Mobile, um sicherzustellen, dass Text und Aktionen weiterhin klar hervorstechen.

Farbeinstellungen

Diese Einstellungen überschreiben die Standardfarben für das Symbol und den Textinhalt des Blocks. Verwenden Sie sie, wenn das Formular auf einem benutzerdefinierten Hintergrund steht oder zu einer bestimmten Kampagne oder einem bestimmten Seitenstil passen muss. Siehe Farbeinstellungen für das gemeinsame Farbverhalten.

1. Passen Sie die Farben der Überschrift und des Begleittexts gemeinsam an, damit der Block stimmig wirkt.
2. Verwenden Sie die Symbolfarbe als Akzent und nicht als Hauptquelle der Hervorhebung.
3. Prüfen Sie den Kontrast nach jeder Hintergrundänderung erneut, damit der Text gut lesbar bleibt.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der Block auf Desktop, Mobile oder auf beiden angezeigt wird. Das ist nützlich, wenn Sie ein einfacheres mobiles Layout oder ein gerätespezifisches Kontakt-Erlebnis wünschen. Siehe Sichtbarkeitseinstellungen für das gemeinsame Verhalten.

1. Blenden Sie den Block nur dann auf einem Gerät aus, wenn ein anderes Layout diese Zielgruppe gut abdeckt.
2. Verwenden Sie die Anzeige nur auf Mobile oder nur auf Desktop gezielt, um Unordnung zu reduzieren, nicht um einen wichtigen Kontaktweg zu entfernen.

Nutzungshinweise

1. Halten Sie den Zweck eindeutig. Verwenden Sie die Überschrift und Unterüberschrift, um zu erklären, wofür das Formular gedacht ist und was Besucher senden sollen.
2. Machen Sie die Aktion leicht erkennbar. Wählen Sie einen Schaltflächenstil, der auf der Seite ausreichend hervorsticht, insbesondere auf Mobile.
3. Schützen Sie die Lesbarkeit. Wenn Sie ein Hintergrundbild, einen Farbverlauf oder ein Video hinzufügen, stellen Sie sicher, dass Text und Bedienelemente auf einen Blick klar bleiben.
4. Passen Sie die Seitenhierarchie an. Wählen Sie einen Überschriftentyp, der zum Rest der Seite passt, damit der Block das Layout unterstützt statt mit ihm zu konkurrieren.
5. Setzen Sie die Sichtbarkeit bewusst ein. Blenden Sie den Block auf Desktop oder Mobile nur dann aus, wenn Besucher weiterhin eine klare Möglichkeit haben, Sie zu kontaktieren.
6. Prüfen Sie beide Darstellungen. Überprüfen Sie den Block nach Layout-, Ausrichtungs-, Sichtbarkeits- oder Medienänderungen auf Desktop und Mobile, da sich die beiden Ansichten unterschiedlich verhalten können.
7. Halten Sie Fallback-Styling verfügbar. Lassen Sie Farben und Medien auf ihren Standard- oder leeren Werten, wenn das integrierte Styling des Themes erhalten bleiben soll; verwenden Sie explizite Überschreibungen nur dann, wenn der Block eigenständiger wirken soll.
8. Wählen Sie Medien mit Blick auf Klarheit. Wenn Sie unterschiedliche Medien für Desktop und Mobile verwenden, stellen Sie sicher, dass Zuschnitt, Ladeverhalten und Lesbarkeit des Textes in beiden Ansichten weiterhin gut funktionieren.
9. Machen Sie Statusmeldungen lesbar. Halten Sie Erfolgsmeldungen oder Fehlermeldungen leicht erfassbar, damit Besucher das Formular ohne Verwirrung abschließen können.