FormMorph ✨

Headless Google Form Design Studio — Transform standard Google Forms into stunning, high-converting Typeform-style conversational sliders, multi-step wizards, card stacks, and floating website drawers.

---

🌟 Features

• ⚡ Zero-Config Google Form Scraper: Paste any public https://docs.google.com/forms/d/e/... link. FormMorph instantly parses fields, types, options, and entry mapping keys (entry.XXXXXXXXXX).
• 🎨 4 Interactive Experience Layouts:
  1. Conversational Slider (Typeform Mode): 1-question-at-a-time focus with animated transitions and keyboard navigation (Enter, A-D, 1-5, Tab).
  2. Multi-Step Wizard: Numbered step wizard with dynamic progress tracker.
  3. Modern Card Stack: Clean single-page form with sleek neon accent fields.
  4. Floating Website Drawer: Slide-out responsive form preview simulating real-world SaaS website embeds.
• 🌈 6 Designer Themes: Cyberpunk Obsidian, Aurora Glass, Sunset Blossom, Emerald Zen, Linear Monochrome, and Clean Studio Light.
• 📱 Multi-Device Viewport Simulation: Real-time interactive testing across Desktop, iPad / Tablet, and iPhone / Mobile screen sizes.
• 🔍 Live Entry Payload Inspector: Observe live mapping of respondent input to Google Form entry.XXXX parameters.
• 📤 Instant Export Options:
  • Standalone Single-File HTML: Download a zero-dependency .html file that submits directly to Google Forms.
  • Iframe Embed: Responsive embed snippet for Webflow, Framer, Squarespace, and WordPress.
  • Floating Widget Script: One-line JS widget to mount a floating form launcher on any website.
  • React JSX Component: Drop-in React snippet for Next.js, Remix, or Vite apps.
• 🔄 Real-Time Submission Bridge: Responses go directly into your real Google Forms & connected Google Sheets.

---

🚀 Quick Start

1. Install Dependencies

# In the root formmorph directory:
npm run install:all

2. Start Local Studio

npm run dev
# or
./start.sh

• Frontend Studio: http://localhost:5173
• Backend Bridge API: http://localhost:3001

---

🏗 Architecture

formmorph/
├── client/                     # Vite + React + Vanilla CSS Frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── layouts/
│   │   │   │   ├── TypeformLayout.jsx  # Conversational slide flow
│   │   │   │   ├── WizardLayout.jsx    # Step-by-step wizard
│   │   │   │   ├── CardLayout.jsx      # Single page stacked card
│   │   │   │   └── DrawerLayout.jsx    # Floating drawer preview
│   │   │   └── modals/
│   │   │       └── ExportModal.jsx     # HTML download, Iframe, React & Widget snippets
│   │   ├── data/
│   │   │   ├── presetForms.js          # Demo forms (Product CSAT, RSVP, Beta)
│   │   │   └── themes.js               # Designer themes & palettes
│   │   ├── App.jsx                     # Studio workspace & control center
│   │   └── index.css                   # Glassmorphic Design System
│   └── vite.config.js                  # API proxy configuration
│
└── server/                     # Node.js + Express Backend
    ├── parser.js               # FB_PUBLIC_LOAD_DATA_ scraper & AST extractor
    ├── submitter.js            # Direct URL-encoded Google Form POST bridge
    ├── presets.js              # Server-side preset definitions
    ├── storage.js              # Custom form storage engine
    └── index.js                # REST API endpoints (/api/parse, /api/submit)

---

🔒 Security & Privacy

• Zero Google OAuth credentials required.
• Form submissions go directly to Google's public formResponse gateway.
• No personal user data is permanently stored on external servers.