Möchten Sie ein Adress-Autocomplete-Formular in WordPress erstellen?
Ein Adress-Autocomplete-Formular ist der moderne Weg, um Kunden Zeit zu sparen, indem ihre Adresse beim Ausfüllen eines Formulars automatisch vorgeschlagen wird.
Sobald ein Kunde beginnt, seine Adresse in das Adressfeld einzugeben, werden ihm Optionen angezeigt, um seine Adresse aus den Google-Standorten auszuwählen und einzufügen.
Standardmäßig verfügt WordPress nicht über eine Adress-Autocomplete-Option. Sie müssen ein Plugin wie WPForms verwenden, um ein Kontaktformular zu erstellen und die Adress-Autocomplete-Option für das Adressfeld zu aktivieren.
In diesem Artikel zeigen wir Ihnen, wie Sie ein Adress-Autocomplete-Formular in WordPress erstellen.
Adress-Autocomplete-Formular in WordPress erstellen
Nachfolgend finden Sie die Schritt-für-Schritt-Anleitung, um Ihrer WordPress-Website ein Adress-Autocomplete-Formular hinzuzufügen.
Schritt 1. WPForms-Plugin installieren und aktivieren
Das erste, was Sie tun müssen, ist, das WPForms-Plugin zu installieren und zu aktivieren.
WPForms macht es jedem leicht, schnell und einfach jede Art von Formular für seine Website zu erstellen.
Ob Sie neue Leads gewinnen oder Zahlungen von Kunden erhalten, dieses Plugin hat das Formular, das Sie für Wachstum benötigen. Deshalb ist es unsere erste Wahl, wenn es um Formularerstellung in WordPress geht. Wir verwenden es auf unserer eigenen Website, um jede Art von Formular zu erstellen, die wir benötigen, einschließlich Kontakt-, Login-, Registrierungsformularen und mehr.
Der erste Schritt, den Sie unternehmen müssen, ist, sich für WPForms anzumelden und das Plugin auf Ihrer Website zu installieren. Weitere Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie einen Lizenzschlüssel eingeben, um alle Funktionen des WPForms-Plugins nutzen zu können.
Sie finden den Lizenzschlüssel in Ihrem WPForms-Konto.
Klicken Sie auf die Schaltfläche Lizenzschlüssel überprüfen, und Sie sehen eine Erfolgsmeldung.
Schritt 2. Geolocation Addon installieren und aktivieren
Als Nächstes müssen Sie die Seite WPForms » Addons besuchen. Von dort aus können Sie das Geolocation Addon installieren und aktivieren.
Dieses Addon hilft dabei, die Adress-Autocomplete-Option für Ihr Kontaktformular zu aktivieren.
Schritt 3. Adress-Autofill-Option aktivieren und Google Places API-Schlüssel hinzufügen
Sie müssen die Seite WPForms » Einstellungen besuchen. Von dort aus können Sie im oberen Navigationsmenü zum Tab Geolocation wechseln.
Wählen Sie im Abschnitt Places Provider Google Places API aus und aktivieren Sie die Option für den aktuellen Standort darunter.
Besuchen Sie als Nächstes die Google Cloud Platform, um den API-Schlüssel für Google Places zu erhalten.
Auf dieser Seite müssen Sie auf die Option API und Dienste aktivieren klicken.
Dies zeigt Ihnen die vollständige Liste der Google APIs und Dienste. Sie müssen die folgenden APIs aktivieren:
- Google Places API
- Google Maps JavaScript API
- Geocoding API
Wenn Sie eine API nicht finden, können Sie den Namen in das Suchfeld eingeben, und sie wird unten angezeigt.
Navigieren Sie nun zu API und Dienste » Anmeldeinformationen. Von dort aus müssen Sie auf den Link + Anmeldeinformationen erstellen klicken und dann die Option API-Schlüssel auswählen.
Ein Popup wird geöffnet und Sie können den API-Schlüssel sehen. Klicken Sie auf die Option Schlüssel einschränken, um die Nutzung des API-Schlüssels zu steuern.
Im Abschnitt Anwendungsbeschränkungen müssen Sie HTTP-Referrer (Websites) auswählen.
Im Abschnitt API-Beschränkungen aktivieren Sie die Option Schlüssel einschränken und wählen die 3 zuvor aktivierten APIs aus.
Klicken Sie auf die Schaltfläche Speichern, um fortzufahren.
Ihr API-Schlüssel ist fertig. Kopieren Sie den API-Schlüssel von dieser Seite.
Gehen Sie nun zurück zum WordPress-Adminbereich und fügen Sie den API-Schlüssel auf der Geolocation-Einstellungsseite ein.
Klicken Sie auf die Schaltfläche Einstellungen speichern.
Schritt 4. Erstellen Sie ein neues Kontaktformular
Sobald Ihre Geolocation-Addon-Einstellungen abgeschlossen sind, müssen Sie ein neues Kontaktformular erstellen. Sie können auch die Option „Automatische Adressvervollständigung aktivieren“ für zuvor erstellte Formulare verwenden.
Um ein neues Formular zu erstellen, gehen Sie zu WPForms » Neu hinzufügen. Dies öffnet den WPForms-Builder auf Ihrem Bildschirm, und Sie sehen mehrere integrierte Formularvorlagen.
Beginnen Sie mit der Eingabe eines Namens für Ihr neues Formular und klicken Sie auf die Vorlage Einfaches Kontaktformular.
Dies startet die Kontaktformularvorlage. Sie sehen die Felder auf der linken Seite und die Formularvorschau auf der rechten Seite Ihres Bildschirms.
Im Abschnitt Erweiterte Felder finden Sie das Feld Adresse. Ziehen Sie einfach das Feld Adresse per Drag & Drop in die Formularvorschau auf der rechten Seite.
Klicken Sie nun auf dieses Adressfeld im Formularvorschau-Bereich, und Sie sehen die Bearbeitungsoptionen auf der linken Seite.
In den Erweiterten Optionen müssen Sie die Option Adress-Autocomplete aktivieren aktivieren.
Klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke Ihres Bildschirms und verlassen Sie den WPForms-Builder.
Schritt 5. Fügen Sie das Formular mit automatischer Adressvervollständigung zu Ihrer WordPress-Seite hinzu
Nun, da Ihr Formular mit automatischer Adressvervollständigung fertig ist, können Sie die Seite Seiten » Neu hinzufügen in Ihrem WordPress-Adminbereich besuchen.
Beginnen Sie mit dem Hinzufügen eines Titels zu Ihrer Seite und klicken Sie auf das Plus-Symbol. Nun können Sie nach dem benutzerdefinierten WPForms-Block suchen und darauf klicken.
Wählen Sie im Dropdown-Menü das Formular mit automatischer Adressvervollständigung aus.
Klicken Sie auf die Schaltfläche Veröffentlichen und besuchen Sie Ihre Website, um das Kontaktformular mit dem Feld für automatische Adressvervollständigung in Aktion zu sehen. Hier ist ein Beispielformular, das wir erstellt haben, in dem Sie sehen können, wie beim Eingeben der Adresse Adressen automatisch vorgeschlagen werden.
Das ist alles! Sie haben nun erfolgreich gelernt, wie Sie ein Formular mit automatischer Adressvervollständigung in WordPress erstellen.
Sie möchten vielleicht auch unseren Leitfaden zum Erstellen eines benutzerdefinierten Buchungsformulars für Ihre WordPress-Website lesen.
Dies kann Ihnen weiterhelfen, ein Online-Terminbuchungsformular zu erstellen und das Feld für automatische Adressvervollständigung hinzuzufügen, um unterwegs Benutzeranmeldungen zu erhalten.
Oder Sie können auch unseren Leitfaden zum Erstellen eines Buchungsformulars für ein Reisebüro in WordPress lesen. Dieser Beitrag hilft Ihnen, ein Reisebuchungsformular zu erstellen, um die Buchungs- und Kontaktinformationen Ihrer Kunden auf Ihrer Website zu sammeln.
Danke dafür! Wissen Sie, ob es möglich ist, eine ähnliche Autovervollständigungsfunktion für ein einzeiliges Textfeld mit benutzerdefinierten Vorschlägen hinzuzufügen?
Hallo John, es ist möglich, die Adressautovervollständigung für einzeilige Textfelder zu aktivieren. Dies kann im Tab „Erweitert“ aktiviert werden. Wenn Sie benutzerdefinierte Vorschläge verwenden möchten, müssten Sie Code schreiben. Ich hoffe, das hilft!