Address Autocomplete

Setup

Before you start, you need two things:

1. Your form token. Find it on your form’s overview page in the dashboard.
2. Allowed domains. Go to your form’s Settings tab and add every domain where you’ll use autocomplete to the Allowed Domains list. One domain per line, e.g. mysite.com.

Then add the script tag to your page. The token query parameter is required — it generates a short-lived session key on each page load:

<script src="https://forms.rizzness.com/autocomplete.js?token=YOUR_FORM_TOKEN"></script>  

Data Attributes (Quick Start)

The fastest way to add autocomplete. Mark up your inputs with data-rizzforms-autocomplete attributes and the SDK handles everything automatically:

<form action="/submit" method="post"> <input name="address" data-rizzforms-autocomplete="address" placeholder="Start typing an address..." /> <input name="city" data-rizzforms-autocomplete="city" /> <input name="state" data-rizzforms-autocomplete="state" /> <input name="zip" data-rizzforms-autocomplete="zip" /> <button type="submit">Submit</button> </form> <script src="https://forms.rizzness.com/autocomplete.js?token=YOUR_TOKEN"></script>  

When a user types in the address field, a dropdown of suggestions appears. Selecting one auto-fills city, state, and zip. The SDK finds related fields by looking for matching data-rizzforms-autocomplete attributes within the same <form> element.

JavaScript SDK

For full control, use the Places.Autocomplete class directly. This gives you event callbacks, programmatic control, and access to the full place object including coordinates.

<input id="my-address" type="text" placeholder="Start typing..." /> <script src="https://forms.rizzness.com/autocomplete.js?token=YOUR_TOKEN"></script> <script> var input = document.getElementById("my-address"); var ac = new Places.Autocomplete(input, { country: "us", // optional: restrict to a country debounceMs: 300, // optional: debounce delay (default 300) minChars: 3 // optional: minimum characters (default 3) }); ac.on("select", function(place) { console.log(place.components.street); // "1600 Amphitheatre Pkwy" console.log(place.components.city); // "Mountain View" console.log(place.components.state); // "CA" console.log(place.components.postalCode); // "94043" console.log(place.lat, place.lng); // 37.422, -122.084 }); </script>  

Events

ac.on("select", function(place) { /* ... */ }); ac.on("error", function(err) { if (err.code === "token_expired") { // Session expired after 24 hours — reload the page window.location.reload(); } });  

Select Payload

The select event returns a normalized place object:

{ "id": "ChIJ2eUgeAK6j4ARbn5u_wAGqWA", "label": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA", "mainText": "1600 Amphitheatre Pkwy", "secondaryText": "Mountain View, CA, USA", "lat": 37.422, "lng": -122.084, "components": { "street": "1600 Amphitheatre Pkwy", "city": "Mountain View", "state": "CA", "postalCode": "94043", "country": "US" } }  

Options

Country Filtering

Restrict suggestions to a specific country. With data attributes, add data-country to the script tag:

<script src="https://forms.rizzness.com/autocomplete.js?token=YOUR_TOKEN" data-country="us"></script>  

With the JavaScript SDK, pass the country option:

var ac = new Places.Autocomplete(input, { country: "us" }); // Change at runtime: ac.setCountry("ca");  

Framework Examples

React / Next.js

import Script from "next/script"; export default function Checkout() { return ( <> <Script src="https://forms.rizzness.com/autocomplete.js?token=YOUR_TOKEN" strategy="afterInteractive" /> <input data-rizzforms-autocomplete="address" /> <input data-rizzforms-autocomplete="city" /> <input data-rizzforms-autocomplete="state" /> <input data-rizzforms-autocomplete="zip" /> </> ); }  

React (SDK with useEffect)

import { useRef, useEffect } from "react"; function AddressField() { const inputRef = useRef(null); useEffect(() => { if (!window.Places || !inputRef.current) return; const ac = new Places.Autocomplete(inputRef.current, { country: "us" }); ac.on("select", (place) => { console.log(place.components); }); return () => ac.destroy(); }, []); return <input ref={inputRef} placeholder="Address" />; }  

Vue

<template> <input ref="addressInput" placeholder="Address" /> </template> <script setup> import { ref, onMounted, onUnmounted } from "vue"; const addressInput = ref(null); let ac = null; onMounted(() => { if (window.Places) { ac = new Places.Autocomplete(addressInput.value, { country: "us" }); ac.on("select", (place) => { console.log(place.components); }); } }); onUnmounted(() => ac?.destroy()); </script>  

Custom Domains

Autocomplete works on custom domains out of the box, but you need to authorize each domain first. The proxy validates the Origin header on every request and rejects domains not in your allow list.

1. Add your domain to the allow list

Go to Forms → Settings → Allowed Domains and add every domain where you’ll embed the autocomplete script. One domain per line:

mysite.com www.mysite.com checkout.mysite.com

Or set it via the API:

curl -X PATCH https://www.rizzness.com/api/forms/YOUR_TOKEN \ -H "Authorization: Bearer frk_YOUR_KEY" \ -H "Content-Type: application/json" \ -d '{"allowed_domains": ["mysite.com", "www.mysite.com"]}'  

Subdomains of rizzness.com are always allowed automatically. Custom domains require explicit authorization.

2. Embed the script

The script tag is the same regardless of domain. Load it from forms.rizzness.com with your form token:

<script src="https://forms.rizzness.com/autocomplete.js?token=YOUR_TOKEN"></script>  

The script generates a fresh JWT on every page load. The proxy validates both the JWT and the requesting domain before returning results.

3. Set up a custom domain for your page (optional)

If you’re using a RizzForms-hosted page and want it on your own domain:

1. Go to your page in the dashboard and click Custom Domain.
2. Enter your hostname (e.g. contact.mysite.com).
3. Add the DNS records shown:
   • TXT record for ownership verification
   • CNAME pointing to sites.rizzness.com
4. SSL is provisioned automatically via Cloudflare. The status page refreshes every 30 seconds until active.

Once active, your page (with autocomplete) is live at your custom domain. Form submissions work on the custom domain too — no additional configuration needed.

Agent / Programmatic Setup

AI agents can set up address autocomplete end-to-end using the RizzForms API. No dashboard access required.

Full setup in 3 API calls

1. Create a form (if you don’t have one):

curl -X POST https://www.rizzness.com/api/forms \ -H "Authorization: Bearer frk_YOUR_KEY" \ -H "Content-Type: application/json" \ -d '{"name": "Contact Form"}'  

The response includes endpoint_token and autocomplete_script_url.

2. Authorize your domain:

curl -X PATCH https://www.rizzness.com/api/forms/YOUR_TOKEN \ -H "Authorization: Bearer frk_YOUR_KEY" \ -H "Content-Type: application/json" \ -d '{"allowed_domains": ["mysite.com", "www.mysite.com"]}'  

3. Embed in HTML:

<form action="https://forms.rizzness.com/f/YOUR_TOKEN" method="POST"> <input type="text" name="_hp" style="display:none" tabindex="-1" autocomplete="off"> <input name="address" data-rizzforms-autocomplete="address" placeholder="Start typing an address..." /> <input name="city" data-rizzforms-autocomplete="city" /> <input name="state" data-rizzforms-autocomplete="state" /> <input name="zip" data-rizzforms-autocomplete="zip" /> <input type="email" name="email" required /> <textarea name="message"></textarea> <button type="submit">Submit</button> </form> <script src="https://forms.rizzness.com/autocomplete.js?token=YOUR_TOKEN"></script>  

That’s it. The form submits to RizzForms for storage and plugin delivery. The autocomplete script handles Google Places lookups, session tokens, and auto-filling city/state/zip. No server-side code needed.

Verify it works

# Test form submission curl -X POST "https://forms.rizzness.com/json/YOUR_TOKEN?test=true" \ -H "Content-Type: application/json" \ -d '{"email": "[email protected]", "address": "1600 Amphitheatre Pkwy", "city": "Mountain View", "state": "CA", "zip": "94043"}'  

The response includes a deliveries array confirming each plugin fired. See the full Agent Integration guide for webhook setup and additional options.

Security

• No API keys in the browser. Your Google Places API key is stored on the server and never exposed to clients.
• JWT session tokens. Each page load generates a short-lived token (24 hours). The proxy rejects expired or invalid tokens with a 401.
• Domain authorization. The proxy validates the request’s Origin header against your form’s allowed domains list. Unauthorized origins receive a 403.
• Server-side enforcement. All validation happens on the Cloudflare Worker — client-side checks are a convenience layer, not the security boundary.

Troubleshooting

Autocomplete dropdown doesn’t appear

• Check the browser console for errors.
• Verify the token query parameter in the script URL matches your form token.
• Make sure your domain is listed in Allowed Domains on the form settings page.
• The input must have data-rizzforms-autocomplete="address".
• You need at least 3 characters before suggestions appear.

"token_expired" error

The 24-hour session has expired. Reload the page to get a fresh token. If you’re building a single-page app, re-fetch the script when you detect this error.

"domain_not_allowed" error

The domain your page is served from is not in the form’s Allowed Domains list. Go to Forms → Settings and add your domain (e.g. mysite.com).

Methods