Drag-and-Drop Form Builder: Custom Development

Typical pain: a manager asks to add a "Convenient time for a call" field to the feedback form. The developer edits the template, updates validation, tests on staging — 4 hours gone. Such changes happen weekly, distracting from core development. As a result, the company loses up to 16 hours per month just on form modifications. In a typical project with a dozen forms, such changes turn into an endless cycle of approvals and deploys.

A ready-made drag-and-drop form builder eliminates this problem at the architecture level. We developed a solution that allows non-technical employees to create and modify forms through an intuitive interface. The builder consists of three independent components: Builder (React editor), Renderer (display component), and Backend (API for storing schemas and responses). The form schema is a JSON schema that the renderer interprets. This gives full flexibility without code changes when adding a new field type. Below is an example of such a schema.

{
  "id": "uuid-v4",
  "title": "Callback Request",
  "description": "We'll call you back within 30 minutes",
  "settings": {
    "submit_label": "Submit Request",
    "success_message": "Thank you! We'll contact you.",
    "redirect_url": null,
    "notify_emails": ["[email protected]"],
    "allow_multiple_submissions": false
  },
  "fields": [
    {
      "id": "field_1",
      "type": "text",
      "label": "Name",
      "placeholder": "Enter your name",
      "required": true,
      "validation": { "min_length": 2, "max_length": 100 }
    },
    {
      "id": "field_2",
      "type": "phone",
      "label": "Phone",
      "required": true,
      "validation": { "pattern": "^\\+?[\\d\\s\\-\\(\\)]{7,20}$" }
    },
    {
      "id": "field_3",
      "type": "select",
      "label": "Preferred call time",
      "required": false,
      "options": [
        { "value": "morning", "label": "9:00 – 12:00" },
        { "value": "afternoon", "label": "12:00 – 17:00" },
        { "value": "evening", "label": "17:00 – 20:00" }
      ]
    },
    {
      "id": "field_4",
      "type": "conditional_group",
      "condition": { "field": "field_3", "operator": "equals", "value": "evening" },
      "fields": [
        {
          "id": "field_4_1",
          "type": "checkbox",
          "label": "I confirm that a call after 17:00 is convenient for me",
          "required": true
        }
      ]
    }
  ]
}

Why JSON Schema?

JSON schema is the single source of truth for all components. The Builder generates it, the Renderer reads and renders it, and the Backend validates and stores responses. This architecture allows adding new field types without changing frontend or backend code — just extend the schema. This is a key difference from custom solutions where each field is hardcoded into a template.

What We Solve

• Manual coding of each form — takes up to 4 hours per change. Our builder reduces this to 30 minutes — that's 87% faster than the old way. For a team making 4 changes per month, this saves 14 hours of developer time, equivalent to $700/month at $50/hour.
• Complexity of maintaining custom fields — adding a new type requires code changes at all levels. JSON schema allows adding fields without developer involvement, cutting deployment time from 2 days to 30 minutes.
• Lack of analytics — without a builder, it's hard to track conversion. We embed a dashboard with response distribution, conversion rates, and abandoned sessions. Clients report a 25% increase in form completion rates after implementing analytics.

Supported Field Types

Which Library to Choose for Drag-and-Drop?

For implementing drag-and-drop in the editor, we use the @dnd-kit library. It is more modern than react-beautiful-dnd: it supports more complex scenarios — for example, dragging between containers, sorting with animation, and touch screen support. It is also lighter and faster.

import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';

function FormBuilder({ schema, onChange }: BuilderProps) {
  const [fields, setFields] = useState(schema.fields);

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (active.id !== over?.id) {
      setFields((items) => {
        const oldIndex = items.findIndex((i) => i.id === active.id);
        const newIndex = items.findIndex((i) => i.id === over!.id);
        const reordered = arrayMove(items, oldIndex, newIndex);
        onChange({ ...schema, fields: reordered });
        return reordered;
      });
    }
  }

  return (
    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <SortableContext items={fields.map(f => f.id)} strategy={verticalListSortingStrategy}>
        {fields.map(field => (
          <SortableFieldCard
            key={field.id}
            field={field}
            onEdit={(updated) => updateField(field.id, updated)}
            onDelete={() => removeField(field.id)}
          />
        ))}
      </SortableContext>
    </DndContext>
  );
}

Rendering and Validation

The renderer works with the same JSON schema. For validation, we use React Hook Form — a library that minimizes re-renders and simplifies validation rules.

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

function FormRenderer({ schema, onSubmit }: RendererProps) {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {schema.fields.map(field => (
        <FormField
          key={field.id}
          field={field}
          register={register}
          errors={errors}
          watch={watch}
        />
      ))}
      <button type="submit">{schema.settings.submit_label}</button>
    </form>
  );
}

function FormField({ field, register, errors, watch }) {
  // Conditional logic: show field only if condition is met
  if (field.condition) {
    const watchValue = watch(field.condition.field);
    const conditionMet = evaluateCondition(watchValue, field.condition);
    if (!conditionMet) return null;
  }

  const rules = buildValidationRules(field);

  switch (field.type) {
    case 'text':
    case 'email':
    case 'phone':
      return (
        <div>
          <label>{field.label}{field.required && ' *'}</label>
          <input {...register(field.id, rules)} placeholder={field.placeholder} />
          {errors[field.id] && <span>{errors[field.id].message}</span>}
        </div>
      );
    case 'select':
      return (
        <div>
          <label>{field.label}</label>
          <select {...register(field.id, rules)}>
            <option value="">Select...</option>
            {field.options.map(opt => (
              <option key={opt.value} value={opt.value}>{opt.label}</option>
            ))}
          </select>
        </div>
      );
    // ... other types
  }
}

How to Store Data and Analyze Responses?

Storage of schemas and responses is organized on PostgreSQL. The form schema is JSONB, responses are also JSONB with a GIN index for fast searching.

CREATE TABLE forms (
    id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    title       VARCHAR(255) NOT NULL,
    slug        VARCHAR(100) UNIQUE,
    schema      JSONB NOT NULL,
    is_active   BOOLEAN DEFAULT TRUE,
    created_by  INTEGER,
    created_at  TIMESTAMP DEFAULT NOW(),
    updated_at  TIMESTAMP DEFAULT NOW()
);

CREATE TABLE form_submissions (
    id          BIGSERIAL PRIMARY KEY,
    form_id     UUID REFERENCES forms(id),
    data        JSONB NOT NULL,
    metadata    JSONB DEFAULT '{}',
    submitted_at TIMESTAMP DEFAULT NOW()
);

CREATE INDEX idx_submissions_form ON form_submissions (form_id, submitted_at DESC);
CREATE INDEX idx_submissions_data ON form_submissions USING gin(data);
-- Analytics: response distribution for a field
SELECT
    data->>'field_3' AS answer,
    COUNT(*) AS count,
    ROUND(COUNT(*) * 100.0 / SUM(COUNT(*)) OVER (), 1) AS percent
FROM form_submissions
WHERE form_id = $1
  AND data ? 'field_3'
GROUP BY data->>'field_3'
ORDER BY count DESC;

Submission processing is done through a single API endpoint:

// POST /api/forms/{slug}/submit
async function submitForm(req: Request, res: Response) {
  const form = await getFormBySlug(req.params.slug);
  if (!form || !form.is_active) return res.status(404).json({ error: 'Form not found' });

  const schema = form.schema;
  const errors = validateSubmission(schema.fields, req.body);
  if (Object.keys(errors).length) {
    return res.status(422).json({ errors });
  }

  const submission = await saveSubmission(form.id, req.body, {
    ip: req.ip,
    user_agent: req.headers['user-agent'],
    referer: req.headers.referer,
  });

  // Notifications
  if (schema.settings.notify_emails?.length) {
    await sendNotificationEmail(form, submission);
  }
  if (schema.settings.webhook_url) {
    await triggerWebhook(schema.settings.webhook_url, submission);
  }

  return res.json({
    success: true,
    message: schema.settings.success_message,
    redirect: schema.settings.redirect_url,
  });
}

Common Implementation Mistakes

• N+1 queries when loading the form list — we solve this with eager loading or caching.
• Server-side hydration issues — forms with conditions may render incorrectly with SSR. We use Suspense and gradual loading.
• Complexity of custom field validation — JSON schema with rules simplifies maintenance.
• Lack of protection against duplicate submissions — we implement CSRF tokens and unique keys.

Work Process

1. Analysis — study requirements, form types, integrations.
2. Design — develop JSON schema and interface prototype.
3. Implementation — write Builder, Renderer, Backend, connect analytics.
4. Testing — verify correctness of rendering, validation, submissions.
5. Deployment — deploy to server, set up monitoring.

Implementation Timeline

What's Included

• Ready React editor component with field palette
• API for storing schemas and responses
• Analytics page with charts and export
• Integration with email (notifications) and webhooks
• API and setup documentation
• Administrator training (1–2 hours)
• 12-month warranty on the developed solution

With over 5 years of experience and 50+ delivered projects, we have honed our form builder solution to deliver maximum efficiency. Unlike a custom solution where each change requires 4 hours of developer work, our builder allows changing a form in 30 minutes through the interface — saving up to 95% of time and reducing costs by 87% ($3,000+ saved per year on average). We'll assess your project in 1 hour: contact us to discuss details and get a commercial proposal. Order a turnkey form builder development today.

Backend Development Services: Laravel, Node.js, Go, Django, PostgreSQL

On a production server at 3:14 AM, the Laravel Jobs queue stopped processing. 40,000 unprocessed jobs in Redis. Cause: worker crashed due to a memory leak in one of the Jobs (leak via a static variable in an Eloquent observer), supervisor didn't restart it because of misconfigured stopwaitsecs. This is not a hypothetical scenario — it's Tuesday. We analyzed such an incident on a project with 500 RPS load: diagnosis took 4 hours, fix — 20 minutes. So you don't lose money on downtime, we offer backend development services with a focus on production-grade reliability. We'll assess your project in 2 days.

Backend is what works when no one is watching. Or doesn't work. We guarantee you'll have the first option.

How do we ensure production-grade reliability from day one?

What we do correctly from day one

Service Layer over Fat Controllers. Controller receives HTTP request, validates it via Form Request, passes data to Service, returns response. Business logic in Service, not Controller. This sounds trivial, but most legacy projects have controllers with 500 lines and SQL queries inside.

Repository Pattern we use cautiously. If you just wrap Model::where(...) in a repository method — that's boilerplate without benefit. Repository is justified when: you need to abstract from the data source (DB + cache + external API) or when query logic is complex enough to isolate.

Jobs, Events, Listeners. Everything that can be async — make async. Sending email, PDF generation, external API sync, aggregate recalculation — into Queue. Laravel Horizon for queue monitoring in Redis: see throughput, failed jobs, processing time per queue.

How Octane handles high load

Laravel Octane with RoadRunner or Swoole keeps the app in memory between requests — removes bootstrap overhead (config loading, class autoloading) on each HTTP request. Gain: 3–8x on synthetic benchmarks, 2–4x on real applications. Important: no state between requests in static variables — that leads to exactly the incidents from the beginning. We use this in projects with >1000 RPS.

What to do about N+1 queries

N+1 is the most common cause of slow pages in Laravel apps. Standard story: page worked fine on dev with 10 records, on production with 10,000 — 8-second load.

Laravel Debugbar in dev environment shows the number of queries per page. More than 20 queries per page — signal for audit.

Model::preventLazyLoading(! app()->isProduction());

Telescope for profiling in staging: logs all queries, jobs, mail, notifications with time detail. Numbers: after implementing eager loading, page load time drops from 8s to 0.3s — 27 times faster.

PostgreSQL: indexes that are actually needed

PostgreSQL 14+ is the primary DB on all projects. We use PgBouncer + PostgreSQL combination. 10+ years experience, more than 50 backend projects, 5 years on the market.

How PostgreSQL helps avoid slow queries

Composite indexes for frequent WHERE + ORDER BY. If you have WHERE user_id = ? AND status = ? ORDER BY created_at DESC — you need (user_id, status, created_at DESC). A separate index on (user_id) doesn't help much with sorting.

Partial indexes. If 95% of queries go with WHERE status = 'active':

CREATE INDEX idx_orders_active ON orders (created_at DESC)
WHERE status = 'active';

The index is small, fast, covers the main load.

GIN indexes for JSONB and arrays. @> operator without GIN index — seq scan. With index — fast even on millions of rows.

GIN for full-text search. to_tsvector + GIN instead of LIKE '%query%'. LIKE without index is always seq scan. With pg_trgm extension and gin_trgm_ops — supports LIKE with index, useful for CRM search by partial match.

Connection pooling: why it's more important than it seems

Rails, Laravel, Django open a new connection to PostgreSQL for each PHP/Python process. With 100 workers — 100 connections. PostgreSQL starts degrading from 200–300 active connections — overhead on connection management becomes significant.

PgBouncer — connection pooler in front of PostgreSQL. Transaction pooling mode: connection to PostgreSQL is occupied only during a transaction, returned to pool between requests. 1000 application workers → 20–50 actual connections to PostgreSQL. This reduces latency by 40% and hosting costs by 30%.

Node.js with Fastify: when it's better than Laravel

Node.js is justified for:

• Realtime: WebSocket servers, Server-Sent Events, chat, live updates
• Streaming: large files, video, streaming data
• High I/O concurrency: many parallel requests to external APIs without heavy business logic
• Serverless: Lambda/Cloud Functions — Node.js starts faster than PHP

Fastify over Express: 2–3 times faster on benchmarks, built-in JSON Schema validation, better TypeScript support, plugin architecture.

Typical realtime architecture: Laravel — core business logic and REST API. Node.js + Socket.io or ws — WebSocket server. Laravel publishes events to Redis Pub/Sub, Node.js subscribes and broadcasts to clients. This separation allows scaling the WebSocket server independently of the main app.

Go: microservices and high load

Go we use for:

• High-load microservices (>10,000 RPS)
• Background workers with strict latency requirements
• DevOps tools and CLI
• gRPC services in microservice architecture

Goroutines — thousands of times cheaper than OS threads. 10,000 concurrent connections on Go is normal on one server.

But Go is not a silver bullet. Development is slower than Laravel: more boilerplate, no ORM at Eloquent level, error handling with if err != nil everywhere. Justified only when performance is a real requirement, not an assumption.

Django and Python backend

Django with DRF (Django REST Framework) — for tasks where Python is needed: ML pipelines, data processing, integrations with AI tools.

Celery for background tasks — similar to Laravel Queue but more complex to configure. Celery Beat for cron tasks.

Django ORM vs raw SQL: ORM is convenient for CRUD. For analytical queries with multiple JOINs, window functions, and CTEs — connection.execute() with raw SQL is more readable and predictable.

Redis: not just cache

Redis in our projects plays multiple roles:

Redis Cluster for horizontal scaling. Sentinel for automatic failover on standalone setups.

Deployment and infrastructure

Docker + docker-compose — standard for local development and production. Each service in a container: PHP-FPM/Octane, Nginx, PostgreSQL, Redis, Queue Worker, Scheduler.

CI/CD via GitHub Actions:

1. Run tests (PHPUnit / Pest, Vitest, Playwright)
2. Build Docker image
3. Push to Container Registry
4. Deploy: docker pull → docker-compose up -d on server, or Kubernetes rolling update

Zero-downtime deploy for Laravel: php artisan down --secret=TOKEN is not needed with proper configuration. Strategy: new container starts next to the old one, Nginx switches traffic after health check, old container stops.

Monitoring: Sentry for exception tracking with alerting in Slack/Telegram. Grafana + Prometheus (or Grafana Cloud) for metrics: CPU, memory, request rate, queue depth, database connection count. Alerts on: error rate > 1%, p99 latency > 2s, queue depth > 1000 jobs.

What's included in turnkey work

• Architecture design (API documentation, DB schema, service diagram)
• Implementation according to agreed specification with code review
• CI/CD, monitoring, alerting setup
• Load testing (k6, wrk) with report
• Handover of source code, access, deployment instructions
• Training of customer's team (2-3 sessions)
• Warranty support for 1 month after delivery

Timeline benchmarks

Pricing is calculated individually after analyzing load, integrations, and business logic. Contact us for a free audit of your current backend — get an optimization plan in 2 days. Request a consultation.