Form Builder

Visually build HTML forms with Tailwind CSS classes. Add fields, reorder them, and copy the generated code.

Form Fields

Add, remove, and reorder your form fields.

Full Name

Required

Email Address

Required

Message

Required

Generated HTML

<div class="space-y-2">
  <label for="fullName" class="text-sm font-medium leading-none">Full Name</label>
  <input type="text" id="fullName" name="fullName" placeholder="John Doe" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" required>
</div>

<div class="space-y-2">
  <label for="email" class="text-sm font-medium leading-none">Email Address</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" required>
</div>

<div class="space-y-2">
  <label for="message" class="text-sm font-medium leading-none">Message</label>
  <textarea id="message" name="message" placeholder="Your message here..." class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"></textarea>
</div>

Live Preview

This is how your form will look.