So fügen Sie Ihrem WordPress-Bestellformular einen Abholort-Selektor hinzu

Stellen Sie sich dieses Szenario vor: Ein Kunde landet auf Ihrer Website, legt zwei Artikel in seine Bestellformular und geht zur Kasse, um zu kaufen. Dann stoßen sie auf den Versandbereich und halten inne. Sie wohnen drei Blocks von Ihrem Geschäft entfernt. Möchten sie wirklich für den Versand bezahlen und zwei Tage warten, wenn sie stattdessen in der Mittagspause vorbeigehen könnten?

Wenn Ihr Formular keine Abholoption anbietet, werden sie wahrscheinlich den Tab schließen und Sie stattdessen kontaktieren. Oder schlimmer noch, bei einem Konkurrenten kaufen, der die Abholung einfach macht.

Online kaufen, im Geschäft abholen (BOPIS) ist nicht mehr nur etwas für große Einzelhändler. Lokale Geschäfte, Restaurants, Bäckereien und sogar Floristen bieten es an, weil die Kunden es erwarten. Und die gute Nachricht ist, dass Sie keine vollständige E-Commerce-Plattform benötigen, um es zum Laufen zu bringen. Mit WPForms und dem Geolocation-Addon können Sie jeder Ihrer WordPress-Bestellformulare einen interaktiven Store-Pickup-Selektor hinzufügen.

Ich kann Ihnen genau zeigen, wie es geht. Los geht's!

So fügen Sie Ihrem WordPress-Bestellformular einen Store-Pickup-Selektor hinzu (Schritt für Schritt)

Was Sie vor dem Start benötigen

Schnelle Bestandsaufnahme, bevor wir eintauchen:

• WPForms Pro oder höher. Das Geolocation-Addon ist in den Pro-Plänen und höher enthalten.
• Das Geolocation-Addon ist installiert und aktiviert.
• Ein Google Places API-Schlüssel oder ein Mapbox-Zugriffstoken. Beide funktionieren – wir werden erklären, wie Sie eines von beiden einrichten.
• Eine Liste Ihrer Abholorte mit vollständigen Adressen, Geschäftsnamen und allen Details, die Kunden sehen sollen (Öffnungszeiten, Parkhinweise, Anfahrtsbeschreibungen).

Das ist alles! Benutzerdefinierter Code? Nein. Separates Store-Locator-Plugin? Nicht nötig. Zwischen Werkzeugen jonglieren? Niemals!

Aber auch… Warum?

Warum einen Pickup-Selektor anstelle eines einfachen Dropdowns hinzufügen?

Sie könnten ein normales Dropdown-Feld verwenden, das Ihre Geschäftsstandorte auflistet. Das würde funktionieren. Aber eine interaktive Karte leistet drei Dinge, die ein Dropdown niemals tun wird:

• Sie beantwortet visuell die Frage „Welcher ist mir am nächsten?“. Dies ist besonders hilfreich, wenn Ihre Standortnamen nicht eindeutig sind (ein Kunde kennt „Riverside“ vs. „Bridgeview“ möglicherweise nicht namentlich).
• Sie schafft Vertrauen. Ein echter Karten-Pin sagt den Kunden, dass Sie ein echtes Unternehmen mit einer echten Adresse sind. Das ist wichtig für Erstkäufer.
• Sie reduziert Abholverwechslungen. Wenn ein Kunde den Karten-Pin sieht und ihn selbst auswählt, ist die Wahrscheinlichkeit, dass er am falschen Ort ankommt, weitaus geringer.

Schritt 1: Installieren und aktivieren Sie das Geolocation-Addon

Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu WPForms » Addons. Suchen Sie nach „Geolocation“ und klicken Sie auf Addon installieren. WordPress erledigt den Rest.

Sobald es aktiv ist, sehen Sie einen neuen Tab „Geolocation“ in Ihren WPForms-Einstellungen.

Schritt 2: Verbinden Sie Google Places

Das Kartenfeld zieht Kartendaten von Google Places. Sie benötigen ein kostenloses Google Cloud-Konto und einen API-Schlüssel.

Sobald Sie Ihren API-Schlüssel haben, gehen Sie zu WPForms » Einstellungen » Geolocation, fügen Sie den Schlüssel ein und speichern Sie die Einstellungen.

Wenn Sie beim API-Schlüssel-Schritt nicht weiterkommen, finden Sie in der Dokumentation des Geolocation Addons eine detaillierte Einrichtungsanleitung, die Sie Schritt für Schritt durch die Google Cloud Console führt.

Dies ist der einzige, etwas technische Schritt in der gesamten Einrichtung – etwa 10 Minuten, und Sie führen ihn nur einmal durch.

Schritt 3: Beginnen Sie mit der Vorlage für das Store-Pickup-Bestellformular

Sie können dies von Grund auf neu erstellen, aber WPForms hat bereits eine Vorlage, die 90 % der Arbeit für Sie erledigt. Suchen Sie unter WPForms » Neu hinzufügen nach „Bestellformular für Abholung im Geschäft“.

Die Vorlage wird vorab geladen mit:

• Bildbasierte Produktauswahl
• Mengen- und Farboptionen
• Kundenkontaktdaten
• Ein Kartenfeld zur Standortauswahl
• Ein Stripe-Kreditkartenfeld
• Ein berechneter Gesamtbetrag, der sich in Echtzeit aktualisiert
• Kontrollkästchen zur Bestätigung der Geschäftsbedingungen

Mit dieser Vorlage haben Sie ein funktionierendes Bestellformular mit einem bereits integrierten Abholstandort-Selektor. Von hier aus passen Sie an – Sie bauen nicht bei Null auf.

Schritt 4: Fügen Sie Ihre Abholorte zum Kartenfeld hinzu

Finden Sie im Formular-Editor das Kartenfeld im Abschnitt „Fancy Fields“. Klicken Sie darauf oder ziehen Sie es in die Formularvorschau, um es hinzuzufügen.

Klicken Sie dann auf das Kartenfeld in der Vorschau, um seine Feldoptionen zu öffnen. Unter dem Reiter „Allgemein“ sehen Sie einen Abschnitt „Standorte“ mit Feldern für jeden Abholstandort, den Sie anzeigen möchten.

Für jeden Standort:

1. Geben Sie eine Adresse in das Feld „Adresse“ ein. Google Places wird die Eingabe automatisch vervollständigen – wählen Sie die richtige Übereinstimmung aus.
2. Fügen Sie einen Namen hinzu (etwas, das Kunden erkennen, wie z. B. „Downtown Flagship“ oder „Eastside Pickup Counter“).
3. Fügen Sie eine optionale Beschreibung hinzu – hier geben Sie die Details ein, die Kundenserviceanrufe sparen (Abholzeiten, welche Tür Sie benutzen sollen, ob Sie bei Ankunft anrufen sollen).
4. Klicken Sie auf das +-Symbol, um den nächsten Standort hinzuzufügen.

Ein paar Einstellungen auf Admin-Seite, die es wert sind, bekannt zu sein:

• Standorte in der Nähe finden – wenn Sie dies im Builder aktivieren, fragt Ihr Browser nach Ihrem Standort (dem des Administrators), und die Adressautovervollständigung priorisiert Vorschläge in Ihrer Nähe. Praktisch, wenn sich alle Ihre Abholstandorte in derselben Stadt wie Ihr Schreibtisch befinden. Dies wirkt sich nicht darauf aus, was Kunden im Frontend sehen.
• Zoomstufe – Standard ist 15, was eine gute Straßenansicht ist. Diese Einstellung wird nur verwendet, wenn Sie einen einzelnen Standort haben; sobald Sie mehrere Standorte hinzufügen und die Auswahl aktivieren, passt sich die Karte automatisch an, um sie alle anzuzeigen, und diese Einstellung wird deaktiviert.

Schritt 5: Verwandeln Sie die Karte in einen Selektor (das ist der wichtige Teil)

Standardmäßig ist das Kartenfeld schreibgeschützt – Kunden können Ihre Standorte ansehen, aber keinen auswählen. Um es in einen echten Abholselektor zu verwandeln, aktivieren Sie beide dieser Schalter unter dem Reiter „Allgemein“:

• Standortliste anzeigen – zeigt den Namen und die Adresse jedes Standorts in einer Textliste unter der Karte an. Dies ist wichtig für die Barrierefreiheit und für mobile Benutzer, die Schwierigkeiten mit kleinen Kartenmarkierungen haben.
• Standortauswahl zulassen – fügt neben jedem Standort in der Liste Optionsfelder hinzu. Dies verwandelt die Karte in ein Formularfeld.

Schritt 6: Passen Sie die Kartenmarkierungen und die Anzeige an

Ein paar Anpassungen, die die Karte gebrandet und nicht generisch wirken lassen:

Benutzerdefinierte Marker — Öffnen Sie für jeden Standort das Dropdown-Menü Symbol und wählen Sie:

• Symbol — Wählen Sie aus über 2.000 Font Awesome-Symbolen (suchen Sie im Symbol-Auswahlfeld). Standard ist ein Stern.
• Bild — Klicken Sie auf Bild hochladen, um Ihr Logo oder eine benutzerdefinierte Stecknadel aus Ihrer Mediathek zu verwenden.

Legen Sie dann die Größe (Klein, Mittel oder Groß) und die Farbe mit dem Auswahlfeld fest (Voreingestellte Farben, ein benutzerdefiniertes Drag-and-Drop-Auswahlfeld oder ein Hex-Wert). Eine größere, gebrandete Markierung hilft Ihren Geschäften, sich von anderen Unternehmen auf der Karte abzuheben.

Einstellungen im Tab Erweitert — Klicken Sie im Tab Erweitert unter Feldoptionen auf die Steuerelemente für Darstellung und Interaktion:

• Darstellung: Vollbildschirm ausblenden, Kartentyp ausblenden (Satellit/Gelände), Standortinformationen ausblenden (Popups, die beim Klicken auf einen Marker erscheinen), Street View ausblenden. Die meisten sind standardmäßig ausgeblendet, um ein saubereres Erscheinungsbild zu erzielen.
• Interaktiv: Kamerasteuerung ausblenden, Zoom ausblenden, Ziehen deaktivieren, Mauszoom deaktivieren.
• Andere: In Eintrag anzeigen, Miniaturansicht im Eintrag anzeigen (wie die Karte in den Einreichungsdatensätzen erscheint), Beschriftung ausblenden.

Schritt 7: Verwenden Sie bedingte Logik, um nur Abholdetails anzuzeigen

Hier ist ein Detail, das die meisten Tutorials überspringen: Ihre Bestellformulare haben wahrscheinlich Felder, die nur für die Abholung oder den Versand gelten – nicht für beides. Wenn Sie beides anbieten, fügen Sie oben im Formular einen Radiobutton hinzu: „Wie möchten Sie Ihre Bestellung erhalten?“ mit den Optionen Abholung und Versand.

Verwenden Sie dann die bedingte Logik (in WPForms Pro integriert), um anzuzeigen:

• Das Feld Karte nur, wenn „Abholung“ ausgewählt ist.
• Die Versandadressfelder nur, wenn „Versand“ ausgewählt ist.

Dies hält Ihr Formular kurz und relevant für das, was der Kunde tatsächlich möchte.

Schritt 8: Testen Sie es und veröffentlichen Sie es dann

Speichern Sie Ihr Formular und betten Sie es mit dem WPForms-Block auf einer Seite ein. Bevor Sie es irgendwo bewerben, testen Sie es selbst auf Desktop und Mobilgeräten:

• Lädt die Karte schnell?
• Erscheint der von Ihnen ausgewählte Standort tatsächlich in der Bestätigungs-E-Mail?
• Wird er korrekt in WPForms » Einträge angezeigt, wenn Sie sich die Einreichung ansehen?

Stellen Sie im Tab Erweitert sicher, dass In Eintrag anzeigen (und optional Miniaturansicht im Eintrag anzeigen) aktiviert ist – dies ist das, was den ausgewählten Standort des Kunden für denjenigen sichtbar macht, der die Bestellungen auf der Abholseite vorbereitet.

Wo viele Ladenbesitzer dies als Nächstes tun

Sobald das grundlegende Abholformular funktioniert, sind zwei Upgrades wissenswert:

• Google Kalender-Integration. Verbinden Sie das Formular mit dem gemeinsamen Kalender Ihres Teams, damit jede Abholung automatisch als Ereignis angezeigt wird. Einige WPForms-Kunden haben uns erzählt, dass dies ein Notizbuch am Schalter ersetzt hat, das zu Doppelbuchungen führte.
• Speichern und Fortsetzen. Wenn Ihr Bestellformular lang ist, können Kunden mit Speichern und Fortsetzen später zurückkehren, ohne den Fortschritt zu verlieren.

Keines davon ist für die Funktion des Abhol-Selectors erforderlich, es sind nur nette Upgrades, wenn Sie bereit sind.

Und das ist die ganze Einrichtung! Ein Kartenfeld plus das Geolocation-Addon plus ein paar Minuten Konfiguration ergeben einen echten, interaktiven Abholort-Selektor.

Bereit, Abholung auf Ihrer Website hinzuzufügen? Holen Sie sich WPForms Pro, falls Sie es noch nicht haben, installieren Sie das Geolocation-Addon und beginnen Sie mit der Store Pickup Order Form-Vorlage. Sie können in kürzester Zeit ein funktionierendes Formular live schalten!

FAQs zum Hinzufügen eines Store-Pickup-Selectors

Benötige ich WPForms Pro, um das Kartenfeld zu verwenden?

Ja. Das Kartenfeld ist Teil des Geolocation-Addons, das in der Pro-Lizenz oder höher enthalten ist. Wenn Sie WPForms Lite oder Basic verwenden, müssen Sie ein Upgrade durchführen, bevor das Addon verfügbar wird.

Ist die Google Places API kostenlos nutzbar?

Google Cloud erfordert ein Abrechnungskonto, aber Google Places beinhaltet ein großzügiges monatliches Guthaben, das die kostenlose Nutzung für die meisten Kleinunternehmen abdeckt. Es sei denn, Sie haben massiven Traffic auf Ihrem Formular, werden Sie fast sicher innerhalb der kostenlosen Stufe bleiben. Sie können auch harte Nutzungsgrenzen in Google Cloud festlegen, wenn Sie auf Nummer sicher gehen wollen.

Was ist der Unterschied zwischen dem Adressfeld und dem Kartenfeld?

Das Adressfeld erfasst die Adresse des Kunden – er tippt sie ein, und Autovervollständigung hilft ihm, die richtige auszuwählen. Das Kartenfeld zeigt Ihre vorkonfigurierten Standorte auf einer Karte an und lässt Kunden einen auswählen. Für einen Abholort-Selektor möchten Sie das Kartenfeld. Für eine Lieferadresse möchten Sie das Adressfeld. Viele Bestellformulare verwenden beides.

Wie viele Abholorte kann ich einem einzelnen Kartenfeld hinzufügen?

Es gibt keine harte Grenze – Sie können immer wieder auf die Schaltfläche + klicken, um weitere hinzuzufügen. Praktisch würde ich es bei einem einzelnen Formular unter 10 halten. Wenn Sie eine regionale Kette mit über 30 Standorten sind, sollten Sie zuerst ein Postleitzahlenfeld hinzufügen und die bedingte Logik verwenden, um nur die relevanten nahegelegenen Geschäfte anzuzeigen.

Kann ich andere Unternehmen und Points of Interest auf meiner Karte ausblenden?

Ja, aber es erfordert einen zusätzlichen Schritt. Um POIs wie Restaurants und benachbarte Geschäfte auszublenden, sodass nur Ihre benutzerdefinierten Marker angezeigt werden, müssen Sie in der Google Cloud Console einen benutzerdefinierten Kartenstil erstellen und ihn mit einem Code-Snippet auf das Kartenfeld anwenden. WPForms hat Entwicklerdokumentation zur Anwendung benutzerdefinierter Kartenstile, wenn Sie diesen Weg gehen möchten.

Wie sehe ich, welchen Standort ein Kunde nach dem Absenden des Formulars ausgewählt hat?

Gehen Sie zu WPForms » Einträge und öffnen Sie die Einreichung. Der ausgewählte Standort wird in den Details des Eintrags angezeigt, einschließlich Name und Adresse. Stellen Sie sicher, dass "In Eintrag anzeigen" auf der Registerkarte "Erweitert" des Kartenfelds aktiviert ist (standardmäßig ist dies der Fall), damit der Standort in den Eintragsaufzeichnungen und E-Mail-Benachrichtigungen angezeigt wird.

Kann ich Abholungseinsendungen mit Google Kalender verbinden?

Ja – und es ist eines der nützlichsten Upgrades für ein Abholformular. Installieren Sie das Google Kalender-Addon und verbinden Sie Ihr Formular mit einem gemeinsamen Teamkalender, sodass jede Abholbestellung automatisch einen Kalenderereignis erstellt. Dies ersetzt das Notizbuch-am-Schalter-Problem, mit dem viele Geschäfte zu kämpfen haben.

Erstellen Sie als Nächstes ein mehrstufiges WordPress-Buchungsformular

Die Platzierung eines Abholort-Auswahlfeldes in Ihrem Bestellformular ist nicht die einzige Möglichkeit, diese leistungsstarke Funktion zu nutzen. Buchen Sie Termine oder Veranstaltungen mit Ihren WordPress-Formularen? Warum nicht daraus ein Buchungsformular für mehrere Standorte machen? Mit dem Kartenfeld können Sie das! Sehen Sie sich das vollständige Tutorial an, um mehr zu erfahren.

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.