Skip to main content
See how to build a simple contact form using PipedForm, from a plain HTML form with no styling, to a form styled with Tailwind CSS. Copy the examples below and adjust them to fit your project.

​
Basic Example

A minimal contact form with no styling, using plain HTML. Replace {form_id} with your own form ID. 
<form action="https://pipedform.com/f/{form_id}" method="POST">
  <input name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>

  <button type="submit">Submit</button>
</form>

​
Contact Form with Tailwind CSS

The same form, styled using Tailwind CSS utility classes for a clean, modern look. 
<div class="min-h-screen text-neutral-900 w-full flex justify-center bg-neutral-100 items-center p-4">
  <div class="max-w-lg w-full space-y-6 border-neutral-200 bg-white rounded-2xl border p-4 py-10 sm:p-10">
    <div class="text-center space-y-1">
      <h2 class="text-3xl font-semibold">Contact Us</h2>
      <p class="text-neutral-600">
        Fill up the form below to send us a message.
      </p>
    </div>

    <form action="https://pipedform.com/f/{form_id}" method="POST" class="text-sm space-y-4">
      <div class="flex flex-col gap-1">
        <label for="name" class="font-medium">Name</label>
        <input name="name" id="name" required placeholder="John Doe" class="border px-3 h-9.5 border-neutral-300 rounded-lg outline-none focus:border-neutral-400 transition-all" />
      </div>
      <div class="flex flex-col gap-1">
        <label for="email" class="font-medium">Email</label>
        <input name="email" type="email" id="email" required placeholder="johndoe@example.com" class="border px-3 h-9.5 border-neutral-300 rounded-lg outline-none focus:border-neutral-400 transition-all" />
      </div>
        <div class="flex flex-col gap-1">
        <label for="message" class="font-medium">Message</label>
        <textarea name="message" id="message" required placeholder="Enter your message..." class="border px-3 py-2 border-neutral-300 rounded-lg outline-none focus:border-neutral-400 transition-all"></textarea>
      </div>
      <button type="submit" class="px-8 h-10 rounded-lg bg-neutral-900 hover:bg-neutral-800 transition-all cursor-pointer text-white font-medium">Send</button>
    </form>
  </div>
</div>