Get Lifetime Access to 12,400+ Components and UI Builder 👇
·
0days
0hours
0mins
0secs
·
🚀 Get it Now!

Tailwind Contact Form

Free

Tailwind contact form component built with Alpine.js

Tailwind Contact Form Image 1
Details About Tailwind Contact Form
Key points:
  • Open Source
  • JavaScript Plugin
  • Copy & Paste
  • Tailwind CSS v3.0+
  • Responsive Design

 Code Example

<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-gray-800">Contact Us</h2>
    <form x-data="{ name: '', email: '', message: '' }" class="space-y-4">
      <div>
        <label for="name" class="block text-gray-600 font-medium">Name</label>
        <input type="text" id="name" class="w-full mt-1 p-2 border border-gray-300 rounded focus:ring focus:ring-indigo-500" x-model="name" placeholder="Your Name" />
      </div>
      <div>
        <label for="email" class="block text-gray-600 font-medium">Email</label>
        <input type="email" id="email" class="w-full mt-1 p-2 border border-gray-300 rounded focus:ring focus:ring-indigo-500" x-model="email" placeholder="[email protected]" />
      </div>
      <div>
        <label for="message" class="block text-gray-600 font-medium">Message</label>
        <textarea id="message" class="w-full mt-1 p-2 border border-gray-300 rounded focus:ring focus:ring-indigo-500" x-model="message" placeholder="Your message..." rows="4"></textarea>
      </div>
      <div>
        <button type="button" @click.prevent="submitForm" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-500">
          Send Message
        </button>
      </div>
    </form>
  </div>
</div>

<script>
  function submitForm() {
    const formData = {
      name: this.name,
      email: this.email,
      message: this.message
    };
    console.log('Form Data:', formData);
    // Add your form submission logic here
  }

</script>

FAQ

How do I install Alpine.js into my project?

To install Alpine.js in your project, you can use a CDN by adding a script tag to your HTML file. Alternatively, you can install it via npm by running the appropriate command in your terminal and then importing it into your JavaScript file. Visit alpinejs.dev/essentials/installation for the official install gudie.

Featured Tailwind Components

Discover the most popular Tailwind CSS ui components and elements. Browse top-notch Tailwind components to enhance your development process.