What you'll build
By the end of this guide, you'll have a form that lives entirely outside Formaloo's own UI, a hand-written HTML page, a Webflow site, a React app, or a page an AI coding agent generated for you, that still submits straight into that same form. Every submission lands in the same place as a native one. Your design is 100% yours. Formaloo just handles the storage behind it.
When to use this
Your embedded or hosted Formaloo form doesn't match your site's design, and theme customization only gets you about 80% of the way there
You're briefing an AI coding agent like Claude Code or Codex to build a form and don't want to also stand up a backend or a database for it
A developer on your team tried to submit to Formaloo straight from the browser and hit a wall, the regular API needs an admin-level key that can't safely ship inside client-side code
You want to rebuild an old, ugly Formaloo embed as a page that feels native to your site, without losing the responses already collected on that form
You're adding a data-collection step inside your own product and don't want to build and maintain a separate database table just for it
Set up Connect your UI
Connect your UI lives inside the same panel you already use to share a form, so there's nothing new to install before you start.
💡 Want a refresher on the Share panel itself? See how to find, customize & share your form's public URL.
1. Open Connect your UI: Open your form in the editor, click Share in the top toolbar, then click the Connect your UI tab next to Link and Embed.
2. Check that every field has an ID: The panel checks this for you automatically. If every field has an ID, you'll see "All fields have an ID. You're ready to connect." If a field is missing one, that message doesn't show, instead you'll see an error telling you a field is missing an ID. Open that field's settings and add one before moving on.
💡 Field IDs are also how answer piping works across Formaloo. See how to use answer piping in Formaloo for the full picture of where else these IDs matter.
3. Get your API key: Click Get API key next to the API key row. This gives you a key scoped to this form's submissions only, safe to use directly inside a browser-based front end, not your workspace's general admin key.
💡 Curious what a Formaloo API key can and can't do beyond this? See how to use Formaloo API keys in Formaloo API.
4. Copy instructions and hand them off: Click Copy instructions. This copies everything your developer or an AI coding agent needs in one paste, the fields on this form, where to send the data, and the exact rules for formatting it. Paste it into Claude Code, Codex, Cursor, or hand it to a developer, along with whatever design you want built.
5. Build, then confirm it landed: Once your front end is submitting, open the form's Responses page. Your first submission should appear there within a few seconds, mapped to the right fields, no different from a submission made through Formaloo's own UI. If it doesn't show up, double-check the field IDs and API key from steps 2 and 3.
What you now have
You now have a form that's fully decoupled from Formaloo's own rendering. A designer, a developer, or an AI coding agent working straight from the copied instructions can build the exact interface your brand needs, and every submission still lands in the same responses you already rely on. Nothing about the backend changed. Only the face of it did.
What's next
Go fully white-label now that your own front end is live. With your own UI handling the design, this is the natural next step to remove every remaining trace of Formaloo branding from anything still hosted on Formaloo's side. → How to remove Formaloo branding
Pull data back out, not just in. Once your front end can submit data, you'll likely want to read it back into your own product too, using a fuller-access key rather than the form-scoped one you copied here. → How to use Formaloo API keys in Formaloo API
Filter and manage submissions as they come in from your new front end. Once responses start arriving from a source other than Formaloo's own UI, it's worth knowing how to sort and filter them alongside everything else. → How to sort and filter your submissions data
Ready-to-use templates
Don't build this from scratch, we've already put it together for you.
AI lead qualification & scoring form — Collects and scores incoming leads with AI. Swap the hosted form for your own branded front end whenever the design needs to match a marketing site exactly.
Service cost estimator for agencies — Lets clients estimate project costs before booking a call. Agencies that need this calculator to match their own site's design are exactly who Connect your UI is built for.
Event registration and ticketing system — Handles capacity limits, PDF tickets, and an admin portal behind the scenes. Rebuild only the registration page in your own front end and keep the rest of the workflow as is.
Learn more how-tos
See a full workflow this same technique applies to. This lead qualification system is a good example of a form worth rebuilding with your own front end once the scoring and routing logic behind it is already working. → How to build an AI-powered lead qualification system in Formaloo
Match this to an agency-facing use case. A cost estimator lives on a client-facing page where design control matters just as much as the calculation logic behind it. → How to build a service cost estimator that emails clients a price breakdown
See the workflow side of a form worth rebuilding headless. Event registration pages are often the most design-sensitive part of a marketing site, while capacity limits and confirmations stay entirely on the backend. → How to collect event registrations, manage capacity, and send automated confirmations