Build Forms Visually and Export Production-Ready Code

Why a visual form builder?

Writing form HTML is tedious. Not hard — just repetitive. Labels, inputs, validation attributes, placeholders, accessible markup. For a 10-field form, that's easily 100 lines of boilerplate.

InputHaven's form builder lets you configure fields visually and export production-ready code in HTML, React, or Next.js.

How it works

1. Add fields

In the form builder (Dashboard → Forms → [Form] → Builder), click "Add Field" and choose from:

• Text — single-line text input
• Email — email input with validation
• Textarea — multi-line text
• Select — dropdown menu
• Checkbox — single checkbox (yes/no)
• Radio — radio button group
• Hidden — invisible field with a preset value

2. Configure each field

For each field, you can set:

• Name — the field's name attribute (used as the key in submission data)
• Label — human-readable label displayed to users
• Placeholder — hint text inside the input
• Required — whether the field must be filled in
• Options — for select and radio fields, the list of choices
• Default value — for hidden fields

3. Reorder fields

Use the up/down arrows to reorder fields. The order in the builder matches the order in the generated code.

4. Export code

Switch between three output formats:

HTML — standard <form> with action and method:

<form action="https://inputhaven.com/api/v1/submit" method="POST">
  <input type="hidden" name="_form_id" value="your-form-id" />
  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Jane Doe" required />
  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="jane@example.com" required />
  <button type="submit">Submit</button>
</form>

React — functional component with fetch:

import { useState } from "react";

export function ContactForm() {
  const [status, setStatus] = useState("idle");

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    const res = await fetch("https://inputhaven.com/api/v1/submit", {
      method: "POST",
      body: new FormData(e.target),
      headers: { Accept: "application/json" },
    });
    setStatus(res.ok ? "success" : "error");
  }

  // ... rendered form with all configured fields
}

Next.js — client component with TypeScript and full state management:

"use client";
import { useState, type FormEvent } from "react";

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
  // ... TypeScript component with error handling
}

5. Copy and paste

Click the copy button next to any code output. Paste it into your project. Done.

Features included automatically

The generated code includes:

• Your form ID — pre-filled with the correct value
• Honeypot field — if you've configured a honeypot field name
• All validation — required attributes, input types, placeholders
• Accessible markup — labels linked to inputs with for/id

Saving your configuration

Click "Save" to persist your builder configuration. When you come back later, all your fields and settings are preserved. This is especially useful if you need to tweak a field and re-export the code.

Tips

• Start simple — you can always add more fields later
• Use meaningful names — field names like "name", "email", "company" are clearer than "field1", "field2"
• Test the output — paste the generated code into your project and submit a test form
• Iterate — the builder is for prototyping. Once exported, you can customize the code further

Limitations

The builder generates clean, standard code. It does not include:

• Styling — you'll apply your own CSS or component library styles
• Multi-step forms — the builder generates single-page forms
• Conditional logic — all fields are always visible (use JavaScript for show/hide logic)

For complex forms with custom styling and conditional logic, use the builder to generate the skeleton and customize from there.