NextJS Typeform Clone

An open-source, modern alternative to Typeform built with Next.js. It offers a smooth, one-question-at-a-time experience that makes filling out forms easy and engaging.

Why use this?

We wanted to create a simple, fast, and customizable form builder that you can own. Whether you need a simple contact form or a complex survey, this project provides a solid foundation with a modern tech stack.

• undefinedClean Design: Minimalist and focused interface.
• undefinedFast Performance: Built on Next.js for speed.
• undefinedEasy Customization: Styled with Tailwind CSS and Shadcn UI.
• undefinedDeveloper Friendly: Written in TypeScript with clean code structure.

Features

• undefinedOne Question at a Time: The signature Typeform “flow” experience.
• undefinedKeyboard Navigation: Use Enter to advance, Up/Down arrows to navigate.
• undefinedResponsive Design: Works perfectly on mobile, tablet, and desktop.
• undefinedDynamic Fields:
  • undefinedShort Text: Simple text inputs.
  • undefinedMultiple Choice: Select one or many options (auto-switches to dropdown for long lists).
  • undefinedNumber: Numeric inputs with validation.
  • undefinedDate: Easy date picker (MM/DD/YYYY).
  • undefinedEmail: Validated email input.
• undefinedProgress Bar: Visual indicator of completion.
• undefinedValidation: Built-in checks for required fields and data formats.
• undefinedDark Mode: Built-in support for light and dark themes.

Tech Stack

• undefinedFramework: Next.js 15+ (App Router)
• undefinedLanguage: TypeScript
• undefinedStyling: Tailwind CSS
• undefinedComponents: Shadcn UI
• undefinedIcons: Lucide React

Getting Started

Follow these steps to run the project locally on your machine.

Prerequisites

• Node.js 18 or later
• npm, yarn, or pnpm

Installation

1. undefinedClone the repositoryundefined

   git clone https://github.com/yourusername/nextjs-typeform-clone.git
   cd nextjs-typeform-clone
   

2. undefinedInstall dependenciesundefined

   npm install
   # or
   yarn install
   # or
   pnpm install
   

3. undefinedRun the development serverundefined

   npm run dev
   

4. undefinedOpen your browserundefined

   Navigate to http://localhost:3000 to see the form in action.

Project Structure

Here’s a quick look at how the code is organized so you can find your way around.

src/
├── app/                  # Next.js App Router pages
│   ├── page.tsx          # Main entry point (renders the form)
│   └── layout.tsx        # Global layout and metadata
├── components/
│   ├── form/             # Core form components
│   │   ├── type-form.tsx      # Main form logic and state manager
│   │   ├── field-renderer.tsx # Decides which field component to show
│   │   ├── progress-bar.tsx   # Top progress bar
│   │   └── fields/            # Individual field types
│   │       ├── text-field.tsx
│   │       ├── number-field.tsx
│   │       ├── choice-field.tsx
│   │       └── date-field.tsx
│   └── ui/               # Reusable UI components (buttons, inputs, etc.)
├── data/
│   ├── data.ts           # Form configuration (JSON structure)
│   └── constants.ts      # Static data (choices, lists)
└── lib/                  # Utility functions

How to Customize

Adding a New Form

You don’t need to touch the code logic to change the questions. Just edit src/data/data.ts.

Example structure:

export const myForm = {
  title: "My Custom Form",
  fields: [
    {
      id: "name",
      type: "short_text",
      title: "What is your name?",
      required: true,
    },
    {
      id: "age",
      type: "number",
      title: "How old are you?",
    },
    // Add more fields here...
  ],
};

Then update src/app/page.tsx to use your new form:

<Typeform form={myForm} />

Adding New Field Types

1. Create a new component in src/components/form/fields/.
2. Update src/components/form/field-renderer.tsx to import and render your new field based on its type.

Contributing

We love contributions! If you have an idea for a new feature or found a bug:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/amazing-feature).
3. Commit your changes.
4. Push to the branch.
5. Open a Pull Request.

License

This project is open-source and available under the MIT License. You are free to use, modify, and distribute it for personal or commercial projects.