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

4.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

1 year ago

38k
contact-form
tailwind contact form

Author:
Geoffrey Callaghan

9 months ago

1.6k
contact form
contact form

Author:
Geoffrey Callaghan

1 year ago

5.8k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

1 month ago

189
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

11k
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

6 hours ago

7
Contact us form template with fabform

Author:
Ho O

2 months ago

452
Responsive Contact Form with TailwindCSS
A sleek and fully responsive contact form built with TailwindCSS. This form includes input fields for name, email, subject, and message, along with a stylish submit button. The design features a decorative background, smooth focus effects, and optimized mobile responsiveness.

Author:
SHARIFUL ISLAM

1 month ago

304
Responsive contact us section
responsive contact section

Author:
Geoffrey Callaghan

1 year ago

6.2k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

9 months ago

2.3k
Contact page

Author:
Mahir

1 year ago

16.5k
tailwind contact form
Nice looking tailwind contact form

Author:
Geoffrey Callaghan

9 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components