hy,
ich würde gerne das kontakt formular in meiner seite linksbündig machen.
hab einiges im queltext schon versucht, jedoch den richtigen teil wo ich es ändern muss nicht gefunden.
hoffe jemand kann mir weiterhelfen!
Topic summary
Ein Shopify-Nutzer möchte das Kontaktformular seines Shops linksbündig ausrichten, da alle anderen Seiten außer der Startseite bereits linksbündig gestaltet sind. Bei höheren Auflösungen erscheint das Formular unterschiedlich zentriert.
Vorgeschlagene Lösungen:
- Verwendung des benutzerdefinierten CSS-Feldes im Theme Editor (Dawn 7.0)
- Anpassung von CSS-Eigenschaften wie
align-items: flex-startundflex-direction: column - Hinzufügen von
class="isolate left-aligned"im<form>-Tag
Herausforderungen:
- Erste Versuche mit CSS-Code brachten nicht das gewünschte Ergebnis
- Ohne direkten Zugang zum Theme oder Shop-Link ist eine präzise Diagnose schwierig
- Bedenken bezüglich der mobilen Darstellung und möglicher negativer Auswirkungen auf Page Loading Speed
Empfehlung:
Da die Anpassungen Theme-Code-Änderungen erfordern, wird empfohlen, einen Shopify-Experten zu beauftragen. Änderungen sollten zunächst in einer Testkopie des Themes getestet werden. Links zum Shopify-Experten-Verzeichnis wurden bereitgestellt.
Status: Das Problem bleibt ungelöst; professionelle Hilfe wird benötigt.
@Lipse kannst du uns eventuell Bildmaterial (Screenshot), einen Link zu deinem Shop oder das Theme nennen, dass du aktuell verwendest?
Ohne einen visuellen Anhaltspunkt ist es schwer eine Lösung zu bieten.
Hey @Lipse
Versuchst du deine Kontakt Form zu verbessern? Wenn ja, dass ist ein gute Sache denn die meisten out-of-the-box Kontaktform Seiten sehen nicht besonders einladend aus, was auch einen negativen Effekt auf die CRTs (click-thru-rates) der Forms haben kann.
Wir wissen auch aufgrund Daten, dass die meisten Kontaktforms von Besucher zu Shops meistens nicht verwendet werden oder sehr wenige Klicks erhalten. Somit sollen die Forms im Design eine verbesserte und einladende UX (User Experience) für deine Besucher zum Shop darstellen. Siehe eine Beispiel Form hier die der Shopinhaber gebaut hat die richtig einladend und freundlich aussieht.
Da werden die Shopdaten angegeben, sogar mit einen Termin-Buchungs-Link, Öffnungszeiten, und ein Store Locator. Ein Zustimmungs-Kästchen fehlt aber das kann man im Code unterhalb oder oberhalb des “Send” Buttons relativ schnell einbauen.
Um ein erfolgreiches Shop führen zu können, muss man sich halt Gedanken zum “UX Design” aller Seiten des Shops machen, wie z. B. die Kontaktseite, die Produktseiten und Kategorieseiten, sowie alle anderen Seiten. Wir haben eine reihe Blogs die dir dabei helfen können hier.
Es kann wirklich der Unterschied sein zw. einen Shop das 30 Verkäufe pro Jahr macht und einen Shop dass 30 Verkäufe pro Tag macht! ![]()
Lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Habt ihr schon über Ostern nachgedacht? Warum nicht etwas “Easter Egg Gamification” im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

Hmm, du siehst es ist zentriert… Wie können wir die ganze Form Linksbündig machen @Finer ? Die Frage ist eben wie wird sich das auf Mobile auswirken? Könnte das ganze dann komplett zerschossen aussehen?
Folgendes ist ohne Gewähr aber man könnte z. B., das neue BENUTZERDEFINIERTES CSS Feld im Theme Editor verwenden um die Felder im HTML-Formular von zentriert auf linksbündig zu ändern, und einen CSS-Code wie den folgenden hinzufügen (aber immer zuerst in einer Kopie des Live Themes/Testumgebung vorher testen):
.contact__fields {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.field {
width: 100%;
margin-bottom: 20px;
}
align-items: flex-start ist ein CSS property dass verwendet wird, um Flex-Elemente entlang der Querachse (vertikal, in einem Spaltenlayout) am Anfang des Flex-Containers auszurichten. Mit anderen Worten, es richtet die Elemente am oberen Rand des Containers aus. Einclass attribut in der Form Method, sprich, zum <form> tag ist auch wichtig wie z. B. class="isolate left-aligned" oder ähnlich:
Bei weiteren Fragen kann dir einer unserer Experten wie @Finer helfen!
habe den ersten code ins benutzerdefinierte hinzugefügt und folgendes
{%- form ‘contact’, id: ‘ContactForm’, accept-charset: ‘UTF-8’, class: ‘isolate left-aligned’ -%}
im contact-form.liquid, jedoch ohne gewünschtes ergebnis.
hy,
mein problem mit dem kontaktformular besteht leider immer noch. könntest du mir eventuell noch weiterhelfen???
Hey @Lipse
Hast du das lösen können?
Es ist wie @Finer sagt - wir brauchen einen Link zu deinem Shop oder, noch besser, Zugang zum Theme was nur ein Shopify Partner machen kann der oder die von dir in Auftrag gestellt wird. Hast du schon einen Partner wie @Finer in Erwägung gezogen der das für euch programmieren kann? Hier im Leitfaden werden wie das nicht lösen. Ohne direkten Zugang und mehr Anhaltspunkt ist es schwer eine Lösung zu bieten.
Danke und ich finde das Kontaktformular sieht eigentlich ganz gut aus so wie es ist. Die Stellen im Code sieht man unten und da wird ein CSS Code ergänzt werden müssen der das Formular Linksbündig macht:
Somit wirst du einen Experten in Auftrag stellen müssen der oder die in deinen Theme Code eintauchen kann um das zu machen denn so einfach ist das leider nicht.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.
bei höherer auflösung ist es mal mehr, mal weniger in der mitte.
da ich alle seiten bis auf die startseite linksbündig habe, wollte ich das kontakt formular auch so haben. was muss ich machen bezüglich experten und wie lange dauert das?
Unsere Experten Verzeichnis findest du hier und wenn du denen eine E-Mail sendest werden die schnell mit einem Angebot sich zurückmelden!

