So fügen Sie Ihrem WordPress-Bestellformular eine Auswahloption für die Abholung im Laden hinzu

Stellen Sie sich folgendes Szenario vor: Ein Kunde landet auf Ihrer Website, legt zwei Artikel in den Warenkorb und geht zur Kasse, bereit zum Kauf. Dann gelangt er zum Abschnitt „Versand“ und zögert. Er wohnt nur drei Häuserblocks von Ihrem Geschäft entfernt. Will er wirklich Versandkosten bezahlen und zwei Tage warten, wenn er in der Mittagspause einfach zu Fuß hinübergehen könnte?

Wenn Ihr Formular keine Abholoption bietet, schließen sie wahrscheinlich den Tab und kontaktieren Sie stattdessen. Oder schlimmer noch: Sie kaufen bei einem Mitbewerber, der die Abholung unkompliziert gestaltet.

„Online kaufen, im Laden abholen“ (BOPIS) ist längst nicht mehr nur etwas für große Einzelhändler. Auch lokale Geschäfte, Restaurants, Bäckereien und sogar Floristen bieten diesen Service an, weil die Kunden ihn erwarten. Und das Beste daran ist: Sie benötigen keine vollwertige E-Commerce-Plattform, um dies umzusetzen. Mit WPForms und dem Geolocation-Add-on können Sie jedem Ihrer WordPress-Bestellformulare eine interaktive Auswahlfunktion für die Abholung im Laden hinzufügen.

Ich kann dir genau zeigen, wie das geht. Los geht’s!

So fügen Sie Ihrem WordPress-Bestellformular eine Auswahloption für die Abholung im Laden hinzu (Schritt für Schritt)

Was Sie vor dem Start benötigen

Eine kurze Bestandsaufnahme, bevor wir loslegen:

  • WPForms Pro oder höher. Das Geolocation-Add-on ist in den Pro-Tarifen und höher enthalten.
  • Das Geolocation-Add-on wurde installiert und aktiviert.
  • Ein Google Places-API-Schlüssel oder ein Mapbox-Zugriffstoken. Beides funktioniert – wir erklären Ihnen, wie Sie beides einrichten.
  • Eine Liste Ihrer Abholstellen mit vollständigen Adressen, Firmennamen und allen Informationen, die Sie Ihren Kunden mitteilen möchten (Öffnungszeiten, Hinweise zum Parken, Wegbeschreibung zum Eingang).

Das war’s! Eigenen Code schreiben? Nein. Ein separates Plugin für die Filialsuche? Nicht nötig. Zwischen verschiedenen Tools hin- und herwechseln? Niemals!

Aber auch… warum?

Warum einen Tonabnehmer-Wahlschalter statt eines einfachen Dropdown-Menüs verwenden?

Sie könnten ein normales Dropdown-Feld verwenden, in dem Ihre Filialstandorte aufgelistet sind. Das würde funktionieren. Aber eine interaktive Karte bietet drei Vorteile, die ein Dropdown-Feld niemals bieten kann:

  • Es beantwortet die Frage „Welcher Standort ist am nächsten?“ auf anschauliche Weise. Das ist besonders hilfreich, wenn die Namen der Standorte nicht selbsterklärend sind (ein Kunde kennt vielleicht den Unterschied zwischen „Riverside“ und „Bridgeview“ nicht).
  • Das schafft Vertrauen. Ein echter Standortpin zeigt den Kunden, dass Sie ein echtes Unternehmen mit einer echten Adresse sind. Das ist für Erstkäufer wichtig.
  • Das verringert Verwechslungen bei der Abholung. Wenn ein Kunde den Marker auf der Karte sieht und ihn selbst auswählt, ist die Wahrscheinlichkeit viel geringer, dass er am falschen Ort erscheint.

Schritt 1: Installiere und aktiviere das Geolocation-Add-on

Melden Sie sich in Ihrem WordPress-Dashboard an und gehen Sie zu WPForms » Addons. Suchen Sie nach „Geolocation“ und klicken Sie auf „Addon installieren“. WordPress kümmert sich um den Rest.

WPForms Geolokalisierung Addon

Sobald die Funktion aktiviert ist, erscheint in Ihren WPForms-Einstellungen eine neue Registerkarte „Geolokalisierung“.

Schritt 2: Google Places verbinden

Das Feld „Karte“ ruft Kartendaten von Google Places ab. Du benötigst ein kostenloses Google Cloud-Konto und einen API-Schlüssel.

Sobald du deinen API-Schlüssel erhalten hast, gehe zu WPForms » Einstellungen » Geolokalisierung, füge den Schlüssel ein und speichere die Einstellungen.

Falls Sie beim Schritt mit dem API-Schlüssel nicht weiterkommen, finden Sie in der Dokumentation zum Geolocation-Addon eine ausführliche Einrichtungsanleitung, die Sie Schritt für Schritt durch die Google Cloud Console führt.

Dies ist der einzige etwas technischere Schritt bei der gesamten Einrichtung – er dauert etwa 10 Minuten und muss nur einmal durchgeführt werden.

Google Places API-Schlüssel

Schritt 3: Beginnen Sie mit der Vorlage für das Bestellformular zur Abholung im Geschäft

Sie können das Formular von Grund auf neu erstellen, aber WPForms bietet bereits eine Vorlage, die Ihnen 90 % der Arbeit abnimmt. Suchen Sie unter „WPForms“ » „Neu hinzufügen“ nach„Store Pickup Order Form“.

Die Vorlage enthält bereits folgende Elemente:

  • Bildbasierte Produktauswahl
  • Mengen- und Farboptionen
  • Felder für den Kundenkontakt
  • Ein Kartenfeld zur Standortauswahl
  • Ein Stripe-Kreditkartenfeld
  • Eine berechnete Gesamtsumme, die in Echtzeit aktualisiert wird
  • Kontrollkästchen zur Bestätigung der Nutzungsbedingungen

Mit dieser Vorlage verfügen Sie über ein funktionsfähiges Bestellformular, in das bereits eine Auswahlfunktion für die Abholung integriert ist. Von hier aus können Sie das Formular anpassen – Sie müssen nicht bei Null anfangen.

Schritt 4: Fügen Sie Ihre Abholorte in das Feld „Karte“ ein

Suchen Sie im Formular-Generator das Feld „Karte“ im Abschnitt „Spezialfelder“. Klicken Sie darauf oder ziehen Sie es in die Formularvorschau, um es hinzuzufügen.

Klicken Sie anschließend in der Vorschau auf das Feld „Karte“, um dessen Feldoptionen zu öffnen. Auf der Registerkarte „Allgemein“ finden Sie den Abschnitt „Standorte“ mit Feldern für jeden Abholort, den Sie anzeigen möchten.

Für jeden Standort:

  1. Geben Sie eine Adresse in das Adressfeld ein. Google Places schlägt Ihnen Vorschläge vor – wählen Sie den passenden Eintrag aus.
  2. Geben Sie einen Namen ein (etwas, das Kunden wiedererkennen, z. B. „Flagship-Store in der Innenstadt“ oder „Abholschalter Eastside“).
  3. Fügen Sie optional eine Beschreibung hinzu – hier können Sie Details angeben, die Anrufe beim Kundenservice ersparen (Abholzeiten, welche Tür genutzt werden soll, ob bei Ankunft angerufen werden soll).
  4. Klicken Sie auf die Schaltfläche „+“, um den nächsten Standort hinzuzufügen.
Kartenfeld mit Informationen

Ein paar wichtige Einstellungen auf der Administrationsseite:

  • Standorte in der Nähe finden – wenn Sie diese Option im Builder aktivieren, fragt Ihr Browser nach Ihrem Standort (dem des Administrators), und die Adressvervollständigung zeigt vorrangig Vorschläge in Ihrer Nähe an. Das ist praktisch, wenn sich alle Ihre Abholorte in derselben Stadt befinden wie Ihr Büro. Dies hat keinen Einfluss darauf, was Kunden auf der Benutzeroberfläche sehen.
  • Zoomstufe – standardmäßig auf 15 eingestellt, was einem guten Zoom auf Straßenebene entspricht. 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 alle Standorte anzuzeigen, und diese Einstellung wird deaktiviert.

Schritt 5: Verwandle die Karte in einen Selektor (das ist der entscheidende Schritt)

Standardmäßig ist das Feld „Karte“ schreibgeschützt – Kunden können Ihre Standorte zwar ansehen, aber keinen auswählen. Um es in eine echte Auswahlfunktion für die Abholung umzuwandeln, aktivieren Sie beide Schalter auf der Registerkarte „Allgemein“:

  • Standortliste anzeigen – zeigt den Namen und die Adresse jedes Standorts in einer Textliste unterhalb der Karte an. Dies ist wichtig für die Barrierefreiheit und für Nutzer von Mobilgeräten, denen die kleinen Markierungen auf der Karte Schwierigkeiten bereiten.
  • Standortauswahl zulassen – fügt neben jedem Standort in der Liste Optionsfelder hinzu. Dadurch wird die Karte zu einem Formularfeld.

Achtung!

Die Option „Standortauswahl zulassen“ ist nur verfügbar, wenn mindestens zwei Standorte konfiguriert sind UND die Option „Standortliste anzeigen“ aktiviert ist. Wenn die Schaltfläche ausgegraut ist, überprüfe zunächst diese beiden Punkte.

Schritt 6: Passen Sie die Kartenmarkierungen und die Anzeige an

Ein paar kleine Änderungen, durch die die Karte einen individuellen Charakter erhält und nicht mehr wie eine Standardvorlage wirkt:

Benutzerdefinierte Markierungen – Öffne für jeden Standort das Dropdown-Menü „Symbol“ und wähle:

  • Symbol – Wählen Sie aus über 2.000 Font Awesome-Symbolen (Suche im Symbol-Auswahlfeld). Standardmäßig wird ein Stern angezeigt.
  • Bild – Klicken Sie auf „Bild hochladen“, um Ihr Logo oder einen benutzerdefinierten Pin aus Ihrer Medienbibliothek zu verwenden.
Kartenfeld-Symbolauswahl

Legen Sie anschließend die Größe (Klein, Mittel oder Groß) und die Farbe mithilfe der Farbauswahl fest (voreingestellte Farben, eine benutzerdefinierte Drag-and-Drop-Auswahl oder ein Hex-Wert). Ein größerer Marker mit Ihrem Logo hilft Ihren Filialen, sich auf der Karte von anderen Unternehmen abzuheben.

Einstellungen auf der Registerkarte „Erweitert“ – Klicken Sie in den Feldoptionen auf die Registerkarte „Erweitert“, um Einstellungen für Darstellung und Interaktion vorzunehmen:

  • Anzeige: Vollbild ausblenden, Kartenansicht ausblenden (Satelliten-/Geländeansicht), Standortinformationen ausblenden (Popups, die beim Klicken auf eine Markierung erscheinen), Street View ausblenden. Die meisten dieser Optionen sind standardmäßig deaktiviert, um eine übersichtlichere Darstellung zu gewährleisten.
  • Interaktiv: Kamerasteuerung ausblenden, Zoom ausblenden, Ziehen deaktivieren, Zoomen mit der Maus deaktivieren.
  • Sonstiges: In Eintrag anzeigen, Miniaturansicht in Eintrag anzeigen (wie die Karte in den Eintragsdatensätzen angezeigt wird), Beschriftung ausblenden.

Achtung!

Sie können entweder „Ziehen deaktivieren“ oder „Mauszoom deaktivieren“ aktivieren – nicht beides. Wenn Sie eine der beiden Optionen aktivieren, wird die andere ausgegraut. Dadurch wird verhindert, dass die Karte vollständig statisch wird.

Schritt 7: Verwenden Sie bedingte Logik, um Details zur Abholung anzuzeigen

Hier ist ein Detail, das in den meisten Anleitungen übersehen wird: Ihr Bestellformular enthält wahrscheinlich Felder, die nur für die Abholung oder den Versand gelten – nicht für beides. Wenn Sie beide Optionen anbieten, fügen Sie oben im Formular ein Optionsfeld ein: „Wie möchten Sie Ihre Bestellung erhalten?“, mit den Optionen „Abholung“ und „Versand“.

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

  • Das Feld „Karte“ wird nur angezeigt, wenn „Abholung“ ausgewählt ist.
  • Die Felder für die Lieferadresse werden nur angezeigt, wenn „Versenden“ ausgewählt ist.

So bleibt Ihr Formular kurz und auf das beschränkt, was der Kunde tatsächlich möchte.

Schritt 8: Testen Sie es und veröffentlichen Sie es anschließend

Speichern Sie Ihr Formular und binden Sie es mithilfe des WPForms-Blocks in eine Seite ein. Bevor Sie es irgendwo bewerben, testen Sie es selbst sowohl auf dem Desktop als auch auf dem Handy:

  • Lädt die Karte schnell?
  • Wird der von Ihnen ausgewählte Ort tatsächlich in der Bestätigungs-E-Mail angezeigt?
  • Wird die Eingabe unter „WPForms“ » „Einträge“ korrekt angezeigt, wenn Sie sich die übermittelten Daten ansehen?

Stellen Sie auf der Registerkarte „Erweitert“ sicher, dass die Option „In der Bestellung anzeigen“ (und optional „Miniaturansicht in der Bestellung anzeigen“) aktiviert ist – dadurch wird der vom Kunden ausgewählte Abholort für denjenigen sichtbar, der die Bestellungen auf der Abholseite vorbereitet.

Hier machen viele Ladenbesitzer einen Schritt weiter

Sobald die grundlegende Abfragefunktion funktioniert, gibt es zwei Verbesserungen, die Sie kennen sollten:

  • Integration mit Google Kalender. Verbinden Sie das Formular mit dem gemeinsamen Kalender Ihres Teams, damit jede Abholung automatisch als Termin angezeigt wird. Einige WPForms-Kunden haben uns berichtet, dass dies ein Notizbuch am Schalter ersetzt hat, das immer wieder zu Doppelbuchungen geführt hat.
  • Speichern und später fortsetzen. Wenn Ihr Bestellformular lang ist, können Kunden mit der Funktion „Speichern und später fortsetzen“ später zurückkehren, ohne den Fortschritt zu verlieren.

Beides ist für die Funktion des Tonabnehmerwahlschalters nicht erforderlich, es handelt sich lediglich um praktische Upgrades, wenn du bereit bist.

Und das war’s auch schon! Mit dem Kartenfeld, dem Geolokalisierungs-Add-on und ein paar Minuten Konfiguration erhalten Sie einen echten, interaktiven Abholort-Wähler.

Sind Sie bereit, die Abholfunktion auf Ihrer Website einzurichten? Holen Sie sich WPForms Pro, falls Sie das noch nicht getan haben, installieren Sie das Geolocation-Add-on und legen Sie mit der Vorlage „Store Pickup Order Form“ los. Im Handumdrehen haben Sie ein funktionsfähiges Formular online!

Häufig gestellte Fragen zum Hinzufügen einer Auswahlfunktion für die Abholung im Geschäft

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

Ja. Das Feld „Karte“ ist Teil des Geolocation-Add-ons, das in der Pro-Lizenz oder einer höheren Lizenz enthalten ist. Wenn Sie WPForms Lite oder Basic nutzen, müssen Sie ein Upgrade durchführen, bevor das Add-on verfügbar wird.

Ist die Nutzung der Google Places-API kostenlos?

Für Google Cloud ist ein Abrechnungskonto erforderlich, aber Google Places bietet ein großzügiges monatliches Guthaben, das für die meisten kleinen Unternehmen die kostenlose Nutzung abdeckt. Sofern Sie nicht extrem hohe Zugriffszahlen auf Ihr Formular verzeichnen, werden Sie mit ziemlicher Sicherheit im kostenlosen Tarif bleiben. Sie können in Google Cloud auch feste Nutzungsgrenzen festlegen, wenn Sie sich damit sicherer fühlen möchten.

Was ist der Unterschied zwischen dem Feld „Adresse“ und dem Feld „Karte“?

Im Feld „Adresse“ wird die Adresse des Kunden erfasst – er gibt sie ein, und die Autovervollständigung hilft ihm dabei, die richtige auszuwählen. Das Feld „Karte“ zeigt Ihre vorkonfigurierten Standorte auf einer Karte an und ermöglicht es den Kunden, einen davon auszuwählen. Für die Auswahl eines Abholortes verwenden Sie das Feld „Karte“. Für die Lieferadresse verwenden Sie das Feld „Adresse“. Viele Bestellformulare nutzen beide.

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

Es gibt keine feste Obergrenze – du kannst so oft auf die Schaltfläche „+“ klicken, wie du möchtest, um weitere Felder hinzuzufügen. In der Praxis würde ich es bei einem einzelnen Formular jedoch auf unter 10 beschränken. Wenn du eine regionale Kette mit mehr als 30 Standorten bist, solltest du in Erwägung ziehen, zunächst ein Feld für die Postleitzahl hinzuzufügen und mithilfe von bedingter Logik nur die relevanten Filialen in der Nähe anzuzeigen.

Kann ich andere Unternehmen und Sehenswürdigkeiten auf meiner Karte ausblenden?

Ja, aber dafür ist ein zusätzlicher Schritt erforderlich. Um POIs wie Restaurants und Geschäfte in der Umgebung auszublenden, sodass nur Ihre benutzerdefinierten Markierungen angezeigt werden, müssen Sie in der Google Cloud Console einenbenutzerdefinierten Kartenstilerstellen und diesen mithilfe eines Code-Schnipsels auf das Feld „Karte“ anwenden. WPForms bieteteine Entwicklerdokumentation zur Anwendung benutzerdefinierter Kartenstile, falls Sie diesen Weg einschlagen möchten.

Wie kann ich sehen, welchen Standort ein Kunde ausgewählt hat, nachdem er das Formular abgeschickt hat?

Gehen Sie zu WPForms » Einträge und öffnen Sie die übermittelten Daten. Der ausgewählte Standort wird in den Eintragsdetails angezeigt, einschließlich Name und Adresse. Stellen Sie sicher, dass die Option „In Eintrag anzeigen“ auf der Registerkarte „Erweitert“ des Feldes „Karte“ aktiviert ist (dies ist standardmäßig der Fall), damit der Standort in den Eintragsdatensätzen und E-Mail-Benachrichtigungen angezeigt wird.

Kann ich Abholanfragen mit Google Kalender verknüpfen?

Ja – und das ist eine der nützlichsten Erweiterungen für ein Abholformular. Installieren Sie das Google Kalender-Add-on und verknüpfen Sie Ihr Formular mit einem gemeinsamen Teamkalender, sodass für jede Abholbestellung automatisch ein Kalendertermin erstellt wird. Damit gehört das Problem mit dem Notizbuch an der Theke, mit dem viele Geschäfte zu kämpfen haben, der Vergangenheit an.

Das Hinzufügen eines Standortauswahlfelds zu Ihrem Bestellformular ist nicht die einzige Möglichkeit, diese leistungsstarke Funktion zu nutzen. Buchen Sie Termine oder Veranstaltungen über Ihre WordPress-Formulare? Warum machen Sie daraus nicht ein Buchungsformular für mehrere Standorte? Mit dem Kartenfeld ist das ganz einfach! Sehen Sie sich die vollständige Anleitung an, um zu erfahren, wie das geht.

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

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

Offenlegung: Unser Inhalt wird von den Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, erhalten wir möglicherweise eine Provision. Sehen Sie, wie WPForms finanziert wird, warum es wichtig ist, und wie Sie uns unterstützen können.

Kacie Cooper

Kacie schreibt für den Blog und betreut den wöchentlichen Newsletter bei WPForms. Außerdem hat sie eine Vorliebe für die Erstellung unterhaltsamer Formularvorlagen. Seit 2016 bloggt sie auf WordPress und schreibt darüber. Mehr erfahren

Das beste WordPress Drag and Drop Form Builder Plugin

Einfach, schnell und sicher. Schließen Sie sich über 6 Millionen Website-Besitzer, die WPForms vertrauen.