Wie füge ich Felder zur automatischen Vervollständigung von Adressen in einem WordPress-Formular hinzu?

Sie fragen sich, wie Sie Ihrer Website ein WordPress-Formular zur automatischen Vervollständigung von Adressen hinzufügen können? Dann ist dieser Artikel genau das Richtige für Sie.

Wenn Ihr WordPress-Formular ein Adressfeld hat, empfehlen wir Ihnen, die Autocomplete-Funktion hinzuzufügen. Auf diese Weise ist es für Ihre Benutzer einfacher, das Adressfeld auszufüllen und das Formular erfolgreich abzusenden.

Aus diesem Grund haben wir eine detaillierte Anleitung zum Erstellen eines WordPress-Formulars zur automatischen Vervollständigung von Adressen erstellt. Also bis zum Ende lesen.

Lassen Sie uns jedoch vor dem Tutorial die Vorteile der Funktion zur automatischen Vervollständigung von Adressen und die beste Möglichkeit zum Hinzufügen zu Ihrem Formular besprechen.

Wie ist die Option zur automatischen Vervollständigung von Adressen in einem Online-Formular hilfreich?

Sie könnten einfach ein normales Adressfeld für jedes WordPress-Formular verwenden. Warum also die Option zur automatischen Vervollständigung der Adresse hinzufügen?

Nun, hier sind einige wichtige Möglichkeiten, wie die Option zur automatischen Vervollständigung von Adressen hilfreich ist:

• Das Feld für die automatische Vervollständigung von Adressen schlägt Ihren Benutzern basierend auf ihrer Eingabe automatisch Orte vor.
• Benutzer können genaue Adressen aus der Liste der verfügbaren Adressvorschläge auswählen.
• Da Benutzer nicht die vollständige Adresse eingeben müssen, können sie das Formular relativ schneller ausfüllen.
• Die Autocomplete-Funktion macht das Ausfüllen von Formularen einfach und schnell. Dies kann dazu beitragen, die erfolgreiche Übermittlung von Formularen zu steigern und das Abbrechen von Formularen zu verringern.

Daher ist es ratsam, ein Adressfeld mit automatischer Vervollständigung in Ihre Formulare aufzunehmen.

Allerdings bietet WordPress diese Funktion nicht standardmäßig an. Also, was ist Ihre beste Alternative?

Im nächsten Abschnitt erfahren Sie, wie Sie am besten ein Feld für die automatische Vervollständigung von Adressen hinzufügen.

Der beste Weg, um ein WordPress-Formular für die automatische Vervollständigung von Adressen zu erstellen

Da WordPress das Hinzufügen der Funktion zur automatischen Vervollständigung von Adressen standardmäßig nicht zulässt, müssen Sie sich stattdessen auf Plugins verlassen.

Mit dem richtigen WordPress-Plugin können Sie die Funktion problemlos zu Ihrem Formular hinzufügen. Und ein solches Plugin ist Everest Forms.

Das beliebte Drag-and-Drop-Formularerstellungs-Plugin ist möglicherweise die perfekte Ergänzung für Ihre WordPress-Website.

Dieses leistungsstarke Tool kann alles! Sie können benutzerdefinierte Formulare erstellen, ohne eine einzige Codezeile zu berühren.

Sie können die über 20 Formularfelder verwenden, um Kontaktformulare, Urlaubsantragsformulare, Bestellformulare oder andere Formulare zu erstellen, die Sie benötigen.

Darüber hinaus bietet es ein Adressfeld, in dem Sie die Option zur automatischen Vervollständigung einfach aktivieren können. Daher empfehlen wir das Everest Forms Plugin als beste Möglichkeit, Ihre Formulare mit dieser Funktion auszustatten.

Wie füge ich Felder zur automatischen Vervollständigung von Adressen in einem WordPress-Formular hinzu?

In diesem Tutorial haben wir Everest Forms verwendet, um zu demonstrieren, wie ein WordPress-Formular zum automatischen Vervollständigen einer Adresse erstellt wird.

Befolgen Sie diese 7 einfachen Schritte, um die Option zur automatischen Vervollständigung der WordPress-Google-Adresse in Ihrem Formular hinzuzufügen.

Schritt 1: Installieren und aktivieren Sie Everest Forms Pro

Beginnen Sie mit der Installation und Aktivierung des Everest Forms Pro-Plugins auf Ihrer Website. Diese Premium-Version arbeitet auf dem kostenlosen Kern-Plug-in Everest Forms.

Daher müssen Sie sowohl die kostenlose als auch die Premium-Version des Plugins einrichten, damit die Funktion zur automatischen Vervollständigung von Adressen funktioniert.

Wir haben eine separate Anleitung zur korrekten Einrichtung von Everest Forms Pro auf Ihrer Website. Überprüfen Sie das also, wenn Sie Hilfe bei der Installation und Aktivierung des Plugins benötigen.

Schritt 2: Installieren und aktivieren Sie das Geolocation-Add-on

Wenn Sie Everest Forms Pro korrekt eingerichtet haben, sollten Sie auf alle verfügbaren Add-Ons zugreifen können. Bitte denken Sie daran, dass die Add-Ons, auf die Sie Zugriff erhalten, von dem von Ihnen erworbenen Plan abhängen.

Öffnen Sie also Everest Forms >> Add-ons in Ihrem WordPress-Dashboard.

Scrollen Sie nach unten, um das Geolocation -Add-on zu finden, und klicken Sie auf Add-on installieren . Um die Installation abzuschließen, drücken Sie anschließend die Schaltfläche Aktivieren .

Dadurch wird das Add-on eingerichtet, das Sie in Ihren WordPress-Formularen verwenden können.

Schritt 3: Holen Sie sich den API-Schlüssel von Google Console

Der dritte Schritt besteht darin, den API-Schlüssel von der Google-Konsole abzurufen. Dies hilft Ihnen dabei, das Everest Forms-Plug-in mit der Google-Konsole zu verbinden.

Besuchen Sie zunächst das Google Console-Dashboard. Sie müssen über Ihr Google-Konto angemeldet sein, um auf dieses Dashboard zugreifen zu können.

Wählen Sie dann Ihr Projekt oben im Dashboard aus.

Wenn Sie noch kein Projekt haben, können Sie eines erstellen, indem Sie auf Neues Projekt klicken. Geben Sie als Nächstes Ihrem Projekt einen Namen und klicken Sie auf Erstellen .

Nachdem Sie das Projekt ausgewählt haben, gelangen Sie zur Seite APIs & Services für das Projekt.

Angenommen, Sie werden nicht automatisch auf diese Seite weitergeleitet. In diesem Fall können Sie es jährlich über das Navigationsmenü oben links öffnen.

Drücken Sie auf das Menü und öffnen Sie APIs & Services >> Enabled APIs & Services .

Klicken Sie hier auf +APIS UND DIENSTE AKTIVIEREN .

Suchen Sie in der API-Bibliothek nach der Places-API und aktivieren Sie sie.

Hinweis: Um die API erfolgreich zu aktivieren, müssen Sie über ein Rechnungskonto verfügen. Aktivieren Sie daher die Abrechnung für Ihre Google Cloud Console, bevor Sie fortfahren.

Nachdem Sie die API aktiviert haben, navigieren Sie zu APIs & Services >> Credentials . Klicken Sie nun auf +Create Credentials und wählen Sie dann API Key aus.

Dadurch wird ein neuer API-Schlüssel für Sie generiert. Aber bevor Sie den API-Schlüssel kopieren, müssen Sie ihm einige Einschränkungen hinzufügen. Klicken Sie dazu auf Schlüssel bearbeiten .

Zunächst müssen Sie eine Anwendungsbeschränkung festlegen . Auf diese Weise können Sie einschränken, welche Websites, IP-Adressen oder Apps den API-Schlüssel verwenden können. In unserem Fall wählen wir Websites .

Fügen Sie als Nächstes die Website hinzu, auf der der API-Schlüssel gültig sein wird, und klicken Sie auf Fertig . Sie können bei Bedarf mehrere Websites hinzufügen.

Danach müssen Sie die API-Einschränkungen festlegen, indem Sie das Optionsfeld Restrict key auswählen. Dadurch weiß Ihr Schlüssel, welche aktivierten APIs er aufrufen kann.

Da wir nur die Places-API benötigen, wählen wir diese aus der Dropdown-Liste aus. Sie können je nach Bedarf weitere APIs wie die Maps JavaScript API aktivieren und hinzufügen.

Klicken Sie abschließend auf die Schaltfläche Speichern .

Jetzt müssen Sie nur noch den Schlüssel für die spätere Verwendung kopieren. Bewahren Sie es sicher auf, da Sie es für den nächsten Schritt benötigen.

Schritt 4: API-Schlüssel zu Geolokalisierungseinstellungen hinzufügen

Gehen Sie zurück in Ihrem WordPress-Dashboard zu Everest Forms >> Settings >> Geolocation .

Fügen Sie den kopierten API-Schlüssel in das Feld Google Places-API-Schlüssel ein. Drücken Sie anschließend die Schaltfläche Änderungen speichern .

Damit ist die Verbindung zwischen der Google Places-API und Everest Forms abgeschlossen.

Es gibt eine weitere Option, Aktueller Standort , in den Geolocation -Einstellungen. Wenn Sie diese Option aktivieren, erkennen Ihre Formulare automatisch den aktuellen Standort des Benutzers und tragen ihn in das Adressfeld ein.

Es ist völlig optional, also hängt es von Ihren Anforderungen ab, ob Sie es einschalten oder nicht.

Schritt 5: Erstellen Sie ein neues Formular mit Adressfeld

Sie haben Everest Forms erfolgreich mit der Google Places API verbunden. Sie benötigen jedoch weiterhin das Formular, in dem die Funktion zur automatischen Vervollständigung von Adressen anwendbar ist.

Dazu müssen Sie ein neues WordPress-Formular mit dem Adressfeld erstellen.

Die Frage ist: Welche Art von Formular erstellen Sie? Nun, es liegt ganz bei Ihnen!

Das Beste an Everest Forms ist, dass Sie damit jede Art von Formular erstellen können, die Sie benötigen. Kontaktformulare, Umfrageformulare, Bewerbungsformulare, Reservierungsformulare usw.

Gehen Sie daher zu Everest Forms >> Add New .

Everest Forms bietet mehrere vorgefertigte Vorlagen für verschiedene Formulare. So können Sie einen von ihnen anpassen, wenn Sie wenig Zeit haben.

Aber das Entwerfen eines Formulars von Grund auf neu ist genauso einfach! Ziehen Sie einfach die erforderlichen Felder per Drag-and-Drop und passen Sie sie an.

Für diesen Leitfaden erstellen wir von Grund auf ein einfaches Kontaktformular mit einem Adressfeld.

Klicken Sie also auf Start from Scratch . Geben Sie als Nächstes den Formulartitel ein und klicken Sie auf Weiter .

Dadurch gelangen Sie zum Formular-Builder. Wie Sie sehen können, sind alle Formularfelder auf der linken Seite gruppiert. Sie können sie per Drag & Drop in die Formularzeilen auf der rechten Seite ziehen.

Fügen Sie dem Formular daher alle Felder hinzu, die Sie benötigen, z. B. Name , E- Mail , Betreff , Nachricht und vor allem Adresse .

Wenn das WordPress-Formular zur automatischen Vervollständigung der Adresse vollständig ist, klicken Sie oben auf die Schaltfläche Speichern , um Ihr neues Formular zu speichern.

Schritt 6: Aktivieren Sie die automatische Adressvervollständigung für das Adressfeld

Mit jedem Feld erhalten Sie zahlreiche Anpassungsoptionen. Ebenso erhalten Sie mehrere Optionen für das Adressfeld, von denen eine die Funktion zur automatischen Vervollständigung der Adresse ist.

Obwohl wir uns hier auf das Adressfeld konzentrieren, stellen Sie sicher, dass Sie auch die anderen Felder anpassen.

Klicken Sie auf das Feld, das Sie bearbeiten möchten; Die Anpassungsoptionen werden auf der linken Seite geöffnet.

Von hier aus können Sie das Feld Label , Description , Field Visibility usw. ändern. Sie können auch Required , Enable Tooltip , Hide Label , und CSS Classes hinzufügen.

Darüber hinaus können Sie auch bedingte Logik für die einzelnen Felder festlegen.

Aber kommen wir hier zurück zu unserem Highlight-Bereich. Wenn Sie auf das Adressfeld klicken, zeigen die Feldoptionen ähnliche Optionen wie oben besprochen an.

Die erweiterten Optionen enthalten jedoch einige Funktionen, die für das Adressfeld kuratiert wurden.

Sie können beispielsweise den Platzhalter und den Standardwert für Adresszeile 1 , Adresszeile 2 , Land usw. ändern. Außerdem können Sie aus der Liste der Standardländer auswählen, welche Länder Sie Benutzern zur Verfügung stellen möchten.

Am wichtigsten ist, dass Sie die Funktion zur automatischen Vervollständigung der Adresse aktivieren können, indem Sie einfach das Kontrollkästchen aktivieren.

Klicken Sie auf die Schaltfläche Speichern , und Ihr Adressfeld schlägt Benutzern, die das Formular ausfüllen, automatisch Orte vor.

Schritt 7: Zeigen Sie das Adress-Autocomplete-WordPress-Formular auf Ihrer Website an

Glückwunsch! Sie befinden sich im letzten Schritt dieses Tutorials!

Da das WordPress-Formular zur automatischen Vervollständigung von Adressen fertig ist, müssen Sie es dem Frontend Ihrer Website hinzufügen.

Mit Everest Forms können Sie dies in wenigen einfachen Schritten tun.

Öffnen Sie zunächst die Seite oder den Beitrag, auf der Sie das WordPress-Formular hinzufügen möchten.

Sobald Sie sich im Gutenberg-Editor befinden, wählen Sie die Schaltfläche Block Inserter ( + ).

Suchen Sie nach dem Block Everest Forms und fügen Sie ihn der Seite/dem Beitrag hinzu, indem Sie darauf klicken.

Wählen Sie als Nächstes das Formular mit dem Feld zur automatischen Vervollständigung der Adresse aus der Dropdown-Liste aus. Dadurch wird das Formular automatisch zur Seite/zum Beitrag hinzugefügt.

Klicken Sie abschließend oben auf die Schaltfläche Aktualisieren .

Sie können das Formular auch zu einer völlig neuen Seite/einem neuen Beitrag hinzufügen. Befolgen Sie einfach die gleichen Schritte und klicken Sie am Ende auf die Schaltfläche „Veröffentlichen“. Und du bist fertig!

Das WordPress-Formular zur automatischen Vervollständigung von Adressen ist jetzt für Ihre Benutzer vom Frontend aus zugänglich.

Einpacken

Wie Sie jetzt sehen können, ist das Erstellen eines WordPress-Formulars zur automatischen Vervollständigung von Google-Adressen super einfach. Vor allem, wenn Sie das Everest Forms-Plugin zur Hand haben.

Mit diesem unglaublichen Plug-in können Sie Ihre Formulare schnell mit der Google-Konsole verbinden. So können Ihre Benutzer das Adressfeld einfach mit der Autovervollständigungsfunktion ausfüllen.

Aber wussten Sie es? Everest Forms hat so viel mehr zu bieten.

Sie können damit E-Mail-Vorlagen anpassen, Formularübermittlungen planen, Formularfelder automatisch ausfüllen und vieles mehr.

Lesen Sie alles über dieses Plugin in unserem Blog. Besuchen Sie unseren YouTube-Kanal für einfache Video-Tutorials, wenn Sie ein visueller Lerner sind.

Folgen Sie auch auf Twitter und Facebook, um Updates zu wöchentlichen Beiträgen zu erhalten.