Form Builder

A dynamic form-building tool that allows users to create, customize, and validate forms seamlessly within web applications. Built with React, Next.js, and various other technologies, Form Builder provides an intuitive interface for developers and users alike.

Table of Contents

• Form Builder
  • Table of Contents
  • Features
  • Live Demo
  • YouTube Demo
  • Installation
  • Usage
    • Creating a Form
  • Components
  • Validation
  • API
    • Form Submission
  • Contributing
  • License
  • Acknowledgements

Features

• Dynamic Form Creation: Easily create forms with various input types including text, checkbox, radio buttons, and more.
• Real-Time Validation: Validate user inputs using the Zod library, ensuring data integrity and user-friendly feedback.
• Responsive Design: Built with Tailwind CSS, ensuring forms look great on all devices.
• Customizable Components: Leverage ShadCN components for a consistent and modern UI experience.
• Server-Side Rendering: Utilize Next.js for optimized performance and SEO.

Live Demo

Check out the live demo of the Form Builder here.

YouTube Demo

Installation

To get started with Form Builder, follow these steps:

1. Clone the repository:

   git clone https://github.com/hasanharman/form-builder.git

2. Navigate into the project directory:

   cd form-builder

3. Install the necessary dependencies:

   npm install

Usage

To start the development server, run:

npm run dev

Open your browser and navigate to http://localhost:3000 to see the application in action.

Creating a Form

1. Access the Builder: Once the app is running, navigate to the form builder interface.
2. Add Inputs: Use the toolbar to add different types of inputs.
3. Customize Inputs: Click on any input field to configure properties such as label, placeholder, required validation, etc.
4. Save & Preview: Once your form is built, save it and preview the output.

Components

Form Builder consists of various reusable components:

• FormContainer: The main container for the form elements.
• InputField: A customizable input component.
• SelectField: Dropdown selection component.
• CheckboxField: A checkbox input component.
• Button: A styled button component for form submission.

Validation

Form Builder utilizes Zod for input validation. You can define schemas for your forms as follows:

import { z } from 'zod';

const formSchema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email address"),
  age: z.number().min(18, "You must be at least 18 years old"),
});

This schema can be applied to your form to enforce validation rules.

API

Form Submission

Once your form is ready, you can handle submissions with a simple API call. Here’s an example of how to submit the form data:

const handleSubmit = async (data) => {
  try {
    const response = await fetch('/api/form-submit', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const result = await response.json();
    console.log('Form submitted successfully:', result);
  } catch (error) {
    console.error('Error submitting form:', error);
  }
};

Contributing

Contributions are welcome! If you would like to contribute to Form Builder, please follow these steps:

1. Fork the Repository: Click on the “Fork” button at the top right corner of the repository page.
2. Create a Branch:

   git checkout -b feature/YourFeatureName

3. Make Changes: Implement your feature or fix.
4. Commit Changes:

   git commit -m "Add a feature"

5. Push Changes:

   git push origin feature/YourFeatureName

6. Create a Pull Request: Go to the original repository and create a pull request.

License

This project is licensed under the MIT License.

Acknowledgements

• React - A JavaScript library for building user interfaces.
• Next.js - The React framework for production.
• Tailwind CSS - A utility-first CSS framework for creating custom designs.
• Zod - TypeScript-first schema declaration and validation.