Standardformular erstellen

Diese Anleitung führt durch das gesamte Formular, in der Reihenfolge, in der der Editor es darstellt.

1. Den Customize-Editor öffnen

   Gehen Sie zu Quote settings. Suchen Sie auf der Seite Request a Quote die Karte Customize und klicken Sie auf Customize. Der Editor öffnet sich im Vollbild.

2. Den Tab Quote form öffnen

   Der Editor hat vier Tabs – Button & widget, Quote form, Quote cart page und Success message. Öffnen Sie Quote form.

3. Mit einer Vorlage beginnen

   Form template zeigt die Vorlage, auf der Ihr Formular aufbaut, mit einer kurzen Beschreibung, für wen sie geeignet ist.

   Klicken Sie auf Change. Eine Auswahl öffnet sich mit der Überschrift Choose a form template und dem Hinweis „Select a starting point. The form fields will change only after you confirm.“ Es gibt drei:

   Vorlage	Wie die App sie beschreibt	Kennzeichnung
   Simple quote form	„Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload.“	Fast setup · 7 fields
   Detailed quote form	„For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance.“	More details · 14 fields
   B2B customer form	„For wholesale or business buyers who need company, shipping, billing, and payment term information“	B2B

   Wählen Sie die Vorlage, deren Beschreibung zu den Aufträgen passt, für die Sie Angebote erstellen, und klicken Sie zur Bestätigung auf Use this template. Mit Cancel bleibt Ihr aktuelles Formular unverändert. Tun Sie das jetzt, bevor Sie mit dem Bearbeiten der Felder beginnen.

   

   Beginnen Sie mit einer Vorlage statt mit einem leeren Formular.

   Achtung

   Die Wahl einer anderen Vorlage ersetzt die aktuelle Feldliste. Die Abschnitte und Felder auf dem Bildschirm werden gegen die der neuen Vorlage getauscht, und jeder Abschnitt, den Sie hinzugefügt haben, jedes Feld, das Sie umbenannt haben, und alles, was Sie entfernt haben, geht damit verloren. Wählen Sie zuerst die Vorlage und passen Sie danach an.

4. Entscheiden, ob das Formular auf Produktseiten angezeigt wird

   Aktivieren Sie unter Product page form display – „Show the quote form directly on product pages“ – Enable product page form display, wenn die Kundschaft das Formular ausfüllen soll, ohne das Produkt zu verlassen.

   Dadurch wird Form position on product page eingeblendet, ein Dropdown mit drei Auswahlmöglichkeiten:

   Position	Wo das Formular landet
   Below Add to Cart button	Weit oben auf der Seite, direkt unter den Kaufbuttons – die sichtbarste Option.
   Below product description	Nach dem Verkaufstext, für Kaufende, die ihn gelesen haben.
   Below product information	Am Ende des Blocks mit den Produktinformationen.

   

   Schalten Sie diese Einstellung aus, wenn die Kundschaft lieber zuerst einen Angebotswarenkorb zusammenstellen soll.

5. Den Form builder durchgehen

   Der Form builder – „Manage sections, rows, fields, and validation with the visual form builder“ – enthält Ihre Fragen, in Abschnitten gruppiert. Welche Abschnitte vorhanden sind, hängt von der gerade gewählten Vorlage ab:

   Vorlage	Abschnitte im Builder
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   Drei Dinge können Sie mit einem Abschnitt tun:

   • Ein- oder ausschalten. Öffnen Sie die Einstellungen des Abschnitts und aktivieren oder deaktivieren Sie Enable. Ein deaktivierter Abschnitt wird der Kundschaft nicht angezeigt, egal wie viele Felder er enthält.
   • Umbenennen. Dasselbe Einstellungsfenster hat ein Label – ändern Sie es in das, was Ihre Kundschaft dazu sagen würde.
   • Verschieben. Ziehen Sie den Abschnitt am Griff, um die Reihenfolge im Formular zu ändern.

   Klappen Sie einen Abschnitt mit dem Pfeil auf, um die darin enthaltenen Felder zu sehen, und fügen Sie mit Add element ein weiteres Feld zu diesem Abschnitt hinzu.

   Kontakt- und Adressfelder werden unter Felder für Kundeninformationen behandelt; Unternehmen, Rechnung und Zahlungsbedingungen unter B2B-Formular erstellen.

   Hinweis

   Ausgegraute Builder-Steuerelemente mit einer Zeile mit Schloss „🔐 This feature is available on …“ bedeuten, dass die Funktion in einem höheren Tarif enthalten ist. Nichts ist defekt – öffnen Sie in der App Pricing plans, um zu sehen, was Ihr Tarif enthält.

6. Ein Feld bearbeiten

   Klicken Sie im Builder auf ein beliebiges Feld, und seine eigenen Einstellungen öffnen sich, mit dem Namen des Felds und „Customize how this field appears on the form.“ als Überschrift.

   Einstellung	Was sie bewirkt
   Label	Die Formulierung, die die Kundschaft liest. Diese Einstellung ändern Händler:innen am häufigsten.
   Hide label	Behält das Feld, entfernt aber die Beschriftung darüber.
   Placeholder	Der graue Beispieltext im leeren Feld. Nutzen Sie ihn für das gewünschte Format – „e.g. 500 units“ ist besser als ein leeres Feld.
   Help text	Eine Zeile unter dem Feld für alles, was für einen Platzhalter zu lang ist.
   Type	Welche Art von Feld es ist und was die Kundschaft hineinschreiben kann.
   Required	Ohne dieses Feld lässt sich das Formular nicht absenden. Verlangen Sie so wenige Pflichtfelder wie möglich.
   Options / Add option	Die Auswahlmöglichkeiten bei einem Auswahlfeld, einer Optionsgruppe oder einer Kontrollkästchengruppe.
   Choose default value	Womit das Feld beim Laden des Formulars vorbelegt ist.
   Limit characters	Schaltet Min characters und Max characters ein.
   Column width	Wie viel von der Zeile das Feld einnimmt, sodass zwei kurze Felder nebeneinander stehen können.
   Custom HTML class	Ein Klassenname für Ihr eigenes CSS – siehe Eigenes CSS hinzufügen.
   Remove	Löscht das Feld. Es gibt sie nur bei Ihren eigenen Feldern: Die integrierten Kontakt- und Adressfelder sind geschützt und haben kein Remove.

   

   Klicken Sie auf die einzelnen Elemente und richten Sie sie bei Bedarf weiter ein.

   Schließen Sie mit Save changes im Feldfenster ab oder verwerfen Sie die Änderung mit Cancel.

   Achtung

   Limit characters wird beim Tippen validiert: Min characters und Max characters müssen jeweils eine ganze Zahl ab 0 sein, und das Minimum darf nicht größer als das Maximum sein. Bei falschen Angaben blockiert der Editor das Speichern.

7. Die Felder in die gewünschte Reihenfolge bringen

   Felder ordnen Sie per Ziehen neu an. Greifen Sie ein Feld am Ziehgriff am linken Ende seiner Zeile und legen Sie es dort ab, wo Sie es haben möchten. Abschnitte haben ihren eigenen Ziehgriff und werden genauso verschoben.

   Die Reihenfolge ist wichtiger, als es scheint: Ein Formular, das die Postleitzahl der Lieferung vor dem Namen abfragt, wirkt wie eine Datenbank und nicht wie ein Gespräch.

   

   Ziehen Sie das Element per Drag-and-drop, um seine Position bzw. Reihenfolge im Angebotsformular zu ändern.

8. Eigene Fragen hinzufügen

   Extra info beginnt mit dem, was Ihre Vorlage dort ablegt, und das unterscheidet sich je nach Vorlage. Das Simple quote form kommt mit Quantity und Upload files, das Detailed quote form mit Project detail und Delivery service, das B2B customer form mit Message.

   Mit Add element fügen Sie alles Weitere hinzu, was Sie brauchen – Lieferzeit, Liefertermin, Projektreferenz.

   Wenn eine Gruppe von Fragen zusammengehört und in keinen vorhandenen Abschnitt passt, erstellen Sie mit Add section einen neuen.

   Gefahr

   Ein Feld ist nicht optional: Das Formular muss ein Element enthalten, dessen Name das Wort email enthält. Die App blockiert das Speichern und weist darauf hin – Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. Ohne dieses Element erreicht kein Angebot jemals die Kundschaft.

   

   Klicken Sie auf Add element, um dem Angebotsformular weitere eigene Felder hinzuzufügen.

   

9. Das Formular gestalten

   Style zeigt die Voreinstellung, die Ihr Formular verwendet, mit einem Button Change, der die übrigen öffnet. Die Voreinstellungen sind Material filled, Classic, Flat, Flat round, Classic round, Line, Line round und Material outlined – jeweils als kleines Bild des Eingabefelds dargestellt, wählen Sie also nach Augenmaß statt nach Namen.

   Daneben steht Match theme styling if possible. Aktivieren Sie es, übernimmt das Formular stattdessen die Schriftarten und Eingabefelder Ihres Themes, was meist der kürzeste Weg zu einem Formular ist, das nicht aufgesetzt wirkt. Die App weist darauf hin, dass „Theme styling applies on your storefront and is not shown in this preview“, beurteilen Sie das Ergebnis also im Onlineshop und nicht hier.

   Mit Customize text legen Sie Font style, Title bar font size und Title bar font weight fest. Mit Customize form color stellen Sie die einzelnen Farben ein – Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border und Quote popup primary color.

   

   Alle Details: Theme-Stil übernehmen.

10. Das Formular in der Preview durchlesen

    Der Bereich Preview steht neben dem Editor und wird beim Arbeiten neu aufgebaut. Zwei Steuerelemente in seiner Symbolleiste sollten Sie vor dem Speichern nutzen:

    • Der Button für den Kundenstatus, der die Vorschau zwischen Guest und Logged-in umschaltet – beide sehen unterschiedliche Formulare.
    • Der Umschalter zwischen Desktop und Mobilgerät, denn ein langes Formular ist auf dem Smartphone etwas anderes.

11. Speichern und selbst testen

    Sobald Sie etwas ändern, erscheint die Speicherleiste von Shopify mit Save und Discard changes. Klicken Sie auf Save. Hat ein Feld noch einen Validierungsfehler, verweigert der Editor das Speichern und meldet „Please resolve validation errors before saving.“ – korrigieren Sie das genannte Feld und speichern Sie erneut.

    Gehen Sie dann zu Ihrem Onlineshop und senden Sie eine echte Testanfrage ab. Prüfen Sie, ob sie in der Quote list mit allem Erwarteten ankommt.

    

    Das Formular im Onlineshop, mit Quote form appearance auf Multiple step.

Hinweis

Die Vorlage legt Ihren Ausgangspunkt fest, nicht Ihre Obergrenze. Alles, was die Vorlage mitbringt, lässt sich bearbeiten oder entfernen, und alles, was sie weglässt, können Sie mit Add element oder Add section hinzufügen. Denken Sie nur daran, dass ein späterer Vorlagenwechsel ein Neustart und keine Bearbeitung ist – er ersetzt die von Ihnen aufgebaute Feldliste.

Achtung

Senden Sie vor dem Livegang immer selbst eine Testanfrage ab. Nur so können Sie bestätigen, dass Felder, E-Mail und Angebotsdatensatz zusammenpassen.

Wo die übrigen Einstellungen zu finden sind

Der Tab Quote form enthält nur die Fragen. Mehreres, wonach Händler:innen hier suchen, befindet sich auf den anderen Tabs desselben Editors:

Was Sie möchten	Tab	Was Sie dort finden
Das Formular als eine Seite oder in Schritten	Quote cart page	Quote form appearance – „Controls how the quote form looks on the quote cart page“ – auf Multiple step oder Single page gestellt.
Was die Produktzeilen zeigen	Quote cart page	Product list columns – „The product details shown as columns in the customer's quote cart“ – siehe Angebotene Produktgruppe.
Der Kundschaft erlauben, Produkte zu gruppieren	Quote cart page	Enable Quote Sections – „Lets customers group the products in their quote cart into named sections“ – siehe Angebotene Produktgruppe.
Text und Platzierung des Buttons	Button & widget	Button-Text, Klickaktion, Button-Position und wer ihn sehen kann.
Was nach dem Absenden passiert	Success message	Der Dankestext und Redirect to custom URL.

Hinweis

Der Editor warnt selbst davor, wenn Sie mitten in der Bearbeitung zwischen Tabs wechseln wollen: „Save your changes before switching tabs to avoid losing them.“

Nächste Schritte

• Felder für Kundeninformationen – Feinabstimmung dessen, was Sie abfragen
• Angebotene Produktgruppe – Produktspalten und Angebotsabschnitte auf der Angebotswarenkorb-Seite
• reCAPTCHA hinzufügen – das Formular vor Spam schützen
• B2B-Formular erstellen – die Vorlage für Geschäftskundschaft