heyform

Open-Source Form Builder

8,208

598

8,208

View on GitHub

Top Related Projects

formik

34,253

Build forms in React, without the tears 😭

react-hook-form

43,407

📋 React Hooks for form state management and validation (Web + React Native)

unform

4,453

Performance-focused API for React forms 🚀

formspree

2,769

The successor to this repository is actively maintained at https://formspree.io. Its source code is not available

Quick Overview

HeyForm is an open-source, self-hosted form builder and form management system. It allows users to create, manage, and analyze forms and surveys with a user-friendly interface and powerful features. HeyForm is designed to be a privacy-focused alternative to popular form builders like Google Forms or Typeform.

Pros

Self-hosted and privacy-focused, giving users full control over their data
Customizable and extendable, with a plugin system for adding new features
Responsive design, making forms accessible on various devices
Free and open-source, allowing for community contributions and improvements

Cons

Requires technical knowledge for setup and self-hosting
May lack some advanced features found in established commercial form builders
Smaller community and ecosystem compared to more popular form building solutions
Potential for increased maintenance and update responsibilities

Getting Started

To get started with HeyForm, follow these steps:

Clone the repository:

git clone https://github.com/heyform/heyform.git

Navigate to the project directory:
```
cd heyform
```
Install dependencies:
```
npm install
```
Set up the environment variables by copying the example file:
```
cp .env.example .env
```
Edit the .env file with your specific configuration.
Run the development server:
```
npm run dev
```
Access HeyForm in your browser at http://localhost:3000.

For production deployment, refer to the project's documentation for more detailed instructions on setting up a production-ready environment.

Competitor Comparisons

formik

34,253

Build forms in React, without the tears 😭

Pros of Formik

More mature and widely adopted in the React ecosystem
Extensive documentation and community support
Integrates well with popular validation libraries like Yup

Cons of Formik

Steeper learning curve for beginners
Can be overkill for simple forms
Requires more boilerplate code for basic setups

Code Comparison

Formik:

import { Formik, Form, Field } from 'formik';

<Formik
  initialValues={{ email: '', password: '' }}
  onSubmit={(values) => console.log(values)}
>
  <Form>
    <Field name="email" type="email" />
    <Field name="password" type="password" />
    <button type="submit">Submit</button>
  </Form>
</Formik>

Heyform:

import { useForm } from 'heyform';

const { register, handleSubmit } = useForm();

<form onSubmit={handleSubmit((data) => console.log(data))}>
  <input {...register('email')} type="email" />
  <input {...register('password')} type="password" />
  <button type="submit">Submit</button>
</form>

Heyform offers a simpler API with less boilerplate, making it easier for beginners to get started. However, Formik provides more advanced features and flexibility for complex form scenarios. The choice between the two depends on the project's complexity and the developer's familiarity with React form libraries.

react-hook-form

43,407

📋 React Hooks for form state management and validation (Web + React Native)

Pros of react-hook-form

More mature and widely adopted in the React community
Extensive documentation and community support
Highly performant with minimal re-renders

Cons of react-hook-form

Steeper learning curve for beginners
Less out-of-the-box UI components
Requires more custom setup for complex form scenarios

Code Comparison

react-hook-form:

import { useForm } from "react-hook-form";

const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("firstName")} />
  <input type="submit" />
</form>

heyform:

import { Form, Input } from "heyform";

<Form onSubmit={data => console.log(data)}>
  <Input name="firstName" />
  <button type="submit">Submit</button>
</Form>

react-hook-form offers more granular control over form state and validation, while heyform provides a simpler API with pre-built components. react-hook-form is better suited for complex forms and performance-critical applications, whereas heyform might be preferable for rapid prototyping and simpler form scenarios. The choice between the two depends on the specific project requirements, team expertise, and desired level of customization.

unform

4,453

Performance-focused API for React forms 🚀

Pros of Unform

More comprehensive documentation and examples
Larger community and more frequent updates
Better TypeScript support and type definitions

Cons of Unform

Steeper learning curve for beginners
More complex setup process
Limited built-in UI components compared to Heyform

Code Comparison

Unform:

import React from 'react';
import { Form } from '@unform/web';
import Input from './components/Input';

function MyForm() {
  function handleSubmit(data) {
    console.log(data);
  }

  return (
    <Form onSubmit={handleSubmit}>
      <Input name="email" />
      <Input name="password" type="password" />
      <button type="submit">Submit</button>
    </Form>
  );
}

Heyform:

import React from 'react';
import { Form, Input, Button } from 'heyform';

function MyForm() {
  const handleSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Input name="email" />
      <Input name="password" type="password" />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

Both libraries provide similar functionality for creating forms in React applications. Unform offers more flexibility and advanced features, while Heyform focuses on simplicity and ease of use. The choice between the two depends on the specific requirements of your project and your team's expertise.

formspree

2,769

The successor to this repository is actively maintained at https://formspree.io. Its source code is not available

Pros of Formspree

More established project with a larger community and longer history
Offers a hosted solution, simplifying setup and maintenance
Provides additional features like spam filtering and file uploads

Cons of Formspree

Less customizable than Heyform
Requires a paid plan for advanced features and higher submission limits
May have potential privacy concerns due to data passing through third-party servers

Code Comparison

Heyform (React component):

import { HeyForm } from '@heyform/react';

const MyForm = () => (
  <HeyForm formId="your-form-id" />
);

Formspree (HTML form):

<form action="https://formspree.io/f/your-form-id" method="POST">
  <input type="email" name="email">
  <input type="submit" value="Send">
</form>

Both projects aim to simplify form handling, but they take different approaches. Heyform focuses on providing a self-hosted, customizable solution with React components, while Formspree offers a hosted service with easy integration through HTML forms. The choice between them depends on factors such as desired level of control, technical expertise, and specific project requirements.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

HeyForm is an open-source form builder that allows anyone to create engaging conversational forms for surveys, questionnaires, quizzes, and polls. No coding skills required.

Website | Documentation | Blog | Twitter

Features

HeyForm simplifies the creation of conversational forms, making it accessible for anyone to gather information or feedback through engaging surveys, quizzes, and polls. We are committed to enhancing HeyForm with regular updates, including bug fixes, new features, and performance improvements.

Build Forms with Ease

ð Versatile Inputs: From basic text, email, and phone number fields to advanced options like picture choices, date pickers, and file uploads, HeyForm supports a wide array of input types.
ð§ Smart Logic: Conditional logic and URL redirections for dynamic, adaptable forms.
ð Powerful Integrations: Connect with webhooks, analytics, marketing platforms, and tools like Zapier and Make.com.

Customize to Your Brand

ð¨ Visual Themes: Tailor the look and feel of your forms to match your brand identity with customizable fonts, colors, backgrounds, and more.
â¨ Advanced Theming: Gain greater control with extensive customization options, including custom CSS for deeper personalization.

Analyze and Act on Data

ð Insightful Analytics: Gain insights with detailed analytics, including drop-off rates and completion rates.
ð¤ Data Export: Easily export your form results to CSV for further analysis or integration into your systems.

Getting started with HeyForm

The simplest and most efficient way to dive into HeyForm is through our official hosted service. When you choose this cloud version, you're getting the advantage of high reliability, automatic backups, robust security, and hassle-free maintenanceâall carefully managed by us, the passionate duo behind HeyForm.

Choosing our hosted version not only saves a significant amount of time and resources but also supports HeyForm's development and the open-source community. Get a great service while backing innovation. ð

Structure

.
âââ packages
    âââ answer-utils       (form submission utils for server and webapp)
    âââ embed              (form embed javascript library)
    âââ shared-types-enums (shared types/enums for server and webapp)
    âââ utils              (common utils for server and webapp)
    âââ server             (node server)
    âââ webapp             (react webapp)

Self-hosting

Interested in self-hosting HeyForm on your server? Take a look at the self-hosting installation instructions.

One Click Deployment

Local development

Follow the local installation instructions to run the project locally.

How to Contribute

You are awesome, let's build great software together. Head over to the contribute docs to get started. ðª

Support & Community

You'll find a lot of resources to help you get started with HeyForm in the help center. However, if you can't find what you're looking for there, don't hesitate to reach out to us:

Have a question? Join the Discord server and get instant help.
Found a bug? Create an issue

License

HeyForm is open-source under the GNU Affero General Public License v3.0 (AGPL-3.0), you will find more information about the license and how to comply with it here.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot