Build a multi-step intake form as a Framer code component (React/TSX)
Budget: €30 – €250 EUR
We are building a website in Framer and need a custom multi-step intake form (wizard) implemented as a Framer code component. A working prototype already exists in React, but it requires cleanup, adjustments, and completion.
Goal
Deliver a fully functional, user-friendly intake wizard with 5 steps:
1. Select categories & subcategories
2. Select services per subcategory
3. Answer additional questions per selected service (max 5 per service, configurable)
4. Provide contact details (with validation, phone number required)
5. Confirmation/thank-you screen with redirect to a scheduling page
Technical requirements
• Framework: React (Framer code component).
• File format: .tsx (preferred, with basic typing), .jsx is acceptable.
• Styling: Inline style objects (keep consistent with current code).
• Form submission: JSON payload via Formspark endpoint.
• Behavior:
• Step 1: Subcategories must be displayed vertically (not side-by-side).
• Step 2: Services per subcategory selectable via checkboxes/chips.
• Step 3: Show up to 5 relevant questions per selected service (using predefined config object).
• Step 4: Contact form with required fields (name, company, email, phone required with validation pattern). Disable browser autofill (autoComplete="off").
• Step 5: Thank-you screen with link to redirect path.
• Validation: All required fields must be checked before advancing/submitting.
• No localStorage / persistence: Each new form session should start blank (no pre-filled data).
Deliverables
• A single .tsx (or .jsx) file, fully working in Framer as a code component.
• Clean, modular code: each step should be a separate function/component.
• Clear inline comments explaining how to add/edit services and questions later.
• Mobile responsive layout.
Nice-to-have
• Strong TypeScript typing for form data and props.
• Simple, reusable configuration for services and questions.
Timeline
• Whats your expected delivery?
Goal
Deliver a fully functional, user-friendly intake wizard with 5 steps:
1. Select categories & subcategories
2. Select services per subcategory
3. Answer additional questions per selected service (max 5 per service, configurable)
4. Provide contact details (with validation, phone number required)
5. Confirmation/thank-you screen with redirect to a scheduling page
Technical requirements
• Framework: React (Framer code component).
• File format: .tsx (preferred, with basic typing), .jsx is acceptable.
• Styling: Inline style objects (keep consistent with current code).
• Form submission: JSON payload via Formspark endpoint.
• Behavior:
• Step 1: Subcategories must be displayed vertically (not side-by-side).
• Step 2: Services per subcategory selectable via checkboxes/chips.
• Step 3: Show up to 5 relevant questions per selected service (using predefined config object).
• Step 4: Contact form with required fields (name, company, email, phone required with validation pattern). Disable browser autofill (autoComplete="off").
• Step 5: Thank-you screen with link to redirect path.
• Validation: All required fields must be checked before advancing/submitting.
• No localStorage / persistence: Each new form session should start blank (no pre-filled data).
Deliverables
• A single .tsx (or .jsx) file, fully working in Framer as a code component.
• Clean, modular code: each step should be a separate function/component.
• Clear inline comments explaining how to add/edit services and questions later.
• Mobile responsive layout.
Nice-to-have
• Strong TypeScript typing for form data and props.
• Simple, reusable configuration for services and questions.
Timeline
• Whats your expected delivery?