Tailwind Contact Form

 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.