Länder-Dropdown in Ihr Website-Formular einbinden
Fest eingebaute Länderlisten altern schnell. ISO-Codes ändern sich, Regionen werden umbenannt, Bundeslandlisten passen selten. Das CountriesDB-Widget füllt Ihre Dropdowns aus unserem gepflegten Datensatz. Sie fügen ein kurzes HTML-Snippet ein und legen ein Gratis-Konto an.
Für wen
Sie brauchen Länderfelder (optional mit Bundesland oder Provinz) in:
- Kontakt- oder Lead-Formularen
- Checkout oder Versandadresse
- Anmeldung
Für den Einstieg brauchen Sie keine eigene Backend-API. HTML einfügen reicht, z. B. über einen Custom-HTML-Block in WordPress oder Webflow.
Was Sie brauchen
- Eine Website auf einer Domain, die Ihnen gehört (Gratis-Tarif: Domain-Allowlist)
- Eine Stelle für HTML (Theme, Vorlage, Page Builder)
- Etwa zehn Minuten
Einrichtung
1. Konto und Projekt
Kostenlos registrieren, Dashboard öffnen, Projekt anlegen. Darin liegen Schlüssel, erlaubte Domains und Tarif.
2. Public Key
Unter Credentials Zugangsdaten anlegen, Public Key kopieren und in die Script-URL setzen.
Den Private Key nur serverseitig nutzen, nicht ins HTML der Seite.
3. Erlaubte Domain
Unter Domains den Host eintragen, auf dem das Formular läuft (z. B. www.beispiel.de). Subdomains zählen mit. Das Widget läuft nur dort.
Am besten auf der echten Domain testen. Lokal kann es anders aussehen als live.
4. Script und Selects
Script plus zwei leere <select> einfügen. YOUR_PUBLIC_KEY durch den Key aus Schritt 2 ersetzen. Das ganze Stück steht unten.
5. Prüfen
Seite veröffentlichen, auf der erlaubten Domain öffnen, beide Dropdowns prüfen. Land wechseln und schauen, ob die Regionenliste mitgeht.
Beispiel zum Einfügen
<!-- CountriesDB-Widget: YOUR_PUBLIC_KEY ersetzen -->
<script src="https://unpkg.com/@countriesdb/widget@latest/dist/index.js?public_key=YOUR_PUBLIC_KEY"></script>
<label for="country">Land</label>
<select id="country" class="country-selection" name="country">
<option value="">Land wählen</option>
</select>
<label for="region">Bundesland / Provinz</label>
<select id="region" class="subdivision-selection" name="state">
<option value="">Bundesland oder Provinz wählen</option>
</select>
Weitere Optionen: Widget-Doku.
Land und Region
Das zweite Select zeigt ISO-3166-2-Untergliederungen zum gewählten Land. Beim Landwechsel lädt das Widget die Regionen neu.
Geolocation
Standardmäßig kann das Widget das Land des Besuchers vorschlagen. Abschalten: Geolocation deaktivieren.
FAQ
Brauche ich einen Entwickler?
Meist nein, wenn Sie HTML selbst einfügen können. Bei kniffligen Themes hilft kurz ein Dev, oder schreiben Sie uns über das Kontaktformular (Paid-Tarif).
Gratis-Tarif?
Ja: 1.000 Anfragen pro Monat, eine Widget-Domain. Preise, Gratis-Tarif.
Bundesländer?
Beide Klassen wie im Beispiel: country-selection und subdivision-selection.
WordPress oder Webflow?
Snippet in Custom HTML oder Embed. Weitere Plattform-Anleitungen stehen unten.
Public Key geheim?
Im Browser ok. Private Key nur auf dem Server. Backend Validation API.
Liste aus dem Netz kopieren?
Veraltet schnell, Regionen fehlen oft. Das Widget nutzt dieselben Daten wie die API.
Hängen geblieben?
Paid-Kunden: Kontaktformular für kostenlose Einrichtung.
Links
Weitere Anleitungen
Wir veröffentlichen Schritt-für-Schritt-Anleitungen für konkrete Setups. Jede verlinkt zurück auf diese Seite für das Grund-Snippet:
- Länder- und Bundesland-/Provinz-Felder für Adress- und Checkout-Formulare (demnächst)
- Länder-Dropdown in einem WordPress-Kontaktformular (demnächst)
- Länder-Selects in Webflow oder Squarespace einbinden (demnächst)
- Länder-Dropdown in React in 5 Minuten (demnächst)
Validierung auf dem Server
In Produktion sollten Länder- und Regionscodes serverseitig geprüft werden. Dafür die Backend Validation API mit Private Key. Widget für das Formular, API für die Prüfung der Eingaben.