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 opens a page showing your account's API key and secret. Hand both to your developer or AI coding agent along with the copied instructions, it already knows to save them as environment variables when deploying, to Vercel or anywhere else.
💡 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.
Use cases
Connect your UI isn't limited to swapping out one form's design, it works anywhere Formaloo's logic, email, and PDF tools already do. A few concrete examples of what people build with it:
Email subscription and waitlist sign-ups: A subscribe button on a personal site, or a waitlist sign-up on a product's landing page, is one of the simplest things to connect. Someone enters their email in a form you designed yourself, and Formaloo takes it from there, an automatic welcome email goes out to the new subscriber, and you get notified the moment someone joins. The same pattern covers booking a demo call: the person booking and your team both get an email the moment the slot is reserved.
Custom forms that generate a document on the spot: Build a branded intake page for something like a service agreement or a rental contract. Someone fills in their details and the relevant dates, and the same logic, email, and PDF generation you'd set up on a native Formaloo form turns that submission into a finished contract automatically, ready to download or send out. Only the front end is yours, the paperwork still runs on Formaloo.
Quote calculators that email a priced PDF instantly: Agencies and service businesses can build a custom-branded calculator where a client enters project details, like scope, timeline, or add-ons. Formaloo's logic prices it out, generates a PDF quote, and emails it straight to the client, while your sales team gets notified with the same details. The calculator can live on your own site or inside your product, styled however you want, while Formaloo handles the pricing logic and the paperwork behind it.
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