Kontaktformular

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zum Kontaktinformationsblock
3. Company XYZ-Dokumentation zum Contact form-Block
4. Company XYZ-Dokumentation zu Header-Einstellungen
5. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
6. Company XYZ-Dokumentation zu Padding-Einstellungen für Abschnitte
7. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
8. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
9. Company XYZ-Dokumentation zu Layout-Breiten-Einstellungen

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie diesen Abschnitt, um Nachrichten zu sammeln und die Kontaktdaten anzuzeigen, die Personen möglicherweise benötigen, bevor sie Kontakt aufnehmen. Sie können ein Formular, einen Bereich mit Kontaktdaten oder beides einfügen und dann die Blöcke neu anordnen, um zu ändern, welcher Inhalt zuerst angezeigt wird.

Grundeinrichtung des Abschnitts

Dieser Abschnitt eignet sich am besten, wenn Sie zuerst das Hauptziel der Seite festlegen. Wenn Besucher schnell eine Nachricht senden sollen, platzieren Sie zuerst den Formular-Block. Wenn Besucher vor der Kontaktaufnahme normalerweise eine Telefonnummer, E-Mail-Adresse, einen Standort oder Öffnungszeiten benötigen, platzieren Sie zuerst den Block mit den Kontaktinformationen.

Für einen umfassenderen Überblick darüber, wie Blöcke im Editor funktionieren, sehen Sie sich die Shopify-Dokumentation zu Abschnitten und Blöcken an.

1. Verwenden Sie beide Blöcke für eine vollständige Kontaktseite.
2. Verwenden Sie nur den Formular-Block für ein einfacheres, auf Aktionen ausgerichtetes Layout.
3. Verwenden Sie den Block mit den Kontaktinformationen, um das Formular mit direkten Kontaktoptionen zu unterstützen.

Das Neuordnen der Blöcke verändert das Layout und den Lesefluss. Prüfen Sie die Seite nach dem Verschieben der Blöcke in der Desktop- und Mobilansicht, um sicherzustellen, dass die wichtigste Kontaktmethode zuerst angezeigt wird.

Farbeinstellungen

Diese Einstellungen überschreiben die Standard-Theme-Farben für das Symbol des Abschnitts, den Haupttext und den Text der Unterüberschrift. Sie sind besonders nützlich, wenn Sie den Kontaktbereich hervorheben möchten oder wenn Sie ihn über einem benutzerdefinierten Hintergrund platzieren.

Wenn Sie Farbwerte leer lassen oder nahe am Standard belassen, bleibt normalerweise das Fallback-Styling des Themes erhalten. Deutlichere Farb-, Farbverlaufs- oder Medienauswahlen lassen den Abschnitt eigenständiger wirken. Prüfen Sie deshalb, ob der gesamte Kontaktbereich weiterhin als eine Einheit funktioniert.

Wenn Sie zusätzlich gestaltete Block-Hintergründe hinzufügen, sollten die Farben des Abschnitts und der Blöcke zusammenpassen, statt jeden Bereich getrennt zu behandeln. Starker Kontrast ist hier wichtig, weil Besucher Details schnell erfassen und das Formular ohne Mühe ausfüllen müssen.

Unterstützte Blocktypen

1. Kontaktinformationen
2. Kontaktformular

Kontaktinformationen

Verwenden Sie diesen Block, um praktische Details zusammen mit dem Formular anzuzeigen, z. B. Telefonnummer, E-Mail, Adresse, Öffnungszeiten und Social-Media-Symbole. Er enthält außerdem einen eigenen optionalen Bereich für eine Überschrift, sodass Sie diesen Inhalt klar kennzeichnen können, wenn die Seite beide Blöcke enthält.

1. Halten Sie die Details kurz und leicht erfassbar.
2. Zeigen Sie Social-Symbole nur an, wenn diese Profile aktiv und gepflegt sind.
3. Verwenden Sie die Blockhintergrund-Einstellungen, wenn sich die Kontaktdaten wie ein separater Bereich anfühlen sollen.

Mehr erfahren in der Company XYZ-Dokumentation zum Block „Kontaktinformationen“.

Kontaktformular

Verwenden Sie diesen Block, um das Nachrichtenformular selbst anzuzeigen. Sie können die Senden-Schaltfläche gestalten, sie auf Mobilgeräten über die volle Breite anzeigen und optional einen kleinen Bereich für eine Überschrift innerhalb des Blocks hinzufügen.

1. Fügen Sie eine kurze Überschrift oder Unterüberschrift hinzu, wenn Besucher Orientierung dazu benötigen, wofür dieses Formular gedacht ist.
2. Verwenden Sie auf Mobilgeräten eine Schaltfläche mit voller Breite, wenn das Formular auf kleineren Bildschirmen leichter ausfüllbar wirken soll.
3. Halten Sie den Formularbereich optisch schlicht, wenn der Block mit den Kontaktdaten bereits eine stärkere Hintergrundgestaltung verwendet.
4. Prüfen Sie nach der Veröffentlichung die leeren, erfolgreichen und fehlerhaften Zustände, damit Bestätigungs- und Validierungsmeldungen gut lesbar bleiben.

Mehr erfahren in der Company XYZ-Dokumentation zum Block „Kontaktformular“.

Standard-Abschnittseinstellungen

Header-Einstellungen

Header-Einstellungen steuern den einleitenden Inhalt über den Blöcken, einschließlich Ausrichtung, Symbol, Beschriftung, Überschrift, unterstützendem Text und einer optionalen Schaltfläche. Verwenden Sie diesen Bereich, um die Seite einzuleiten, Struktur hinzuzufügen oder eine sekundäre Aktion wie Wegbeschreibung, Buchung oder Hilfematerial einzubinden.

Wählen Sie den Überschriftstyp sorgfältig aus, damit die Seite eine klare Inhaltshierarchie behält. Wenn Sie die optionale Schaltfläche hinzufügen, prüfen Sie ihre Position in der Desktop- und Mobilansicht, damit sie den Hauptkontaktfluss nicht unterbricht.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, dem gesamten Abschnitt eine Farbe, einen Farbverlauf, ein Bild oder ein Video hinzuzufügen. Das funktioniert gut, wenn der Kontaktbereich präsenter wirken oder sich visuell von umliegenden Inhalten abheben soll.

Hintergrundmedien können die Lesbarkeit und das Layout-Gleichgewicht beeinflussen, insbesondere wenn beide Blöcke angezeigt werden. Wenn Sie ein Bild oder Video verwenden, prüfen Sie Overlay- und Textfarben gemeinsam, damit der Inhalt klar bleibt.

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Abschnitts. Verwenden Sie sie, um dem Kontaktbereich mehr Luft zu geben oder das Layout zu verdichten, wenn die Seite bereits mehrere Abschnitte enthält.

Legen Sie den Desktop- und Mobilabstand bewusst fest. Kontaktlayouts benötigen auf kleinen Bildschirmen oft etwas mehr Platz, damit sie nicht gedrängt wirken.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oben oder unten im Abschnitt eine optionale Linie hinzu. Das ist eine einfache Möglichkeit, den Kontaktbereich von benachbarten Inhalten zu trennen, ohne eine vollständige Hintergrundgestaltung hinzuzufügen.

Verwenden Sie eine benutzerdefinierte Farbe für die Trennlinie nur dann, wenn die Standardrahmengestaltung zu dezent ist. In vielen Layouts reicht eine helle Trennlinie aus.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der Abschnitt auf dem Desktop, auf Mobilgeräten oder auf beiden angezeigt wird. Das ist hilfreich, wenn Sie auf kleineren Bildschirmen ein anderes Kontakt-Erlebnis wünschen.

Blenden Sie den Abschnitt nur auf einem Gerät aus, wenn Besucher dort weiterhin eine klare Möglichkeit haben, Sie zu kontaktieren. Vermeiden Sie ein Layout, in dem die wichtigste Kontaktmethode unerwartet verschwindet.

Breiten-Einstellungen

Breiten-Einstellungen steuern die Inhaltsbreite innerhalb des Abschnitts und die Breite des Abschnitt-Containers selbst. Verwenden Sie sie, um das Formular besser lesbar zu machen oder den Hintergrund breiter als den Inhalt auslaufen zu lassen.

Die Inhaltsbreite hat normalerweise den größten Einfluss auf Komfort und Lesbarkeit. Prüfen Sie Breitenänderungen sowohl auf der Live-Seite als auch im Editor, da die Editor-Ansicht Layout-Unterschiede kleiner wirken lassen kann, als sie tatsächlich sind.

Nutzungshinweise

1. Führen Sie mit der primären Aktion. Platzieren Sie das Formular zuerst, wenn schnelle Anfragen am wichtigsten sind, und die Kontaktdaten zuerst, wenn Besucher vor dem Senden normalerweise Referenzinformationen benötigen.
2. Halten Sie Details aktuell. Überprüfen Sie Telefonnummern, E-Mail-Adressen, Adressinhalte, Geschäftszeiten und Social-Links regelmäßig, damit der Abschnitt vertrauenswürdig bleibt.
3. Schützen Sie die Lesbarkeit. Wenn Sie benutzerdefinierte Hintergründe, Overlays oder Farb-Overrides verwenden, stellen Sie sicher, dass Text und Formularinhalte auf einen Blick gut lesbar bleiben.
4. Optimieren Sie das Scannen auf Mobilgeräten. Verwenden Sie die Breite der Mobil-Schaltfläche, die Blockreihenfolge und die Sichtbarkeitseinstellungen, damit der Abschnitt auf kleineren Bildschirmen leicht zu verwenden ist.
5. Setzen Sie die Breite sparsam ein. Moderate Inhaltsbreiten machen Kontaktformulare und Unternehmensdetails in der Regel leichter erfassbar als sehr breite Layouts.
6. Prüfen Sie beide Viewport-Konfigurationen. Wenn Sie unterschiedliche Medien- oder Layoutoptionen für Desktop und Mobilgeräte verwenden, vergewissern Sie sich, dass Zuschnitt, Fallback-Verhalten und Textlesbarkeit auf jedem Gerät weiterhin gut funktionieren.