Form Builder with Next.js and dnd-kit

I'll create a drag-and-drop form builder with column support using Next.js and dnd-kit. Let's build this step by step.

How the Form Builder Works

I've created a drag-and-drop form builder that allows you to:

1. Drag form elements from the sidebar onto the canvas
2. Create columns (up to 4 per row) that automatically resize to equal widths
3. Reorder elements within and between rows
4. Create new rows when dragging elements to empty areas

Key Features

• Responsive Design: The form builder works on both mobile and desktop
• Equal Width Columns: When you drag an element next to another, they automatically resize to equal widths
• Maximum 4 Columns: Each row can have up to 4 columns, after which a new row is created
• Drag and Drop: Powered by dnd-kit for smooth drag and drop interactions

How to Use

1. Add Elements: Drag elements from the sidebar onto the canvas
2. Create Columns: Drag an element next to another to create equal-width columns
3. Reorder: Drag elements to reposition them within or between rows
4. Remove Elements: (You can extend this functionality by adding delete buttons)

The implementation uses a row-based layout system where each row contains elements with calculated widths based on a 12-column grid. When elements are added to a row, the widths are recalculated to ensure equal distribution.

You can extend this form builder by adding functionality to:

• Save form configurations
• Add form validation
• Add element configuration options
• Add a preview mode
• Export to HTML/React components