Formular aufbauen

Im Builder legen Sie fest, was ein Bewerbungsformular abfragt. Sie fügen Felder hinzu, fassen sie in Zeilen zusammen, teilen das Formular in Seiten auf und richten jedes Feld ein. Die Vorschau in der Mitte zeigt das Formular so, wie es in Ihrem Shop erscheint.

Hinweis

Um den Builder zu öffnen, gehen Sie in Sami B2B Onboarding zu Forms und klicken Sie neben einem Formular auf Edit oder auf den Namen des Formulars. Nur Mitarbeitende mit der Admin-Rolle können Formulare bearbeiten.

Der Builder auf einen Blick

Bereich	Wo	Wofür
Section rail	Ganz links	Wechselt zwischen Elements, Appearance, After submit, Email und Integrations. Collapse klappt sie auf Symbole zusammen.
Elements panel	Links	Die Gliederung des Formulars: oben Header, dann Content, jede Seite mit ihren Feldern und Zeilen, Add page und unten Footer.
Preview	Mitte	Das Formular, wie es Ihre Kundschaft sieht. Klicken Sie auf ein Feld, eine Seitenüberschrift, den Header oder die Buttons, um sie auszuwählen.
Settings panel	Rechts	Öffnet sich, wenn Sie etwas auswählen, und zeigt dessen Einstellungen. Mit × (Close) schließen Sie es.
Toolbar	Über der Vorschau	Das Feld Form name, das Badge Active oder Draft, … (More actions), Language, die Buttons für Desktop- und Mobilvorschau, der Inspector-Button und Preview.

Der Elements-Bereich listet jede Seite, Zeile und jedes Feld in der Reihenfolge auf, in der die Kundschaft sie sieht.

Die übrigen Bereiche der Leiste haben eigene Seiten:

Bereich	Was Sie dort festlegen	Mehr dazu
Appearance	Layout, Breite, Schriftart, Feldstil und Farben.	Formular gestalten
After submit	Die Dankesnachricht oder eine Seite, auf die weitergeleitet wird.	Nach dem Absenden
Email	Wer von diesem Formular erfährt, und die eigene Version jeder E-Mail für dieses Formular.	E-Mail-Vorlagen bearbeiten und Festlegen, wer benachrichtigt wird
Integrations	Wohin Antworten in Shopify gehen, dazu Klaviyo, Webhooks, Adress-Autovervollständigung und Captcha.	Antworten Shopify zuordnen

Ein Feld hinzufügen

1. Die Feldliste öffnen

   Nutzen Sie, was Ihnen am nächsten liegt:

   • Klicken Sie im Elements-Bereich auf + (Add field) neben dem Namen der Seite oder auf Add field am Ende der Seite. In einer Zeile klicken Sie auf Add element, um das Feld dieser Zeile hinzuzufügen.
   • Klicken Sie in der Vorschau am Ende der Seite auf Add a field.
   • Zeigen Sie in der Vorschau auf den Rand eines Feldes und klicken Sie auf das +, das erscheint. Sein Tooltip lautet Add field above, Add field below, Add field to the left oder Add field to the right. Links und rechts setzen das neue Feld in einer Zeile neben dieses.

2. Das Feld finden

   Scrollen Sie durch die Liste oder tippen Sie in Search fields, um sie einzugrenzen.

   

   Felder sind nach Art gruppiert, und Add all bei einem Adressblock fügt eine ganze Adresse mit einem Klick hinzu.

3. Es hinzufügen

   Klicken Sie auf das Feld. Es wird der Seite hinzugefügt und ausgewählt, und seine Einstellungen öffnen sich rechts. Geben Sie ihm eine Beschriftung und richten Sie es ein (siehe Feldeinstellungen).

Achtung

Jedes Formular behält ein Feld Email und ein Feld, das als Name des Unternehmens gespeichert wird. Das Feld Email kann nicht entfernt oder ausgeblendet werden, und Save wird mit Map a field to Company · Name. abgelehnt, wenn kein Feld als Unternehmensname gespeichert wird.

Felder, die Sie hinzufügen können

Gruppe	Feld	Was die Person bekommt
Basic fields	Short text	Ein einzeiliges Textfeld.
	Long text	Ein Textfeld für mehrere Zeilen.
	Number	Ein Feld, das nur Zahlen annimmt.
	Email	Ein Feld, das prüft, ob die Antwort wie eine E-Mail-Adresse aussieht.
	Phone	Ein Telefonnummernfeld mit optionaler Länderflagge, Vorwahl und Nummernprüfung.
	Country	Eine Liste von Ländern.
	State / province	Eine Liste der Bundesstaaten oder Provinzen des Landes, das im davorstehenden Feld Country auf der Seite gewählt wurde. Sie erscheint, sobald die Person ein Land mit Bundesstaaten wählt, und ist ein einfaches Textfeld, wenn kein Feld Country davorsteht.
	Dropdown	Eine Liste, aus der man eine Auswahl trifft, oder mehrere mit Allow multiple choices.
	Checkbox	Ein einzelnes Kontrollkästchen, etwa „Ich stimme den Bedingungen zu“. Wenn es erforderlich ist, muss die Person es anhaken.
	Checkboxes	Eine Liste von Auswahlmöglichkeiten, von denen die Person beliebig viele anhaken kann.
	Radio buttons	Eine Liste, aus der man eine Auswahl trifft, mit einer optionalen Auswahl Other, die die Person selbst eintippt.
	Date and time	Eine Datumsauswahl, eine Uhrzeit oder beides.
	File upload	Ein Upload-Feld. Standardmäßig nimmt es PDF-, JPG-, JPEG- und PNG-Dateien bis 10 MB an.
Company fields	Company name	Ein Textfeld, das als Name des Unternehmens gespeichert wird.
	Tax ID	Ein Textfeld für die Steuer- oder USt-IdNr. des Unternehmens. Die Prüfungen der Steuernummer der App lesen dieses Feld.
	Website	Ein Textfeld für die Website des Unternehmens.
Document fields	Business license, Tax certificate, Tax registration, Reseller certificate	Ein Upload-Feld. Die Datei wird mit der Bewerbung als diese Art von Dokument aufbewahrt. Siehe Dokumente.
Static text	Heading	Ein Titel mit optionaler Bildunterschrift darunter.
	Paragraph	Formatierter Text, etwa Anweisungen.
	HTML	Ihr eigenes HTML-Markup.
	Divider	Eine horizontale Linie.
Address blocks	Shipping address	Zehn Felder in einer Zeile: Recipient / department, First name, Last name, Phone, Address line 1, Address line 2, City, Country, State / province und ZIP / postal code. Klicken Sie auf Add all.
	Billing address	Ein Kontrollkästchen Same as shipping address, dann zehn Rechnungsfelder (Department / attention, Billing first name und so weiter) in einer Zeile, die ausgeblendet ist, solange das Kästchen angehakt ist. Klicken Sie auf Add all.
Layout	Row	Eine leere Zeile für Felder. Siehe Felder in Zeilen gruppieren.

Um ein einzelnes Adressfeld statt eines ganzen Blocks hinzuzufügen, klicken Sie unter Address blocks auf Show the individual address fields. Die Felder, die ein Adressblock hinzufügt, werden erst in Shopify gespeichert, wenn Sie sie zuordnen. Siehe Antworten Shopify zuordnen.

Feldeinstellungen

Klicken Sie in der Vorschau oder im Elements-Bereich auf ein Feld. Seine Einstellungen öffnen sich rechts in Abschnitten. Sie sehen nur die Abschnitte, die für diese Art von Feld gelten.

Abschnitt	Einstellungen
Content	Label, die Frage, die die Person liest. Placeholder, der blasse Text in einem leeren Feld. Help text, unter dem Feld angezeigt. Default, eine Antwort, die beim Öffnen des Formulars vorausgefüllt ist (bei einer einzelnen Checkbox: Ticked by default).
Options	Für Dropdown, Checkboxes und Radio buttons. Klicken Sie auf Add option oder Change, um die Auswahlmöglichkeiten zu bearbeiten: Geben Sie das Label jeder Auswahl ein, ziehen Sie zum Umsortieren, Add another option oder Bulk add eine Auswahl pro Zeile. Customer tags werden dem Shopify-Kundenkonto hinzugefügt, wenn jemand genehmigt wird, der diese Auswahl getroffen hat (jeweils bis zu 40 Zeichen). Schalten Sie Use the label as the value aus, um etwas anderes zu speichern als das, was die Person liest. Ein Dropdown hat außerdem Allow multiple choices. Radio buttons haben außerdem Other option, Other label und Other placeholder.
Upload	Für File upload und Dokumentfelder. Accepted: Only certain file types (dann listen Sie sie unter File types auf) oder Any file type. Max size: 1 bis 20 MB. Allow more than one file.
Phone number	Show country flag and dial code. Wenn aktiviert: Check the number is valid und Default country (From the buyer’s browser, sofern Sie keines wählen).
Date and time	Asks for: Date, Time oder Date and time. Date format, Time format, Other language für die Datumsauswahl und Limit the range mit Earliest und Latest.
Validation	Required. Wenn aktiviert, Error message, die angezeigt wird, wenn das Feld leer bleibt; geben Sie {{ label }} ein, um die Beschriftung des Feldes einzufügen. Limit characters mit Min characters und Max characters, für Short text, Long text, Email, Phone und Tax ID. Lassen Sie eine Grenze leer, wenn es keine geben soll.
Layout	Icon, am Anfang des Feldes dargestellt (nicht bei Checkbox, Checkboxes, Radio buttons oder Uploads). Hide label mit Keep the label’s space und Still show the required mark. Column width, von 1 bis 12. Number of options per line, von 1 bis 5, für Checkboxes und Radio buttons.
Visibility	Conditional display: Das Feld anzeigen, ausblenden, erforderlich machen oder deaktivieren, abhängig von früheren Antworten. Siehe Felder per Regel anzeigen, erforderlich machen oder deaktivieren.
Custom CSS	Custom CSS class, ein Klassenname, den Sie mit dem CSS Ihres eigenen Themes gestalten können. Nur einfache Klassennamen werden übernommen.

Bei Dropdown, Country und State / province ist der Platzhalter die erste Zeile der Liste, standardmäßig Select…. Wenn Sie ihn leeren, kehrt Select… zurück.

Statischer Text hat weniger Einstellungen. Eine Heading hat ihren Text in Label, dazu Caption und Heading tag (Heading 1 bis Heading 6). Ein Paragraph hat Text, und HTML hat Markup. Ihr Label ist nur der Name, den Sie im Elements-Bereich sehen. Jeder statische Text hat außerdem Column width, Visibility und Custom CSS.

Die Einstellungen eines Feldes sind in Abschnitte gegliedert, von dem, was die Person liest, bis dazu, wann das Feld erscheint.

Felder anordnen

Ein Feld verschieben

• Im Elements-Bereich: Ziehen Sie ein Feld am Griff. Legen Sie es auf einem anderen Feld ab, um es darüber oder darunter zu platzieren, auf dem Namen einer Seite, um es ans Ende dieser Seite zu verschieben, oder auf dem Namen einer Zeile, um es in diese Zeile zu setzen.
• In der Vorschau: Klicken Sie auf ein Feld und ziehen Sie es dann am Griff links in seiner Symbolleiste (Drag to move this field). Legen Sie es am oberen oder unteren Rand eines anderen Feldes ab, um es darüber oder darunter zu platzieren. Legen Sie es am linken oder rechten Rand ab, um beide nebeneinander in eine Zeile zu setzen.

Spaltenbreiten festlegen

Breiten werden in 12 Spalten gezählt, und jedes neue Feld beginnt bei 12, der vollen Breite. Aufeinanderfolgende Felder teilen sich eine Zeile, wenn ihre Breiten passen: Zwei Felder mit 6 stehen nebeneinander, und drei mit 4 ergeben drei Spalten.

• Ziehen Sie in den Einstellungen des Feldes Layout › Column width, oder
• klicken Sie in der Vorschau in der Symbolleiste des ausgewählten Feldes auf Change width. Es schaltet zwischen einem Drittel, der Hälfte und der vollen Breite um.

Wenn das Formular schmaler als 480 Pixel ist, zum Beispiel auf einem Smartphone, nimmt jedes Feld die ganze Zeile ein.

Felder in Zeilen gruppieren

Eine Zeile hält Felder zusammen und kann sie mit einem Kopf einleiten: einer Beschriftung und einer Beschreibung über den Feldern. Sie können eine ganze Zeile auf einmal anzeigen, ausblenden oder verschieben.

Um eine Zeile zu erstellen, gehen Sie so vor:

• Öffnen Sie die Feldliste und klicken Sie unter Layout auf Row. Im Elements-Bereich erscheint eine leere Zeile. Klicken Sie darin auf Add element, um Felder hinzuzufügen.
• Öffnen Sie die Feldliste und klicken Sie auf Select fields (wird angezeigt, wenn die Seite zwei oder mehr Felder außerhalb von Zeilen hat). Haken Sie die Felder im Elements-Bereich an und klicken Sie dann auf Group into row.
• Fügen Sie ein Feld links oder rechts eines anderen hinzu oder legen Sie in der Vorschau eines neben einem anderen ab.

Klicken Sie im Elements-Bereich auf den Namen der Zeile, um ihre Einstellungen zu öffnen:

Einstellung	Was sie bewirkt
Label	Der Titel der Zeile. Die Kundschaft sieht ihn über den Feldern der Zeile.
Hide the heading block	Blendet Beschriftung und Beschreibung für die Kundschaft aus. Sie bleiben erhalten und kommen zurück, wenn Sie dies ausschalten.
Description	Text unter der Beschriftung.
Icon	Ein Symbol neben der Beschriftung.
Conditional display	Die ganze Zeile anzeigen oder ausblenden, abhängig von früheren Antworten. Siehe Felder per Regel anzeigen, erforderlich machen oder deaktivieren.
Ungroup row	Löst die Zeile auf. Ihre Felder bleiben auf der Seite.

Im Elements-Bereich blendet das Augensymbol der Zeile alle ihre Felder aus, und Duplicate row kopiert sie. Um ein einzelnes Feld aus einer Zeile zu nehmen, wählen Sie das Feld aus und klicken Sie auf Remove from row.

Das Formular Wholesale application verwendet Zeilen mit ausgeblendetem Kopfbereich, weil jeder Abschnitt bereits mit einem Feld Heading beginnt.

Mehrere Seiten verwenden

1. Eine Seite hinzufügen

   Klicken Sie unten im Elements-Bereich auf Add page. Eine Seite namens Untitled page 2 wird hinzugefügt, und ihre Einstellungen öffnen sich. Geben Sie einen neuen Page name ein und drücken Sie Enter.

2. Seiten in Schritte verwandeln

   Klicken Sie im Elements-Bereich auf Content und schalten Sie Show step progress bar ein. Wählen Sie Step labels: Name and number, Name only oder Number only.

   Die Kundschaft sieht jetzt jeweils eine Seite mit einer Schrittleiste oben. Jede Seite endet mit einem Button Continue, der die Antworten der Seite prüft, bevor es weitergeht, und die letzte Seite endet mit dem Button zum Absenden. Ohne Schrittleiste erscheinen alle Seiten nacheinander in einem einzigen Formular.

3. Festlegen, ob man zurückgehen kann

   Jeder Schritt nach dem ersten hat einen Button Back, weil Let buyers go back a step standardmäßig eingeschaltet ist. Um das zu ändern, klicken Sie im Elements-Bereich auf Footer. Schalten Sie Let buyers go back a step aus, um den Button zu entfernen, oder ändern Sie Back label. Diese Einstellungen erscheinen nur, solange die Schrittleiste eingeschaltet ist und das Formular zwei oder mehr Seiten hat.

Klicken Sie im Elements-Bereich auf den Namen einer Seite, um ihre Einstellungen zu öffnen:

Einstellung	Was sie bewirkt
Page name	Der Name der Seite im Builder und in der Schrittleiste.
Hide the heading block	Lässt die Seite mit ihrem ersten Feld beginnen. Überschrift und Beschreibung bleiben für später erhalten.
Heading und Description	Oben auf der Seite angezeigt.
Continue button label	Der Text des Buttons Continue der Seite. Auf der letzten Seite nicht angezeigt.
Icon	Ersetzt die Nummer dieses Schritts in der Schrittleiste. Nur bei eingeschalteter Schrittleiste angezeigt.
Header and footer	Mit Use custom header und Use custom footer erhält dieser Schritt einen eigenen Kopftext und Hinweis. Solange man zurückgehen kann, hat der eigene Footer außerdem Show Back button on this step. Nur bei eingeschalteter Schrittleiste angezeigt.
Visibility	Die ganze Seite anzeigen oder ausblenden, abhängig von Antworten auf früheren Seiten.
Delete page	Löscht die Seite und ihre Felder. Ein Formular braucht mindestens eine Seite, und die Seite mit dem Feld Email kann erst gelöscht werden, wenn Sie dieses Feld verschieben.

Header und Footer

Klicken Sie oben im Elements-Bereich auf Header oder in der Vorschau auf die Überschrift:

• Show store logo, dann Upload image: eine Datei im Format .jpg, .png oder .svg bis 1 MB, etwa 200×60 Pixel.
• Heading und Subheading oben im Formular.
• Show this block, um den gesamten Header anzuzeigen oder auszublenden.

Klicken Sie unten im Elements-Bereich auf Footer oder in der Vorschau auf die Buttons:

• Submit label, der Text des Buttons zum Absenden.
• Reset button und Reset label, ein Button, der das Formular leert.
• Full-width buttons oder Alignment: Left, Center oder Right.
• Note, Text, der bei den Buttons angezeigt wird, und Put the note above the buttons.

Ein Feld ausblenden, kopieren oder entfernen

• Hide this block (das Augensymbol im Elements-Bereich oder in der Symbolleiste des Feldes) nimmt das Feld für die Kundschaft aus dem Formular, behält es aber mit seinen Einstellungen im Builder. Das Feld verschwindet aus der Vorschau und ist im Elements-Bereich ausgegraut. Klicken Sie dort auf sein Auge, um es zurückzuholen.
• Duplicate field setzt eine Kopie direkt hinter das Feld und wählt sie aus.
• Remove field (in der Symbolleiste oder unten im Einstellungsbereich) löscht das Feld, wenn Sie speichern.

Das Formular in der Vorschau ansehen

• Desktop preview und Mobile preview schalten die Breite der Vorschau um.
• Der Inspector-Button (das Zielsymbol) wechselt zwischen Bearbeiten und Testen. Der Inspector ist beim Öffnen des Builders eingeschaltet, und der Button lautet Deactivate inspector: Ein Klick wählt Dinge zum Bearbeiten aus, und Regeln werden nicht ausgeführt, sodass ein Feld, das eine Regel ausblenden würde, trotzdem erscheint. Klicken Sie darauf, um den Inspector auszuschalten und die Vorschau wie eine Kundin oder ein Kunde auszufüllen: Regeln werden ausgeführt, und Continue und der Button zum Absenden prüfen Ihre Antworten. Es wird nichts gesendet. Klicken Sie erneut (Activate inspector), um zum Bearbeiten zurückzukehren. Das Tastenkürzel ist ⌘ Shift I auf dem Mac oder Ctrl Shift I unter Windows.
• Language zeigt das Formular in einer Sprache, in die Sie es übersetzt haben. Noch nicht übersetzte Wörter erscheinen auf Englisch. Zum Übersetzen wählen Sie unter … (More actions) die Option Translate this form, wodurch Übersetzen geöffnet wird.
• Preview (das Augensymbol) öffnet die Seite des Formulars in Ihrem Shop in einem neuen Tab. Das funktioniert, sobald das Formular gespeichert und veröffentlicht ist.

Ihre Änderungen speichern

Klicken Sie in der Speicherleiste auf Save. Die Meldung Form saved erscheint, und wenn das Formular Active ist, erhält die Kundschaft sofort die neue Version. Discard verwirft alles seit dem letzten Speichern.

Wenn etwas korrigiert werden muss, wird das Speichern abgelehnt, und ein Banner oben in der Vorschau listet jedes Problem auf, etwa Enter a form name oder zwei Felder, die im selben Shopify-Feld gespeichert werden. Wo eine Zeile mit einem Pfeil-Button endet, klicken Sie darauf, um direkt zum Feld oder zur Einstellung zu springen.

Nächste Schritte

• Felder per Regel anzeigen, erforderlich machen oder deaktivieren – stellen Sie eine Frage nur dann, wenn eine frühere Antwort es verlangt.
• Antworten Shopify zuordnen – legen Sie fest, wo jede Antwort bei der Genehmigung gespeichert wird.
• Formular gestalten – passen Sie das Formular an das Aussehen Ihres Shops an.
• Formular erstellen und veröffentlichen – veröffentlichen Sie das Formular und prüfen Sie es in Ihrem Shop.