Smart Intake Forms

Overview

Fataplus Smart Forms transform client onboarding with an intelligent, interactive intake system that captures comprehensive project requirements and automatically generates professional documentation.

8-Section Form

Comprehensive project capture across all dimensions

Real-Time Validation

Server-side validation ensures data quality

Auto PRD Generation

Instant Product Requirements Document creation

Email Notifications

Automatic team and client notifications

Form Architecture

The intake form is built with Hono (ultra-lightweight TypeScript framework) and deployed on Cloudflare Workers for global edge performance.

Technology Stack

Frontend:  HTML5 + CSS3 + Vanilla JavaScript
Backend:   Hono + TypeScript
Storage:   Cloudflare KV (submissions)
Deployment: Cloudflare Workers (serverless)
CDN:       Cloudflare Network

Performance Metrics:

Cold start: < 50ms
API response: < 100ms
Page load: < 2s
Global availability: 99.9%

Form Sections

1. Project Vision

Capture the fundamental project concept.

Vision Fields

Required Information

Project Title (3-100 characters)

projectTitle: string;  // "Mobile app for coffee farmers"

Problem Statement (min 10 characters)

problemStatement: string;  // "Farmers lack digital tools..."

Solution Vision (min 10 characters)

solutionVision: string;  // "Mobile-first platform with..."

Target Audience (min 5 characters)

targetAudience: string;  // "Small-scale coffee farmers in Madagascar"

Expected Impact (min 5 characters)

expectedImpact: string;  // "Increase harvest efficiency by 30%"

Validation

All fields required
Minimum length enforcement
Real-time character count
Helpful error messages

2. Company Information

Understand the client organization.

Basic Info
Organization
Budget & Timeline

Company Details

{
  companyName: string;        // "AgriCorp SARLU"
  contactName: string;        // "Jean Rakoto"
  contactEmail: string;       // "jean@agricorp.mg"
  contactPhone?: string;      // "+261 34 12 34 56"
}

Email Validation

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const isValid = emailRegex.test(email);

Industry & Size

Sector (select one):
- Agriculture
- Technology
- Education
- Healthcare
- Finance
- E-commerce
- Other
Company Size:
- Startup (1-10 employees)
- SME (11-50 employees)
- Large enterprise (51+ employees)
- Organization/Association
- Individual

{
  industry: string;
  companySize: string;
}

Project ConstraintsBudget Range (MGA):

< 500,000
500,000 - 1,000,000
1,000,000 - 5,000,000
5,000,000 - 10,000,000
10,000,000
To be determined

Timeline:

< 1 month
1-3 months
3-6 months
6-12 months
12 months

{
  budget: string;
  timeline: string;
}

3. Project Type

Define the nature and complexity of work.

Project Categories

Design & UX

☐ UI/UX Design
☐ Complete Product Design
☐ Visual Redesign
☐ Brand Identity Creation
☐ Interactive Prototyping

Web Development

☐ Marketing Website
☐ E-commerce Site
☐ Progressive Web App (PWA)
☐ SaaS Platform
☐ Client Portal
☐ Booking System

Artificial Intelligence

☐ Chatbot/AI Assistant
☐ Recommendation System
☐ Predictive Analytics
☐ Natural Language Processing
☐ Computer Vision
☐ Intelligent Automation

Mobile Applications

☐ iOS Native App
☐ Android Native App
☐ Cross-platform App
☐ Mobile PWA

Technical Infrastructure

☐ System Architecture
☐ Cloud Migration
☐ API & Integration
☐ Database Design
☐ Maintenance & Support

Consulting & Training

☐ Technical Training
☐ Product Design Mentoring
☐ Strategic Consulting
☐ Project Audit

{
  projectTypes: string[];  // ["PWA", "AI Assistant"]
}

Complexity Assessment

Technical ComplexitySelect one:

○ Simple: Template/existing model
○ Medium: Moderate customization
○ Complex: Custom development
○ Very Complex: Advanced architecture

{
  complexity: 'simple' | 'medium' | 'complex' | 'very-complex';
}

Complexity affects timeline estimates and resource allocation.

4. Technical Specifications

Capture technology preferences and requirements.

Frontend
Backend
Database & Hosting

Frontend TechnologiesSelect preferred frameworks:

☐ HTML/CSS/JavaScript (vanilla)
☐ React/Next.js
☐ Vue.js/Nuxt.js
☐ Angular
☐ Svelte/SvelteKit
☐ No preference
☐ Other: _______

{
  frontendTech: string[];  // ["React/Next.js", "Tailwind CSS"]
}

Backend TechnologiesSelect preferred stack:

☐ Node.js
☐ Python (Django/Flask/FastAPI)
☐ PHP (Laravel/Symfony)
☐ Java/Spring
☐ Ruby on Rails
☐ No preference
☐ Other: _______

{
  backendTech: string[];  // ["Node.js", "Hono"]
}

Database

☐ PostgreSQL
☐ MySQL/MariaDB
☐ MongoDB
☐ Firebase
☐ SQLite
☐ No preference

Hosting

☐ Shared hosting
☐ VPS/Dedicated
☐ Cloud (AWS, GCP, Azure)
☐ PaaS (Vercel, Heroku, Cloudflare)
☐ No preference

External Integrations

{
  database: string[];
  integrations?: string;  // "Stripe, Google Maps, SendGrid"
}

5. Design Requirements

Define visual style and brand preferences.

{
  visualStyle: string;      // "Modern and clean", "Corporate", etc.
  references?: string;      // URLs to inspiring sites/apps
  existingAssets: string[]; // ["Logo", "Brand colors", "Typography"]
}

Visual Style Options:

Modern and clean
Corporate and professional
Creative and bold
Minimalist
Playful and colorful
Other

Existing Assets:

☐ Existing logo
☐ Defined color palette
☐ Chosen typography
☐ None available

6. Feature Requirements

Specify desired functionality with MoSCoW prioritization.

Must-Have Features

Essential (Required for Launch)

{
  mustHave: string[];  // ["User authentication", "Data export", ...]
}

Examples:

User registration and login
Core workflow functionality
Mobile responsiveness
Basic analytics
Data backup

Should-Have Features

Important (High Priority)

{
  shouldHave: string[];  // ["Push notifications", "Advanced search", ...]
}

Examples:

Advanced filtering
Notification system
Enhanced reporting
Third-party integrations
Multi-language support

Module Selection

Pre-built Modules

☐ User management (registration, profiles, roles)
☐ Content management (CMS, blog, media)
☐ E-commerce (products, cart, payments)
☐ Communication (messaging, notifications, chat)
☐ Analytics (dashboard, stats, reporting)

{
  modules: string[];  // ["User management", "Analytics"]
}

7. Security & Compliance

Define security requirements and data handling needs.

{
  security: string[];        // ["HTTPS", "2FA", "GDPR compliance"]
  sensitiveData: string[];   // ["Personal data", "Payment info"]
}

Security Requirements:

☐ HTTPS required
☐ Strong authentication
☐ Data encryption
☐ Security audit
☐ GDPR compliance

Sensitive Data Types:

☐ Personal information
☐ Banking details
☐ Medical records
☐ Business confidential data
☐ None

8. Additional Information

Final notes and consent.

{
  additionalInfo?: string;  // Free-text field for extra details
  consent: boolean;          // Required: true
}

Consent Statement:

“I confirm that all information provided is accurate and complete. I consent to Fataplus processing this data to prepare a project proposal.”

The consent field must be checked (true) for form submission to succeed.

Backend Processing

Form Submission Flow

Client Submission

Client completes form and clicks Submit.

// POST /api/submit
const response = await fetch('/api/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(formData)
});

Server Validation

Hono backend validates all fields.

const submissionSchema = {
  projectTitle: (v: string) => v.length >= 3 && v.length <= 100,
  companyName: (v: string) => v.length >= 2,
  contactName: (v: string) => v.length >= 2,
  contactEmail: (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v),
  consent: (v: boolean) => v === true,
  problemStatement: (v: string) => v.length >= 10,
  // ... more validators
};

Validation Errors Return 400:

{
  "success": false,
  "error": "Validation failed",
  "message": "Invalid contactEmail, Invalid consent"
}

Project ID Generation

Generate unique project identifier.

const projectId = `FP-${new Date().getFullYear()}-${
  Math.random().toString(36).substr(2, 9).toUpperCase()
}`;
// Result: "FP-2025-X7K9M3P1A"

Data Storage

Save to Cloudflare KV.

const submission: FormData = {
  id: projectId,
  projectTitle: data.projectTitle,
  companyName: data.companyName,
  // ... all form fields
  timestamp: new Date().toISOString(),
  status: 'submitted'
};

// Store submission
await env.FORM_SUBMISSIONS.put(
  projectId, 
  JSON.stringify(submission)
);

// Update index
const index = await env.FORM_SUBMISSIONS.get('submissions_index');
const list = index ? JSON.parse(index) : [];
list.push({
  id: projectId,
  projectTitle: submission.projectTitle,
  companyName: submission.companyName,
  status: submission.status,
  timestamp: submission.timestamp
});
await env.FORM_SUBMISSIONS.put('submissions_index', JSON.stringify(list));

Notifications

Send email to client and team.

await sendNotificationEmail(submission, env);

Email Content:

Project ID and title
Client contact information
Budget and timeline
Problem and solution summary
Next steps

Success Response

Return confirmation to client.

{
  "success": true,
  "data": {
    "projectId": "FP-2025-X7K9M3P1A",
    "message": "Form submitted successfully"
  }
}

Real-Time Validation

Server-side validation endpoints for instant feedback.

Validation API

// POST /api/validate
{
  "field": "email",
  "value": "test@example.com"
}

Supported Validators:

Email
Phone
Project Title
Required

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const isValid = emailRegex.test(value);

Response:

{
  "success": true,
  "data": {
    "isValid": true,
    "message": "Valid email"
  }
}

const phoneRegex = /^[\d\s\-\+\(\)]+$/;
const isValid = !value || phoneRegex.test(value);

Accepts international formats:

+261 34 12 34 56
034-12-34-56
(034) 12 34 56

const isValid = value.length >= 3 && value.length <= 100;
const message = isValid 
  ? 'Valid title' 
  : 'Title must be 3-100 characters';

const isValid = typeof value === 'string' && value.trim().length > 0;
const message = isValid ? 'Valid' : 'This field is required';

Auto-Generated PRD

Instant Product Requirements Document creation upon submission.

PRD Structure

# Product Requirements Document - [Project Title]

**Generated**: [Date]
**Project ID**: [FP-YYYY-XXXXXXXXX]
**Client**: [Company Name]
**Contact**: [Contact Name] ([Email])

---

## 📊 Executive Summary

### Problem
[Problem Statement]

### Solution
[Solution Vision]

### Target Audience
[Target Audience]

### Expected Impact
[Expected Impact]

---

## 🎯 Objectives and Specifications

### Project Type
[Project Types]

### Technical Complexity
[Complexity Level]

### Budget
[Budget Range]

### Timeline
[Timeline Estimate]

---

## 📋 Features

### Essential (Must-have)
1. [Feature 1]
2. [Feature 2]
...

### Important (Should-have)
1. [Feature 1]
2. [Feature 2]
...

### Modules Required
[Selected Modules]

---

## 🛠️ Technical Specifications

### Frontend: [Technologies]
### Backend: [Technologies]
### Database: [Database Choice]
### Integrations: [External Services]

---

## 🎨 Design and UX

### Visual Style: [Style Preference]
### References: [Inspiration URLs]
### Existing Assets: [Available Materials]

---

## 🔒 Security

### Requirements: [Security Needs]
### Sensitive Data: [Data Types]

---

## 📞 Contact

**Client**: [Company]
**Contact**: [Name]
**Email**: [Email]
**Phone**: [Phone]

---

*Auto-generated by Fataplus Intake System*
*© 2025 Fataplus SARLU. All rights reserved.*

Download PRD

// GET /api/prd/:projectId
const prdContent = generatePRD(submission);

return c.text(prdContent, 200, {
  'Content-Type': 'text/markdown',
  'Content-Disposition': `attachment; filename="PRD-${projectTitle}-${date}.md"`
});

Access: https://intake.fata.plus/api/prd/FP-2025-X7K9M3P1A

The PRD is available immediately after submission and remains accessible via the project ID.

Admin Features

Submission Management

List All Submissions

// GET /api/submissions

Response:

{
  "success": true,
  "data": [
    {
      "id": "FP-2025-X7K9M3P1A",
      "projectTitle": "Agritech Mobile App",
      "companyName": "AgriCorp SARLU",
      "status": "submitted",
      "timestamp": "2025-03-03T10:30:00Z"
    },
    // ... more submissions
  ]
}

Get Submission Details

// GET /api/submissions/:id

Returns complete form data:

{
  "success": true,
  "data": {
    "id": "FP-2025-X7K9M3P1A",
    "projectTitle": "Agritech Mobile App",
    "companyName": "AgriCorp SARLU",
    // ... all form fields
    "status": "submitted",
    "timestamp": "2025-03-03T10:30:00Z"
  }
}

Update Status

// PUT /api/submissions/:id/status
{
  "status": "reviewed"  // submitted | reviewed | approved | rejected
}

Status Workflow:

submitted - Initial state after form submission
reviewed - Project manager has reviewed
approved - Moving forward with project
rejected - Not proceeding (with feedback)

Best Practices

Be Specific: The more detailed your responses, the better the auto-generated PRD will match your needs.

Use Examples: When describing problems or solutions, include concrete examples to help the team understand context.

Review Before Submit: Double-check all information, especially contact details and budget/timeline constraints.

Forms typically take 10-15 minutes to complete thoroughly. Set aside adequate time for thoughtful responses.

Integration Points

Webhook Support

Forms can trigger webhooks for downstream automation.

// Future: Webhook to CRM on submission
await fetch('https://bknd.fata.plus/api/webhooks/intake', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    event: 'form.submitted',
    projectId: submission.id,
    data: submission
  })
});

Potential Automations:

Create CRM project record
Assign project manager
Schedule kickoff call
Generate proposal document
Send welcome email sequence

Analytics

Track form performance and conversion metrics. Metrics Collected:

Total submissions
Completion rate (started vs. submitted)
Average completion time
Most common project types
Budget distribution
Timeline preferences
Drop-off points (which sections)

Next Steps

AI Features

See how AI enhances form data processing

CRM Overview

Learn how form submissions become projects

Multi-Tenant

Understand project provisioning architecture

Collaboration

Explore team and client collaboration tools

​Overview

8-Section Form

Real-Time Validation

Auto PRD Generation

Email Notifications

​Form Architecture

​Technology Stack

​Form Sections

​1. Project Vision

​2. Company Information

​3. Project Type

​4. Technical Specifications

​5. Design Requirements

​6. Feature Requirements

​7. Security & Compliance

​8. Additional Information

​Backend Processing

​Form Submission Flow

​Real-Time Validation

​Validation API

​Auto-Generated PRD

​PRD Structure

​Download PRD

​Admin Features

​Submission Management

​Best Practices

​Integration Points

​Webhook Support

​Analytics

​Next Steps

AI Features

CRM Overview

Multi-Tenant

Collaboration

Overview

Form Architecture

Technology Stack

Form Sections

1. Project Vision

2. Company Information

3. Project Type

4. Technical Specifications

5. Design Requirements

6. Feature Requirements

7. Security & Compliance

8. Additional Information

Backend Processing

Form Submission Flow

Real-Time Validation

Validation API

Auto-Generated PRD

PRD Structure

Download PRD

Admin Features

Submission Management

Best Practices

Integration Points

Webhook Support

Analytics

Next Steps