FormForge AI — AI-Powered Form Builder (Laravel + Livewire)

A modern, highly-interactive, AI-powered Form Builder built using Laravel 13, Livewire 4, Alpine.js, Tailwind CSS, and MySQL 8.

🌐 Live Demo

You can access the live running instance of this project here: 👉 Access FormForge AI Live Demo

[!NOTE] Test Server Environment & Queue Worker Note: This project is currently hosted on my test server. Unlike Laravel Cloud, this environment does not have a dedicated queue worker configured to process Laravel queue jobs continuously.

As a result, the application will function normally except for one feature: AI Form Modifier. AI-generated responses are processed asynchronously through Laravel queue jobs, so this functionality will not work on the test server.

To use the AI Form Modifier as intended, please set up the project in your local environment and complete the following steps:
Configure your Google Gemini API key in the .env file.
Start a Laravel queue worker, for example:
php artisan queue:listen
Alternatively, you can configure Laravel Supervisor to keep the queue worker running continuously in a production environment.

I have not configured Supervisor on the test server because it would require a complete Laravel production setup from scratch, and the current server is intended only for demonstration and testing purposes.

Once the queue worker is running (either manually or through Supervisor) and the Gemini API key is configured, the AI Form Modifier will work as expected.

Features

🛠️ Core Form Builder

Manual Construction: Drag & drop or click-to-add fields to arrange them instantly.
Sections & Steps: Organize fields into clean, groupable sections.
12+ Field Types: Supports text, textarea, number, email, phone, date, dropdown, radio, checkbox, file upload, color picker, and rating (interactive stars).
Two-way Sync Raw JSON Editor: A live JSON editor synchronized in real-time with the canvas, validating structure and constraints.
Dynamic Server-side Validation: Strict validation rules derived automatically from the active schema (never trusts browser input).
Submissions Manager: Pagination, search, download file attachments, and download full response logs as CSV.

🤖 AI Form Generation & Editing

Prompt-to-Form: Describe your form in natural language, and the AI designs it instantly (fields, placeholders, options, validations).
AI Modification: Modify existing forms with prompt commands (e.g. "make phone required", "translate labels to Hindi").
Word / Excel Document Import: Parses text/headers from uploaded .docx and .xlsx files and leverages AI to build the matching schema structure.
Queued Operations: Heavy LLM generation processes run asynchronously via background jobs, showing live progress and preventing HTTP block.
Automatic Fallback Mocking: If no GEMINI_API_KEY is present, the app switches to a local heuristic mockup generator, making the platform 100% testable out-of-the-box.

Hybrid Document Import Strategy (Word & Excel Split)

For importing documents under the Doc Import tab, the system uses a Hybrid Parsing Split to combine robustness with intelligence:

Deterministic Parsing (Word / Excel Structure Extraction):
- Word (.docx): The DocumentImporterService uses PhpWord to scan sections, locate paragraph lists, and extract text and list options directly.
- Excel (.xlsx / .xls): The service uses PhpSpreadsheet to read column headers in the first row (the primary header-row layout) and captures sample rows of data under them.
- This phase is 100% deterministic, ensuring all labels, text, and header strings are extracted exactly as written with zero risk of AI hallucination or omission.
AI Inference & Semantic Mapping:
- The extracted text and columns are formatted into a prompt and sent to the Gemini API.
- The AI infers field types (e.g. mapping "Age" to a number input, "Phone" to a phone input, "Description" to a textarea, or list items to dropdown/radio options) and maps validation constraints.
Preview & Mapping Board:
- Once the background generation job completes, the user is redirected to the Form Builder Canvas page. This is the preview and mapping board.
- The user can visually inspect all generated sections and fields, correct any misidentified types using the Field Settings Inspector on the right, or edit the raw JSON directly before clicking Save Form to commit the schema to the database.

Key Routes & Navigation

Once the server is running, you can access the following pages:

Dashboard: http://127.0.0.1:8000/ (Manage forms, delete, and view list)
Form Creator: http://127.0.0.1:8000/forms/create (Start manual form, prompt AI, or upload Word/Excel files)
Form Builder Canvas: http://127.0.0.1:8000/forms/{id}/edit (Manage sections, drag-and-drop fields, configure validations, edit raw JSON schema)
Submissions Board: http://127.0.0.1:8000/forms/{id}/submissions (Browse user responses, search data, download attachments, export CSV)
Public Fill / Preview Page: http://127.0.0.1:8000/forms/{slug} (Responsive public-facing form with strict backend validation)

Installation & Setup

Follow these steps to set up the project locally:

1. Clone & Install Dependencies

composer install
npm install

2. Configure Environment variables

Copy .env.example to .env and fill in your database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=edunet
DB_USERNAME=root
DB_PASSWORD=

# Gemini API configuration for AI generator
GEMINI_API_KEY=your_gemini_api_key_here
GEMINI_MODEL=gemini-2.5-flash

[!IMPORTANT] AI Prompt & Document Import Fallback Behavior: If the GEMINI_API_KEY is left blank/empty in your .env file, the system automatically falls back to a local mockup generator:

AI Prompts: Will return a simplified default "General Information" form template.

Document Imports (Word & Excel): Will extract the text from the files but will fall back to a default structure instead of parsing the unique content of your uploaded document.

To enable full dynamic AI generation from custom prompts and to successfully translate your uploaded Word/Excel files into their exact matching form structures, you must configure a valid GEMINI_API_KEY.

3. Run Migrations & Seeders

Create the database schema and seed the initial contact form:

php artisan migrate --seed
php artisan storage:link

4. Compile Assets

Compile the Tailwind CSS styles and interactive JS modules:

npm run build

5. Start the Background Queue Worker

[!WARNING] Because AI Form generation (prompts and imports) runs asynchronously in database queues, you must start a queue worker for AI generation to process:

php artisan queue:listen

6. Start the Local Server

php artisan serve

Open http://127.0.0.1:8000 to access the application dashboard.

Alternative Setup: Docker Sail

If you prefer to run the application using isolated Docker containers:

Start the Sail containers:
```
vendor\bin\sail up -d
```
Run migrations, seeds, and storage link inside Sail:
```
vendor\bin\sail artisan migrate --seed
```
Compile assets:
```
vendor\bin\sail npm run build
```
Start the queue worker inside Sail:
```
vendor\bin\sail artisan queue:listen
```

The application will be accessible at http://localhost.

Running Automated Tests

A comprehensive test suite is provided to verify dynamic schema validation, JSON editor synchronization, Laravel validation rules mapping, and form submission flows.

To run tests against an in-memory SQLite database:

php artisan test

Part D: Engineering Differentiators

To elevate FormForge AI into a robust, enterprise-ready product, we implemented three major engineering differentiators:

Queue-Based Asynchronous AI Engine & Live Progress Polling: Decouples slow AI processes and document imports to background queues, keeping HTTP requests fast and utilizing Livewire polling to report live job progress.
Portable Containerization via Laravel Sail (Docker): Orchestrates PHP 8.3, MySQL 8, Redis, and Mailpit to guarantee consistent development setups with zero environment drift.
Strict Server-Side Validation & Self-Healing Schemas: Dynamically parses form configurations into strict server-side rules and heals hallucinated model outputs to stable defaults.

For the deep dive on our assumptions, implementation details, trade-offs, and what we'd build with two more weeks of development, please read the dedicated DECISIONS.md file (or access the /project-decisions page directly inside the running application).

Future Scope & Product Roadmap

If we were to expand this application further, the next three high-impact product features on our roadmap would be:

Conditional Branching & Dependency Rules (Product)
Embeddable Widgets & QR Codes (Product)
Form Schema Versioning & Rollback (Engineering)

Refer to DECISIONS.md for detailed descriptions of these roadmap items.

Project Documentation