Tailwind CSS Contact & Feedback Forms Blocks

All Blocks
Application UI
Forms
Contact & Feedback Forms

Contact & Feedback Forms

Contact and feedback forms for comments, lead inquiries, and simple message requests across product, service, and support pages.

Comment Form Card Free

Centered comment card stacks name, email, textarea, and one full-width submit action.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <div class="mx-auto max-w-2xl">
    <div class="text-center">
      <h2 class="text-xl text-foreground font-bold sm:text-3xl">
        Post a comment
      </h2>
    </div>

<div class="mt-5 p-4 relative z-10 bg-card border border-card-line rounded-xl sm:mt-10 md:p-10">
      <form>
        <div class="mb-4 sm:mb-8">
          <label for="hs-feedback-post-comment-name-1" class="block mb-2 text-sm font-medium text-foreground">Full name</label>
          <input type="text" id="hs-feedback-post-comment-name-1" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Full name">
        </div>

<div class="mb-4 sm:mb-8">
          <label for="hs-feedback-post-comment-email-1" class="block mb-2 text-sm font-medium text-foreground">Email address</label>
          <input type="email" id="hs-feedback-post-comment-email-1" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Email address">
        </div>

<div>
          <label for="hs-feedback-post-comment-textarea-1" class="block mb-2 text-sm font-medium text-foreground">Comment</label>
          <div class="mt-1">
            <textarea id="hs-feedback-post-comment-textarea-1" name="hs-feedback-post-comment-textarea-1" rows="3" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Leave your comment here..."></textarea>
          </div>
        </div>

<div class="mt-6 grid">
          <button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">Submit</button>
        </div>
      </form>
    </div>
    
  </div>
</div>

Hire Us Hero Form Free

Split hero layout pairs intro content and trust cues with a multi-field inquiry form.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  
  <div class="grid md:grid-cols-2 items-center gap-12">
    <div>
      <h1 class="text-3xl font-bold text-foreground sm:text-4xl lg:text-5xl lg:leading-tight">
        Hire us
      </h1>
      <p class="mt-1 md:text-lg text-foreground">
        We help brands and platforms turn big ideas into beautiful digital products and experiences.
      </p>

<div class="mt-8">
        <h2 class="text-lg font-semibold text-foreground">
          What can I expect?
        </h2>

<ul class="mt-2 space-y-2">
          <li class="flex gap-x-3">
            <svg class="shrink-0 mt-0.5 size-5 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            <span class="text-muted-foreground-2">
              Industry-leading design
            </span>
          </li>

<li class="flex gap-x-3">
            <svg class="shrink-0 mt-0.5 size-5 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            <span class="text-muted-foreground-2">
              Developer community support
            </span>
          </li>

<li class="flex gap-x-3">
            <svg class="shrink-0 mt-0.5 size-5 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            <span class="text-muted-foreground-2">
              Simple and affordable
            </span>
          </li>
        </ul>
      </div>

<div class="mt-8">
        <h2 class="text-lg font-semibold text-foreground">
          Enjoyed by:
        </h2>

<div class="mt-10 flex items-center gap-x-5">
        
        <div class="flex -space-x-2">
          <img class="inline-block size-8 rounded-full ring-2 ring-layer" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
          <img class="inline-block size-8 rounded-full ring-2 ring-layer" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
          <img class="inline-block size-8 rounded-full ring-2 ring-layer" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
          <span class="inline-flex justify-center items-center size-8 rounded-full bg-primary text-primary-foreground ring-2 ring-layer">
            <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
            </svg>
          </span>
        </div>
        
        <span class="text-sm text-muted-foreground-1">
          Trusted by over 37k customer
        </span>
      </div>
    </div>

<form>
          <div class="mt-6 grid gap-4 lg:gap-6">
            
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
              <div>
                <label for="hs-firstname-hire-us-1" class="block mb-2 text-sm text-foreground font-medium">First Name</label>
                <input type="text" name="hs-firstname-hire-us-1" id="hs-firstname-hire-us-1" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
              </div>

<div>
              <label for="hs-work-email-hire-us-1" class="block mb-2 text-sm text-foreground font-medium">Work Email</label>
              <input type="email" name="hs-work-email-hire-us-1" id="hs-work-email-hire-us-1" autocomplete="email" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
            </div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
              <div>
                <label for="hs-company-hire-us-1" class="block mb-2 text-sm text-foreground font-medium">Company</label>
                <input type="text" name="hs-company-hire-us-1" id="hs-company-hire-us-1" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
              </div>

<div>
                <label for="hs-company-website-hire-us-1" class="block mb-2 text-sm text-foreground font-medium">Company Website</label>
                <input type="text" name="hs-company-website-hire-us-1" id="hs-company-website-hire-us-1" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
              </div>
            </div>

<div>
              <label for="hs-about-hire-us-1" class="block mb-2 text-sm text-foreground font-medium">Details</label>
              <textarea id="hs-about-hire-us-1" name="hs-about-hire-us-1" rows="4" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none"></textarea>
            </div>
          </div>
        </form>

<div class="mt-3 flex">
          <div class="flex">
            <input id="remember-me" name="remember-me" type="checkbox" class="mt-1.5 shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
          </div>
          <div class="ms-3">
            <label for="remember-me" class="text-sm text-muted-foreground-2">By submitting this form I have read and acknowledged the <a class="text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">Privacy policy</a></label>
          </div>
        </div>

<div class="mt-3 text-center">
          <p class="text-sm text-muted-foreground-1">
            We'll get back to you in 1-2 business days.
          </p>
        </div>
      </div>
      
    </div>
    
  </div>
  
</div>

Centered Contact Form Free

Centered inquiry form stacks paired name fields, company inputs, details, and one CTA.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <div class="max-w-xl mx-auto">
    <div class="text-center">
      <h1 class="text-3xl font-bold text-foreground sm:text-4xl">
        Ready to hire us?
      </h1>
      <p class="mt-1 text-muted-foreground-2">
        Tell us your story and we’ll be in touch.
      </p>
    </div>

<div class="mt-12">
      
      <form>
        <div class="grid gap-4 lg:gap-6">
          
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
            <div>
              <label for="hs-firstname-hire-us-2" class="block mb-2 text-sm text-foreground font-medium">First Name</label>
              <input type="text" name="hs-firstname-hire-us-2" id="hs-firstname-hire-us-2" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
            </div>

<div>
            <label for="hs-work-email-hire-us-2" class="block mb-2 text-sm text-foreground font-medium">Work Email</label>
            <input type="email" name="hs-work-email-hire-us-2" id="hs-work-email-hire-us-2" autocomplete="email" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
          </div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
            <div>
              <label for="hs-company-hire-us-2" class="block mb-2 text-sm text-foreground font-medium">Company</label>
              <input type="text" name="hs-company-hire-us-2" id="hs-company-hire-us-2" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
            </div>

<div>
              <label for="hs-company-website-hire-us-2" class="block mb-2 text-sm text-foreground font-medium">Company Website</label>
              <input type="text" name="hs-company-website-hire-us-2" id="hs-company-website-hire-us-2" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
            </div>
          </div>

<div>
            <label for="hs-about-hire-us-2" class="block mb-2 text-sm text-foreground font-medium">Details</label>
            <textarea id="hs-about-hire-us-2" name="hs-about-hire-us-2" rows="4" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none"></textarea>
          </div>
        </div>

<div class="mt-3 flex">
          <div class="flex">
            <input id="remember-me" name="remember-me" type="checkbox" class="mt-1 shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
          </div>
          <div class="ms-3">
            <label for="remember-me" class="text-sm text-muted-foreground-2">By submitting this form I have read and acknowledged the <a class="text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">Privact policy</a></label>
          </div>
        </div>

<div class="mt-3 text-center">
          <p class="text-sm text-muted-foreground-1">
            We'll get back to you in 1-2 business days.
          </p>
        </div>
      </form>
      
    </div>
  </div>
</div>