HeyForm is an open-source form builder designed for non-technical users who need to create engaging conversational forms for surveys, quizzes, and polls. Unlike traditional form tools that rely on static fields, HeyForm enables dynamic, step-by-step interactions with conditional logic and rich input types. It’s built for individuals, small teams, and organizations looking to collect feedback or data without writing a single line of code. The project is structured as a monorepo with clear separation between the frontend (React), backend (Node.js), and shared utilities, making it suitable for both end-users deploying via one-click services and developers who want to self-host or contribute. The AGPL-3.0 license ensures the software remains free and open while encouraging community contributions.
What You Get
- Versatile Inputs - Supports text, email, phone, date pickers, file uploads, and picture choices to capture diverse data types without coding.
- Smart Logic - Implements conditional logic and URL redirections to create dynamic form flows based on user responses.
- Powerful Integrations - Connect forms to webhooks, analytics tools, and platforms like Zapier and Make.com for automated data workflows.
- Visual Themes - Customize fonts, colors, backgrounds, and layout to match brand identity with an intuitive UI.
- Advanced Theming - Apply custom CSS for granular control over form appearance and behavior.
- Insightful Analytics - View completion rates, drop-off points, and response trends directly in the dashboard.
- Data Export - Download all form submissions as CSV files for offline analysis or integration with external systems.
Common Use Cases
- Building a customer feedback survey - A small business uses HeyForm to create a post-purchase survey with picture choices and conditional follow-up questions, then embeds it on their website using the provided JavaScript library.
- Creating a quiz for lead generation - A marketing team designs an interactive product quiz that redirects users to targeted landing pages based on their answers, capturing emails via integrated webhooks.
- Problem: Need to collect structured data without a developer → Solution: HeyForm - A nonprofit needs to gather volunteer applications with file uploads and date preferences. They use HeyForm’s drag-and-drop builder to create the form in minutes, embed it on their site, and export responses to Excel.
- Team: Non-technical marketing team managing multiple campaigns - A remote team of 5 marketers uses the hosted version to create and track 20+ forms per month without IT support, exporting results to Google Sheets for reporting.
Under The Hood
HeyForm is a modular, TypeScript-based form-building platform designed for extensibility and rich rendering capabilities. It emphasizes reusable components, flexible data handling, and seamless integration into third-party applications through a well-organized monorepo structure.
Architecture
The system adopts a modular monorepo architecture with distinct packages for form rendering, answer processing, and embedding logic. This design promotes clear separation of concerns and enhances maintainability.
- Packages are structured around specific responsibilities such as answer transformation, form rendering, and embeddable UI components.
- Design patterns like strategy and factory are applied through utility functions and component-based rendering for handling various field types.
- State management and shared utilities support consistent interaction across components, enabling scalable UI composition.
- Extensibility is supported via configuration-driven rendering and peer dependencies that allow customization without tight coupling.
Tech Stack
The project is built using TypeScript and React, with a comprehensive ecosystem of frontend and backend tools.
- The core is written in TypeScript, leveraging React for UI rendering and Node.js for backend services.
- Key frontend dependencies include react-i18next, rc-field-form, and @radix-ui for robust component support.
- Modern build tools such as tsup, vite, and tailwindcss are used for efficient asset compilation and styling.
- Testing is handled with vitest, complemented by coverage tools for thorough validation across multiple packages.
Code Quality
The codebase demonstrates a mature approach to form handling with strong modularity and test coverage.
- A comprehensive testing strategy includes edge case handling and validation logic across various modules.
- Error handling is consistently implemented using try/catch blocks, reflecting a focus on robustness and reliability.
- Code is generally well-structured with consistent naming and minimal duplication, although some technical debt remains.
What Makes It Unique
HeyForm stands out through its decoupled architecture and flexible rendering options tailored for embedding and customization.
- Modular answer processing utilities support transformation and validation of form responses across different formats and use cases.
- The embed package enables multiple rendering modes (full-page, modal, popup) with DOM isolation for easy third-party integration.
- Strong use of TypeScript types and runtime validation creates a self-documenting, type-safe system for diverse field handling.
- Custom LRU caching in the renderer enhances performance for repeated form rendering with large datasets.