Voorbeeld
Moeilijkheidsgraad:
Voorbeeld: voeg Google Autosuggest toe aan klantformulier
Google Places configuratie voor formulieren
Waar stel je dit in
- Ga naar Admin > Configuratieformulier.
- Kies Entity: customer.
- Open de rij van het veld dat als zoekveld moet dienen (meestal Adres / address1).
- Zet Veld type op googleplaces.
- Klik op Geavanceerd en voeg parameters toe.
- Sla op en test op front?mod=registration.
Minimale configuratie
API_KEY is verplicht.
- Sleutel: API_KEY
- Waarde: <jouw-google-places-api-key>
API key aanmaken (welke key heb je nodig)
Gebruik een browser API key uit Google Cloud. Dit veldtype draait in de browser (JavaScript), dus een server-key is hier niet geschikt.
- Ga naar Google Cloud Console en kies/maak een project.
- Koppel billing aan het project (zonder billing geeft Places meestal geen resultaten).
- Zet minimaal deze API's aan:
- Maps JavaScript API
- Places API (in sommige projecten zichtbaar als Places API (New))
- Ga naar APIs & Services > Credentials en kies Create credentials > API key.
- Beperk de key:
- Application restrictions: HTTP referrers (web sites)
- API restrictions: alleen de APIs hierboven toestaan
- Plaats de key als waarde van parameter API_KEY in het formulier-veld.
Instellingen en consequenties
| Instelling | Aanbevolen waarde | Consequentie bij foute keuze |
|---|---|---|
| Type key | Browser key (HTTP referrer) | Android/iOS/server-key werkt niet goed voor deze webflow |
| Billing | Actief op project | REQUEST_DENIED of geen autocomplete-resultaten |
| Ingeschakelde APIs | Maps JavaScript API + Places API | Suggesties laden niet of fout in console |
| Application restrictions | Alleen jouw domeinen (bijv. https://*.i-reserve.net/*, https://*.ngrok.io/*) | Te strikt: werkt niet op sommige omgevingen. Te open: misbruikrisico |
| API restrictions | Beperk tot benodigde APIs | Te streng: autocomplete faalt. Geen restrictie: groter veiligheidsrisico |
Parameters en effect
| Sleutel | Verplicht | Voorbeeld | Effect | Consequentie bij foute/missende waarde |
|---|---|---|---|---|
| API_KEY | Ja | AIza... | Laadt Google Places API | Geen suggesties of API-fout in browser-console |
| COUNTRY_RESTRICTION | Nee | nl of nl,be,de | Beperkt resultaten op landcode(s) | Te strikt: weinig/geen resultaten. Ongeldig: onverwachte filtering |
| COUNTRY_CODES | Nee | nl,be | Alias van COUNTRY_RESTRICTION | Zelfde als hierboven |
| TYPES | Nee | address | Filtert type autocomplete-resultaten | Ongeldige type(s): minder bruikbare resultaten |
| DEBUG | Nee | 1 of true | Logt gekozen place en componenten naar console | Geen functioneel probleem, wel extra console-output |
| LOG_SELECTION | Nee | 1 | Alias van DEBUG | Zelfde als hierboven |
Veldmapping (optioneel)
Gebruik mapping alleen als jouw veldnamen afwijken van standaard customer-ids.
Standaard fallback (zonder mapping)
- address1 -> cust_address1
- housenum -> cust_housenum
- postal -> cust_postal
- city -> cust_city
- country -> cust_country
Mapping tabel
| Sleutel | Voorbeeld | Doelveld | Consequentie bij foute waarde |
|---|---|---|---|
| MAP_ADDRESS1 | cust_address1 | Straatnaam (zonder huisnummer) | Straat blijft leeg of wordt naar fout veld geschreven |
| MAP_HOUSENUM | cust_housenum | Huisnummer | Huisnummer blijft leeg |
| MAP_POSTAL | cust_postal | Postcode | Postcode ontbreekt of komt in verkeerd veld |
| MAP_CITY | cust_city | Woonplaats | Woonplaats blijft leeg of krijgt fallback-waarde |
| MAP_COUNTRY | cust_country | Land-select | Land wordt niet automatisch geselecteerd |
Wat het script invult
- address1: route/streetnaam (zonder huisnummer)
- housenum: street_number (met fallback parsing op eerste adresregel)
- postal: postal_code + postal_code_suffix, zonder spaties (bijv. 3543CC)
- city: locality, fallback postal_town, daarna administratieve niveaus
- country: match op landnaam of ISO-code tegen opties in de land-select
Praktisch voorbeeld
- API_KEY = <jouw-key>
- COUNTRY_RESTRICTION = nl
- DEBUG = 1
Testchecklist
- Hard refresh de pagina (en leeg cache indien nodig).
- Typ een adres en kies een suggestie.
- Controleer of Adres, Huisnummer, Postcode, Woonplaats en Land correct gevuld worden.
- Zet tijdelijk DEBUG=1 als velden niet correct vullen en controleer console op [googleplaces] place_changed.
