Home
Mereani Waqa
Contact us form

Contact us form

suitable for collecting user input for various purposes such as feature requests, suggestions, or feedback.

This tailwind example is contributed by Mereani Waqa, on 15-Nov-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Author Mereani Waqa

5.9k

Fork Fullscreen

<div class="bg-white px-6 py-12 sm:py-24 lg:px-8">
  <div class="mx-auto max-w-xl flex flex-col items-center justify-center text-center">
    <h1 class="text-4xl md:text-5xl font-bold tracking-tight text-gray-900">Let's Talk</h1>
    <p class="mt-3 text-lg text-gray-600">Feature request? Suggestion? or maybe you'd like to be our critic! Here's a form just for that.</p>
  </div>
  <form class="mx-auto mt-16 max-w-xl sm:mt-20">
    <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
      <div>
        <label for="first-name" class="block text-sm font-semibold leading-6 text-gray-900">First name</label>
        <div class="mt-2.5">
          <input required="" type="text" name="first-name" id="first-name" autocomplete="given-name" placeholder="Your First Name" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
        </div>
      </div>
      <div>
        <label for="last-name" class="block text-sm font-semibold leading-6 text-gray-900">Last name</label>
        <div class="mt-2.5">
          <input required="" type="text" name="last-name" id="last-name" autocomplete="family-name" placeholder="Your Last Name" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
        </div>
      </div>
      <div class="sm:col-span-2">
        <label for="company" class="block text-sm font-semibold leading-6 text-gray-900">Company</label>
        <div class="mt-2.5">
          <input required="" type="text" name="company" id="company" autocomplete="organization" placeholder="Your Company Name" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
        </div>
      </div>
      <div class="sm:col-span-2">
        <label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email</label>
        <div class="mt-2.5">
          <input required="" type="email" name="email" id="email" autocomplete="email" placeholder="Your Email Address" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
        </div>
      </div>
      <div class="sm:col-span-2">
        <label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
        <div class="mt-2.5">
          <input required="" type="tel" name="phone" id="phone" autocomplete="tel" placeholder="Your Phone Number" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
        </div>
      </div>
      <div class="sm:col-span-2">
        <label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message</label>
        <div class="mt-2.5">
          <textarea name="message" id="message" rows="4" placeholder="Share your thoughts..." class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"></textarea>
        </div>
      </div>
    </div>
    <div class="mt-10">
      <button type="submit" class="bg-blue-600 text-white rounded-sm py-2 w-full block">Submit →</button>
    </div>
  </form>
</div>

Related Examples

Get in touch contact form

Author:
Kris Showen

2 years ago

41.4k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.4k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

10 months ago

1.4k
Simple contact us form

Author:
Lukas Müller

3 years ago

12k
Get in touch tailwind contact form
Get in touch tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.3k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

2 years ago

6.4k
Inquiry / Contact form

Author:
isolde

2 years ago

7.6k
Contact section - Htmlwind
Simple grid contact section

Author:
Htmlwind

8 months ago

1k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

10 months ago

1.2k
Get in touch contact form fabform.io
Tailwind contact form that uses fabform.io to save form submissions

Author:
Ho O

1 year ago

1.5k
Tailwind CSS Contact Form
A clean contact form with a supporting image, built using Tailwind CSS by ReadymadeUI. Browse more free UI components and templates at readymadeui.com.

Author:
ReadyMadeUI

2 months ago

141

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components