Start with the experience on the canvas. Then use Framer Agents or an External Agent to connect the logic.
1. Choose the result your tool returns
Start with the result. Write down what it should show, then work backward to the fewest inputs you need. Remove questions that do not change the result or help your team follow up.
Scanner: inspect a submitted website and return an audit.
Calculator: turn a few values into an estimate or forecast.
Assessment: combine answers into a score and recommendation.
Product finder: narrow a catalogue to the most suitable option.
Use the same process for a scanner, calculator, assessment, or product finder. The AEO Scanner shows a server-backed flow that collects a URL before processing. Stack Score shows a multi-step assessment that calculates a scored recommendation from the visitor’s answers.
2. Map the complete visitor journey
Decide which parts can share one page and which need their own route. A calculator may fit on one page. A scanner or assessment often uses:
Landing page that explains the result and asks visitors to start.
Quiz page that collects answers, shows progress.
Processing page for scans. Skip this for instant calculations.
Result page that explains the score and gives visitors a next step.
Keep every question inside one page. Stack Score uses /quiz, and /result.
3. Decide what Framer and code should do
Use Framer for the visible experience and an agent for the logic. Connect External Agents such as Codex or Claude Code when you need custom behavior or an external service. Keep the interface in Framer so you can change it without editing code.
Canvas: design the layout, type, components, breakpoints, and loading states.
Agent: connect the canvas layers and review the finished flow.
Code override: track steps, answers, scores, errors, and page changes.
Server: protect credentials, scan websites, and connect private services.
Select the question section and give the Agent concrete instructions.
For example, an assessment needs to remember answers, move forward and back, and recover after a refresh or failed request.
Give each question and answer a stable ID. Keep those IDs separate from the visible copy, so text changes cannot break the score. Remember the current step and previous answers. Block extra clicks during transitions.
4. Decide what the result should show
Define the result before you generate code. Stack Score includes the visitor’s role, overall score, three category scores, strongest area, weakest area, next move, and answers. It gives each scored answer zero to three points. If categories tie, it shows a balanced result instead of choosing one.
5. Choose where each part runs
A calculator can keep its answers and result in the browser. A longer assessment may need separate quiz and result pages. A scanner needs a server because the browser should not hold credentials or scan other websites on its own.
The AEO Scanner sends visitors from a form to a scanning page, then opens a saved report. It keeps contact details out of the URL. Stack Score remembers quiz answers in the browser and sends visitors back to the quiz if no saved result exists.
Use | Runs in | Choose it when |
|---|---|---|
Local calculation | Browser override | Answers can produce the result without secrets |
Cloudflare Worker | Server | The tool scans a website or protects an API key |
Zapier or CRM workflow | External service | The completed result needs routing, storage, or alerts |
6. Send useful lead data to your CRM
Use a form for the fields visitors can see. Send their role, result, category scores, important answers, recommendation, and campaign source to your CRM. Check each field before submission, focus the first error, and make error messages readable by screen readers.
A failed CRM request should not hide the result. Keep personal details out of URLs and store them only while the tool needs them. Put credentials and private requests on the server.
7. Test the complete flow
Before publishing, ask an Agent to run the full journey. Test the published site yourself too. Page changes, forms, saved answers, and server requests may behave differently outside the canvas. Check:
Forward, back, refresh, and direct links to the result page.
Keyboard controls, focus order, screen reader errors, and reduced motion.
Invalid inputs, empty fields, server timeouts, and retry buttons.
Phone and tablet layouts, browser zoom, long labels, and slow connections.
Lowest, highest, tied, incomplete, and old saved results.
Double clicks, duplicate forms, and CRM failures.
The CRM record, consent text, analytics events, and deletion process.
See two lead generation tools in action
Try the AEO Scanner to see how one URL becomes a website audit. Then take the Stack Score to see how seven questions produce a score, category diagnosis, recommended project, and personalized Framer prompt. Use both as references when choosing the structure for your own tool.
Frequently asked questions
Can Framer Agents build a lead generation tool?
Yes. Design the interface and responsive states on the Framer canvas, then ask an Agent to connect the existing layers. The Agent can add shared state, page changes, scoring, validation, loading states, and integrations while the design stays editable.
Does every tool need a server?
No. A calculator or assessment can run in the browser when it uses the visitor’s answers and contains no secrets. Use a server for credentials, private APIs, website scans, saved reports, and rate limits.
What should the form send to the CRM?
Send contact details with the role, score, category results, important answers, recommendation, campaign source, and a short summary. Your team can follow up without asking the visitor to repeat the tool. Check the CRM record, run the full flow with an Agent, and publish a test version.
