Svelte Form Builder

The Problem i Faced: Why I Built This

When starting a new project, building forms for authentication, contact pages, and various user inputs can be a time-consuming task. The challenge lies in:

• Manually creating different input fields.

• Implementing both client-side and server-side validation from scratch.

• Handling errors individually for each field.

• Managing field dependencies, custom inputs, and validation rules effectively.

To streamline this process, I created Svelte Form Builder—a project designed to help developers build, configure, and integrate forms effortlessly.

How It Works

Svelte Form Builder provides a seamless experience for creating dynamic forms with ease. Here's how you can use it:

1. Add Input Fields: Choose from a variety of input types, including Email, Password, Date Picker, File Input, Location Input, Radio Groups, and more.

2. Customize & Rearrange: Edit parameters like label, description, placeholder, validation rules (min, max, required), and reorder fields based on your requirements.

3. Copy & Integrate: Generate and copy the Schema, Client-side, and Server-side code directly into your project. You're ready to go in minutes!
   

Key Features

1. Schema-Based Validation

• Zod & Valibot Support: Automatically generate schema validation based on the selected input fields.

• Ensures both client-side & server-side validation are handled efficiently.

2. Smart Dependency Management

• Automatically suggests dependencies based on selected fields.

• Install only what you need for a lightweight and optimized project.

3. Pre-Built Templates

• Quickly set up common forms like Authentication (Login/Signup), Contact Forms, and more.

• Saves time by providing ready-to-use templates.

4. Special Components

• Password Input: Includes built-in show/hide functionality.

• Location Input: Enables users to pick locations easily.

• File Upload: Simplifies file handling with validation.

Live Demo: https://svelte-form-builder.vercel.app
GitHub Repo: https://github.com/SikandarJODD/form-builder

Project Timeline
I have been working on this project for the past two months, continuously improving it based on feedback and real-world use cases.

Feedback & Improvements
I would love to hear your thoughts! If you have any suggestions on what to add, remove, or improve, please let me know. If you find any bugs, I’d love to solve them.

This project is built to help developers like you, and I hope it makes form building in Svelte much easier for your next project.

Happy Coding Svelte Devs