Project Name: Embeddable Forms Template
Project Description:
A community template that enables embedding Directus item submission forms on any website with prefill support, iframe communication, and auto-resize functionality.
The template includes 9 pre-configured collections for common use cases like contact forms, newsletters, event registrations, job applications, and more.
Why This Matters: Directus has powerful form interfaces but no easy way to embed them on external websites. You have to build a custom integration with each frontend technology you use or use third-party connectors.
This template solves that problem, letting you use Directus’s existing form UI and interface components system on any website—including static sites—without heavy component frameworks.
Don’t tell anyone, but technically embedding a form requires loading the entire admin app…
Team Details: Just me, with my wife and cats providing moral support 
Challenge Entered: Challenge 2 - Build a community template, using the MCP
This project is submitted as a community template and is available on GitHub with full installation instructions via the Directus template CLI.
Live Demo: https://directus-demo.thederf.com/dirserve/
Video Walkthrough: https://www.youtube.com/watch?v=6DcpQy0i9vA
Screenshots
Key Features
- Embed any Directus collection as a public form
- 9 pre-configured collections (contact, newsletter, events, jobs, support, etc.)
- Pre-populate fields via URL parameters or postMessage API
- Iframe auto-resize and bidirectional communication
- Full support for Directus validation, conditions, and custom interfaces
- Pre-configured public permissions for secure submissions
Technical Details
- Backend: Directus (v10+) with a custom, slightly evil module extension for form rendering
- Development Tools: Directus MCP, Claude Code, directus-serve extension
How Directus MCP Was Used
This project was built almost entirely using Directus MCP and Claude Code. Along with database reference for programming, The MCP integration was instrumental in:
- Collection Creation: MCP handled the creation of all 9 collections with proper field configurations
- Permissions Configuration: Automated setup of public role permissions for secure form submissions
- Test Data Generation: Populated collections with realistic sample data
- Simultaneous Development: Eliminated context-switching between database configuration and code development
Using MCP saved significant development time by allowing simultaneous code and database configuration, eliminating the need to constantly look up collection and field names. Manual
intervention was only needed for the admin router integration.
Key Implementation Highlights
Module Public Routes: Directus modules can’t register public routes by default. Solution: extract the Vue app instance from the #app DOM element and hook into the router directly.
Admin Store Initialization: Public forms don’t go through login, so admin stores need manual initialization. Some stores can be triggered to hydrate, others require direct data
injection.
Iframe Communication: Uses postMessage API for secure cross-origin communication with events for form ready, resize, submission, and errors.
Starting Point Details
I wished I had embedded forms for my wedding RSVP and several work projects. Rather than installing heavy component frameworks just for forms, I wanted to leverage
Directus’s existing form system. This hackathon provided an opportunity to test out the concept and see if it was possible.
This is an entirely new template created specifically for this hackathon, starting from scratch with a SQLite database and custom docker-compose configuration.
Repository: https://github.com/JoshTheDerf/directus-template-embeddable-forms
