So fügen Sie Autovervollständigung für Adressfelder in WordPress hinzu

Haben Sie jemals einen Kunden verloren, weil Ihr WordPress-Formular zu lang oder frustrierend auszufüllen war? Das passiert ständig. Ein Käufer ist bereit zu kaufen, aber dann bleibt er beim Eingeben einer langen Adresse stecken, besonders auf einem Mobilgerät.

Ein kleiner Tippfehler kann zu einer fehlgeschlagenen Zustellung führen, und in vielen Fällen gibt der Kunde einfach auf, bevor er fertig ist.

Deshalb ist Adress-Autocomplete so hilfreich. Es schlägt die richtige Adresse vor, sobald Benutzer mit der Eingabe beginnen, was den Prozess schneller, einfacher und weniger fehleranfällig macht. Das Ergebnis sind glücklichere Kunden und weniger verlorene Verkäufe.

Außerdem ist es einfach einzurichten. In dieser Anleitung zeige ich Ihnen Schritt für Schritt, wie Sie Adress-Autocomplete zu Ihren WordPress-Formularen hinzufügen, indem Sie WPForms und sein Geolocation-Addon verwenden.

Warum Adress-Autocomplete-Felder in WordPress hinzufügen?

Das Hinzufügen von Adress-Autocomplete zu Ihrer WordPress-Website ist eine einfache Möglichkeit, die Benutzererfahrung Ihrer Website zu verbessern. In einem E-Commerce-Shop hilft es beispielsweise Kunden, ihre Adresse schneller einzugeben und Tippfehler zu vermeiden.

So funktioniert es: Während Käufer tippen, erscheinen Adressvorschläge, die von Google Places/Maps abgerufen werden. Dies ermöglicht es ihnen, einfach die richtige auszuwählen, und das Formular wird automatisch ausgefüllt.

Das reduziert Fehler und beschleunigt den Checkout. Und schnellere, genauere Checkouts steigern den Umsatz und erhöhen die Wahrscheinlichkeit, dass Käufer wiederkommen.

Neben Online-Shops hilft die Adress-Autovervollständigung, Fehler in Registrierungs- und Buchungsformularen zu reduzieren. Außerdem erleichtert sie das Ausfüllen jeder Art von Formular, insbesondere auf Mobilgeräten.

Jetzt, da Sie die Vorteile von Autocomplete-Adressfeldern in WordPress verstehen, zeige ich Ihnen Schritt für Schritt, wie Sie diese hinzufügen.

Hier ist eine kurze Übersicht über alle Schritte, die ich in diesem Artikel behandeln werde:

• Schritt 1: Erstellen Sie einen Google Places API-Schlüssel
• Schritt 2: Installieren Sie das WPForms-Plugin und das Geolocation-Addon
• Schritt 3: Adressautovervollständigung in Ihren WordPress-Formularen aktivieren
• Schritt 4: Erstellen Sie ein Formular mit Adress-Autovervollständigung
• Schritt 5: Betten Sie Ihr WordPress-Formular mit Adress-Autocomplete ein
• Bonus-Tipp: Verfolgen und reduzieren Sie Formularabbrüche in WordPress
• FAQs zu Autovervollständigung für Adressfelder in WordPress-Formularen
• Weitere Anleitungen zur Verwendung von WordPress-Formularen

Bereit? Fangen wir an.

Schritt 1: Erstellen Sie einen Google Places API-Schlüssel

Um WPForms mit Google Maps zu verbinden und die Autovervollständigungsfunktion für Adressen zu aktivieren, benötigen Sie einen Google Places API-Schlüssel. Lassen Sie uns den Vorgang durchgehen.

Um Ihren Schlüssel zu erhalten, müssen Sie zur Google Maps Platform wechseln, die in der Google Cloud Console verwaltet wird. Die Konsole mag etwas komplex aussehen, aber keine Sorge – ich führe Sie durch die genauen Schritte, die Sie benötigen.

Zuerst klicken wir auf „Projekt erstellen“.

Auf dem nächsten Bildschirm müssen Sie Ihrem neuen Projekt einen Namen geben. Ich empfehle, einen Namen zu verwenden, der Ihnen hilft, es später leicht zu identifizieren.

Wenn Sie dann eine Organisation haben, mit der Sie sich verbinden möchten, können Sie auf den Link „Durchsuchen“ klicken, um ein Dropdown-Menü mit Optionen anzuzeigen. Alternativ können Sie „Keine Organisation“ auswählen.

Sobald alles gut aussieht, können Sie auf die Schaltfläche „Erstellen“ klicken.

Öffnen Sie auf dem nächsten Bildschirm den Tab „Bibliothek“.

Von dort aus müssen Sie drei spezifische APIs aktivieren. Stellen Sie sich diese als ein Team vor, das zusammenarbeitet:

• Places API: Dies ist der Starspieler, der die Adress-Autocomplete-Vorschläge liefert, während Sie tippen.
• Maps JavaScript API: Dies ermöglicht es Ihnen, eine Kartenansicht der ausgewählten Adresse direkt auf Ihrem Formular anzuzeigen (was eine coole, optionale Funktion ist).
• Geocoding API: Diese arbeitet im Hintergrund, um Adressen in Kartenkoordinaten umzuwandeln.

Der einfachste Weg, sie zu finden, ist die Suchleiste – suchen Sie einfach, wählen Sie die API aus und klicken Sie auf „Aktivieren“. Wiederholen Sie dies, bis alle drei APIs aktiv sind.

Wenn das erledigt ist, generieren Sie einen eindeutigen Schlüssel, den Ihre Website zur Kommunikation mit den Google APIs verwendet.

Selbst wenn Sie drei verschiedene APIs aktiviert haben, benötigen Sie keine drei separaten Schlüssel. Ein einziger API-Schlüssel kann Ihrer Website Zugriff auf alle gewähren, solange Sie die richtigen Einschränkungen festlegen.

Dazu können Sie zum Tab „Anmeldeinformationen“ wechseln. Klicken Sie dann auf Anmeldeinformationen erstellen » API-Schlüssel.

Dies öffnet einen Bereich zur Konfiguration des API-Schlüssels.

Wählen Sie unter „Anwendungsbeschränkungen“ „Websites“ aus, damit der Schlüssel nur auf Ihrer Website funktioniert.

Dies öffnet die Konfigurationsoption „Website-Beschränkungen“.

Hier können Sie einfach Ihren Domainnamen eingeben und auf 'Fertig' klicken.

Danach können Sie zum Abschnitt „API-Beschränkungen“ fortfahren.

Lassen Sie uns zuerst die Option „Schlüssel einschränken“ aktivieren.

Wählen Sie dann im Dropdown-Menü „APIs auswählen“ die drei APIs aus, die Sie gerade aktiviert haben, und klicken Sie auf „Ok“.

Dies beschränkt den Zugriff des Schlüssels nur auf diese APIs.

Nach dem Speichern Ihrer Änderungen sehen Sie Ihren eindeutigen API-Schlüssel.

Kopieren Sie ihn – Sie werden ihn im nächsten Schritt benötigen, wenn Sie ihn mit WPForms verbinden.

Schritt 2: Installieren Sie das WPForms-Plugin und das Geolocation-Addon

Für dieses Tutorial verwenden wir WPForms, den besten Formularersteller für WordPress. Er verfügt über ein leistungsstarkes Geolocation-Addon, das das Hinzufügen von Adress-Autocomplete unglaublich einfach macht.

Bei WPBeginner verwenden wir WPForms, um unser Kontaktformular anzuzeigen und unsere jährlichen Leserbefragungen durchzuführen. Sehen Sie sich unseren vollständigen WPForms-Testbericht für weitere Einblicke in das Plugin an.

Das Erste, was Sie tun müssen, ist, sich für ein WPForms-Konto anzumelden. Klicken Sie auf deren Website einfach auf „WPForms jetzt holen“, um loszulegen.

Sie können dann einen Plan auswählen und mit dem Checkout-Prozess fortfahren.

Nach der Anmeldung müssen Sie das WPForms-Plugin installieren und aktivieren.

Navigieren Sie in Ihrem WordPress-Adminbereich einfach zu Plugins » Neues Plugin hinzufügen.

Danach können Sie die Suchfunktion verwenden, um das WPForms-Plugin zu finden.

Klicken Sie in den Suchergebnissen auf „Jetzt installieren“ und dann auf die Schaltfläche „Aktivieren“, wenn sie erscheint.

Wenn Sie Hilfe benötigen, können Sie unserer Anleitung zur Installation eines WordPress-Plugins folgen.

Nach der Aktivierung müssen Sie Ihren Lizenzschlüssel überprüfen.

Gehen Sie zunächst zu WPForms » Einstellungen, geben Sie Ihren Lizenzschlüssel in das vorgesehene Feld ein und klicken Sie auf die Schaltfläche „Schlüssel überprüfen“. Sie finden Ihren Lizenzschlüssel in Ihrem WPForms-Konto.

Wenn das erledigt ist, können Sie zu WPForms » Addons im WordPress-Adminbereich gehen, um das Geolocation-Addon zu installieren.

Blättern Sie auf dem nächsten Bildschirm durch die Optionen (oder verwenden Sie die Suchleiste) und klicken Sie auf „Addon installieren“ für das Geolocation-Addon.

WPForms installiert und aktiviert das Add-on automatisch innerhalb weniger Augenblicke.

Schritt 3: Adressautovervollständigung in Ihren WordPress-Formularen aktivieren

Jetzt, da Sie Ihren eindeutigen API-Schlüssel und das Geolocation-Addon haben, ist es an der Zeit, die Adress-Autovervollständigung in Ihrem WordPress-Formular zu aktivieren.

Gehen Sie in Ihrem WordPress-Dashboard zu WPForms » Einstellungen. Wechseln Sie dann oben zum Tab „Geolocation“.

Hier finden Sie einige Optionen, die Sie anpassen können:

• Places Provider – Für diese Anleitung wählen wir 'Google Places'.
• API-Schlüssel – Fügen Sie hier den eindeutigen API-Schlüssel ein, den Sie in Schritt 1 generiert haben. Dies ermöglicht die automatische Vervollständigung von Adressen und die Anzeige von Google Maps in Ihren Formularen.
• Aktueller Standort – Aktivieren Sie diese Option, um die Standorte der Benutzer automatisch in Ihren Formularen zu füllen.

Vergessen Sie nicht, unten in diesem Bereich auf „Einstellungen speichern“ zu klicken.

Als Nächstes müssen Sie nur noch die Autovervollständigung in dem Formular aktivieren, in dem Sie sie verwenden möchten. Sie können entweder ein vorhandenes Formular bearbeiten oder ein neues erstellen.

Schritt 4: Erstellen Sie ein Formular mit Adress-Autovervollständigung

Bis jetzt haben Sie WPForms mit Google Maps verbunden. In diesem Schritt erstellen wir ein Formular mit einem Adressfeld.

Gehen Sie zunächst in Ihrem WordPress-Adminbereich zu WPForms » Neu hinzufügen.

Auf dem nächsten Bildschirm können Sie Ihrem Formular einen Namen geben.

Sie sollten einen klaren, beschreibenden Namen verwenden, damit es einfacher ist, ihn zu organisieren, wenn Sie weitere Formulare erstellen.

Danach wählen Sie aus, wie Sie Ihr Formular erstellen möchten: mit einer leeren Leinwand, einer vorgefertigten Vorlage oder einem KI-Formularersteller.

Wenn Sie den KI-gestützten Formularersteller verwenden möchten, müssen Sie nur eine einfache Eingabeaufforderung eingeben. WPForms AI generiert dann das Formular in wenigen Sekunden für Sie.

Für dieses Tutorial verwende ich jedoch eine fertige Vorlage.

WPForms bietet über 2.000 Formularvorlagen, sodass Sie leicht eine finden, die fast perfekt für Ihr Ziel ist.

Sobald Sie eine gute Vorlage gefunden haben, die Sie als Basis verwenden möchten, fahren Sie einfach mit der Maus darüber und klicken Sie auf die Schaltfläche „Vorlage verwenden“. Hier verwende ich die Vorlage Einfaches Kontaktformular.

Dies öffnet den Drag-and-Drop-Formular-Builder.

Ziehen Sie als Nächstes das Feld „Adresse“ aus dem linken Bereich und legen Sie es in Ihrem Formular ab (falls es noch nicht vorhanden ist).

Sobald das Feld „Adresse“ vorhanden ist, können Sie darauf klicken, um das Bedienfeld „Feldoptionen“ zu öffnen.

Hier können Sie die Beschriftung des Feldes anpassen, eine Feldbeschreibung hinzufügen oder ein anderes Adressschema wählen – US oder international.

Sobald Sie die allgemeinen Einstellungen angepasst haben, können Sie zum Tab „Erweitert“ wechseln.

Scrollen Sie dann im Bereich nach unten, bis Sie die Option „Adress-Autocomplete aktivieren“ finden. Schalten Sie sie ein.

Dies ermöglicht es Benutzern, ihre vollständige Adresse, einschließlich Stadt, Bundesland und Postleitzahl, direkt in Ihrem WordPress-Formular schnell automatisch auszufüllen.

Durch die Aktivierung dieser Funktion werden die Optionen „Karte anzeigen“ geöffnet. Schalten Sie sie einfach ein, um die Karte zu Ihrem Feld „Adresse“ hinzuzufügen.

Dann können Sie wählen, ob die Karte über oder unter dem Feld in Ihrem Formular angezeigt werden soll.

Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche 'Speichern' zu klicken, um Ihre Änderungen zu übernehmen.

Von hier aus können Sie Ihre Benachrichtigungen und Bestätigungen anpassen. Weitere Details finden Sie in unserem Leitfaden zur Erstellung eines Kontaktformulars.

Schritt 5: Betten Sie Ihr WordPress-Formular mit Adress-Autocomplete ein

Jetzt sind Sie bereit, Ihr Formular zu Ihrer WordPress-Website hinzuzufügen.

Klicken Sie zunächst oben im Formular-Builder auf die Schaltfläche „Einbetten“.

Ein Popup wird angezeigt, in dem Sie das Formular entweder zu einer vorhandenen Seite hinzufügen oder eine neue Seite erstellen können.

Für dieses Tutorial wähle ich „Bestehende Seite auswählen“.

Im nächsten Popup können Sie eine Seite aus der Dropdown-Liste auswählen.

Klicken Sie dann auf „Los geht’s!“, um fortzufahren.

WPForms leitet Sie zum WordPress Block-Editor weiter.

Klicken Sie hier auf das „+“-Symbol und fügen Sie den WPForms-Block hinzu.

Wählen Sie dann Ihr Formular aus dem Dropdown-Menü aus.

WPForms wird es automatisch in den Inhaltseditor laden.

Im rechten Bereich können Sie die 'Formulareinstellungen' anpassen.

Zum Beispiel möchten Sie vielleicht den Formularnamen oder die Beschreibung anzeigen, um Besuchern mehr Kontext zu geben.

Sie können Ihr Formular auch gestalten, damit es besser zum Thema Ihrer Website passt. Und sobald Sie mit dem Design zufrieden sind, klicken Sie einfach auf die Schaltfläche „Speichern“.

Das ist alles! Sie können jetzt Ihre Formularseite besuchen und versuchen, eine Adresse einzugeben.

Das Adressfeld zeigt automatisch Vorschläge von Google Maps an, sodass Benutzer ihre Adresse mit einem einzigen Klick ausfüllen können.

Sie haben die Google-Adress-Autovervollständigungsfunktion erfolgreich zu Ihren Formularen hinzugefügt.

Benutzer können Ihr Formular automatisch ausfüllen, egal ob sie in Ihrem WooCommerce-Shop auschecken oder eine Benutzerregistrierung abschließen.

So könnte es aussehen, nachdem Benutzer eine Adressvorschlags-Autovervollständigung ausgewählt haben:

Bonus-Tipp: Verfolgen und reduzieren Sie Formularabbrüche in WordPress

Formularabbruch tritt auf, wenn Personen ein Formular verlassen, ohne es abzuschicken, was oft auf eine schlechte Benutzererfahrung zurückzuführen ist.

Die Reduzierung von Formularabbrüchen ist wichtig, da sie das Wachstum Ihrer E-Mail-Liste, Ihre E-Commerce-Verkäufe und den allgemeinen Geschäftserfolg beeinträchtigen können.

Studien zeigen, dass über 77 % der Online-Käufer ihre Checkout-Formulare nicht abschließen, was bedeutet, dass viel Geld durch unvollständige Verkäufe verloren geht.

Indem Sie die Formulare, die Leute oft abbrechen, verfolgen und verbessern, können Sie diese Umsatzverluste reduzieren.

Während die automatische Vervollständigung helfen kann, gibt es immer noch andere Faktoren, die zum Abbruch von Formularen beitragen können:

• Optionale Felder werden zu Pflichtfeldern: Leute dazu zu bringen, nicht essentielle Informationen auszufüllen, kann wirklich nervig sein.
• Unklare Anweisungen: Verwirrende oder vage Formularfelder können dazu führen, dass Leute aufgeben.
• Unfreundlichkeit für Mobilgeräte: Formulare, die auf Mobilgeräten schwer zu bedienen sind, können eine große Abneigung hervorrufen.
• Technische Probleme: Probleme wie ein schlecht funktionierendes Formular oder langsame Ladezeiten können dazu führen, dass Personen es nicht ausfüllen.

Weitere Details finden Sie in unserer Anleitung zur Nachverfolgung und Reduzierung von Formularabbrüchen in WordPress.

FAQs zu Autovervollständigung für Adressfelder in WordPress-Formularen

Wie funktioniert die Adress-Autovervollständigung?

Ihr Formular verbindet sich mit einem Standortdienst wie Google Places oder Mapbox. Während Benutzer tippen, zeigt es passende Adressvorschläge an. Wenn sie eine auswählen, werden die Felder (Straße, Stadt, Postleitzahl usw.) automatisch ausgefüllt.

Funktioniert es mit meinem WordPress-Theme?

Normalerweise ja. Autocomplete funktioniert mit den meisten modernen WordPress-Themes, aber manchmal können benutzerdefinierte Skripte oder stark modifizierte Themes Konflikte verursachen.

Welche WordPress-Plugins unterstützen Adress-Autovervollständigung?

Mehrere Formular-Plugins bieten dies an, normalerweise über Add-ons oder Integrationen. WPForms mit dem Geolocation Addon ist eine der besten Optionen.

Was, wenn die Vorschläge nicht angezeigt werden?

Einige häufige Ursachen sind ein fehlender oder falscher API-Schlüssel, JavaScript-Fehler oder Theme-Konflikte sowie API-Beschränkungen (wie z. B. falsche Domain-Einstellungen).

Weitere Anleitungen zur Verwendung von WordPress-Formularen

Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Autovervollständigung für Adressfelder in WordPress hinzufügen.

Wenn Sie dies hilfreich fanden, möchten Sie vielleicht auch unsere anderen hilfreichen Anleitungen zu folgenden Themen sehen:

• So erstellen Sie WordPress-Formulare mit Dropdown-Feldern
• So erstellen Sie mehrsprachige Formulare in WordPress
• So verfolgen Sie die User Journey auf WordPress Lead-Formularen
• Expertentipps für interaktivere Formulare und höhere Konversionsraten
• Möglichkeiten, bedingte Logik in WordPress-Formularen zu verwenden (Top-Anwendungsfälle)
• So erstellen Sie ein benutzerdefiniertes Airtable-Formular in WordPress
• Ultimativer Leitfaden zur Verwendung von WordPress-Formularen

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.