Formular gestalten

Die Einstellungen unter Appearance in Sami B2B Onboarding ändern das Aussehen des gesamten Formulars: Schriftart, Größe, Breite, Feldstil und Farben. Sie gelten für ein einzelnes Formular, sodass jedes Ihrer Formulare sein eigenes Aussehen haben kann, und sie verändern nie Ihr Theme.

Die Appearance-Einstellungen öffnen

1. Das Formular öffnen

   Gehen Sie zu Forms und klicken Sie neben dem Formular auf Edit. Der Builder öffnet sich.

2. Appearance öffnen

   Klicken Sie in der Leiste links auf Appearance. Der Bereich listet alle folgenden Einstellungen auf, und die Vorschau in der Mitte ändert sich, während Sie sie ändern.

   

   Jede Appearance-Einstellung ändert sofort die Vorschau.

3. Speichern

   Wenn das Formular richtig aussieht, klicken Sie in der Speicherleiste auf Save. Ist das Formular veröffentlicht, sehen Käuferinnen und Käufer das neue Aussehen beim nächsten Öffnen.

Appearance-Einstellungen

Einstellung	Was sie ändert	Standard
Font	Die Schriftart des gesamten Formulars. Öffnet den Bereich Select font.	Theme default
Font size scale	Die Größe des gesamten Formulartextes, von 80 % bis 130 % der Größe Ihres Themes, in Schritten von 5 %.	100 %
Width	Die maximale Breite des Formulars, in px (320 bis 1200) oder % des verfügbaren Platzes (30 bis 100). Das Formular wird zentriert und auf kleinen Bildschirmen schmaler.	640 px
Layout	Default setzt die Felder direkt auf die Seite. Boxed setzt das Formular in eine eigene Karte mit Innenabstand und Rahmen.	Default
Style	Das Aussehen jedes Feldes. Siehe Feldstile.	Classic
Field spacing	Der Abstand zwischen den Feldern: Comfortable oder Compact.	Comfortable
Color scheme	Hintergrund-, Text- und Button-Farben des Formulars. Siehe Farben.	Default
CSS class	Fügt dem Formular einen eigenen Klassennamen hinzu, damit Stile in Ihrem Theme es ansprechen können, zum Beispiel wholesale-form.	Leer

Wenn Sie Width zwischen px und % umschalten, beginnt der Wert wieder bei 640 px oder 100 %.

Eine Schriftart wählen

1. Die Schriftliste öffnen

   Klicken Sie unter Appearance auf das Feld Font. Der Bereich Select font öffnet sich.

2. Eine Schriftart finden

   Tippen Sie in Search oder scrollen Sie. Die Liste hat zwei Gruppen:

   • System fonts: Theme default, die Schriftart, die Ihr Theme bereits verwendet, dann System UI, Helvetica, Arial, Georgia, Times New Roman und Monospace. Dafür wird nichts zusätzlich geladen.
   • Other fonts: fast 1.000 Webschriftarten. Jede wird in ihrer eigenen Schrift dargestellt. Sie werden in Ihrem Onlineshop von Google Fonts geladen, wodurch die Seite etwas langsamer laden kann.

3. Schriftart und Schriftschnitt wählen

   Klicken Sie auf eine Schriftart. Die Vorschau ändert sich sofort. Wenn die Schriftart in mehreren Schnitten verfügbar ist, wählen Sie unten im Bereich in der Liste Weight einen aus, zum Beispiel Regular, Bold oder Italic. Klicken Sie auf Done.

   Der Hinweis unter Font bestätigt Ihre Auswahl, zum Beispiel Bold. Loads from Google Fonts on the storefront.

Feldstile

Klicken Sie auf das Feld Style, um alle acht Stile zu sehen, jeweils als Beispielfeld Company name dargestellt. Klicken Sie auf einen, um ihn auf jedes Feld des Formulars anzuwenden.

Stil	So sieht ein Feld aus
Material filled	Ein graues Feld mit der Beschriftung oben darin.
Material outlined	Ein Feld mit Rahmen, dessen Beschriftung auf dem oberen Rand sitzt.
Classic	Ein weiches graues Feld mit leichtem Schatten und abgerundeten Ecken. Der Standard.
Classic rounded	Classic, mit vollständig runden einzeiligen Feldern.
Flat	Ein graues Feld mit eckigen Ecken und ohne Schatten.
Flat rounded	Flat, mit vollständig runden einzeiligen Feldern.
Line	Nur eine Linie unter der Antwort.
Line rounded	Sieht aus wie Line: Eine Unterstreichung hat keine Ecken, die man runden könnte.

In den runden Stilen behalten Felder mit mehreren Zeilen, etwa Long text, sanft abgerundete Ecken, statt vollständig rund zu werden.

Jede Karte zeigt, wie ein Feld in diesem Stil aussieht.

Farben

Die Zeile Color scheme zeigt zehn vorgefertigte Schemata: Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark und Midnight. Jedes Farbfeld zeigt seine Hintergrund-, Text- und Button-Farben. Klicken Sie auf eines, um es zu verwenden.

• Default übernimmt die eigenen Farben der Seite, sodass das Formular zu Ihrem Theme passt. Um diese Farben zu ändern, ändern Sie die Einstellungen Ihres Themes.
• Jedes andere Schema legt einen eigenen Hintergrund hinter das Formular. Buttons und Schrittmarkierungen übernehmen die Button-Farbe des Schemas.

Eigene Farben erstellen

1. Das Schema öffnen

   Klicken Sie unter den Farbfeldern auf Edit scheme. Der Bereich Editing öffnet sich für das gewählte Schema, zum Beispiel Editing Warm Sand.

2. Die Farben ändern

   Klicken Sie auf eine Farbe, um die Farbauswahl zu öffnen. Ziehen Sie im Quadrat und in den Farbstreifen, geben Sie einen Hex-Code ein oder wählen Sie mit der Pipette eine Farbe von Ihrem Bildschirm, falls Ihr Browser das anbietet. Diese Farben können Sie festlegen:

   Farbe	Was sie färbt
   Background	Den Bereich hinter dem Formular.
   Text	Beschriftungen, Überschriften und Antworten.
   Solid button background	Die Haupt-Buttons, etwa Submit application, und die Schrittmarkierungen.
   Solid button label	Den Text auf diesen Buttons.
   Outline button	Den Rand von Buttons mit Umriss, etwa Back.

   Background, Text und Outline button können Theme color anzeigen, was bedeutet, dass das Formular dort die Farbe Ihres Themes verwendet.

   Sobald Sie eine Farbe ändern, wird das Schema zu Custom, und der Zeile wird ein Farbfeld Custom hinzugefügt. Diese Farben gelten nur für dieses Formular. Die eigenen Farbschemata Ihres Themes ändern sich nicht.

   

   Ändern Sie eine beliebige Farbe, und das Formular erhält ein eigenes Schema Custom.

3. Schließen oder zurücksetzen

   Schließen Sie den Bereich, um Ihre Farben zu behalten. Um zu den Farben Ihres Themes zurückzukehren, klicken Sie unten im Bereich auf Remove color scheme: Das Formular kehrt zu Default zurück.

Ihr Logo hinzufügen

Das Logo steht im Header des Formulars, über der Überschrift.

1. Den Header öffnen

   Klicken Sie in der Leiste auf Elements und dann oben in der Liste auf Header.

2. Das Logo hochladen

   Schalten Sie Show store logo ein, klicken Sie dann auf Upload image und wählen Sie die Datei. Es muss ein Bild im Format .jpg, .png oder .svg mit höchstens 1 MB sein. Eine Größe von etwa 200×60 px passt am besten.

   Um es später zu ändern, klicken Sie auf Replace image. Um es zu entfernen, klicken Sie auf Remove.

3. Speichern

   Klicken Sie in der Speicherleiste auf Save.

Das Design prüfen

Die Vorschau im Builder stellt Ihr Formular mit demselben Code dar, den Ihr Onlineshop verwendet, sodass Layout, Feldstil, Abstände und Schema, die Sie sehen, dem entsprechen, was Ihre Kundschaft bekommt.

• Prüfen Sie mit den Buttons Desktop preview und Mobile preview über der Vorschau beide Bildschirmgrößen.
• Einstellungen, die Sie Ihrem Theme überlassen, Theme default bei der Schriftart und Default bei den Farben, übernehmen im Onlineshop Schriftart und Farben Ihres Themes. Um sie zu sehen, klicken Sie in der Symbolleiste auf Preview (der Augen-Button). Das öffnet die Seite des Formulars in Ihrem Shop in einem neuen Tab, so wie zuletzt gespeichert.

Nächste Schritte

• Formular aufbauen – legen Sie Breite, Beschriftung und Platzhalter jedes Feldes fest.
• Nach dem Absenden – schreiben Sie die Dankeseite, die nach diesem Formular erscheint.
• Formular in Ihrem Shop einbinden – setzen Sie das fertige Formular auf eine Seite, in einen Theme-Abschnitt oder überall dorthin, wo HTML möglich ist.