Back to Discover

Tailwind CSS Contact Form Responsive

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

     <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
        <div class="w-full max-w-2xl" x-data="contactForm()">
            <div class="bg-white rounded-lg shadow-lg p-6 md:p-10">
                <div class="text-center mb-8">
                    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Get in Touch</h1>
                    <p class="text-gray-600">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
                </div>

                <form @submit.prevent="submitForm" class="space-y-6">
                    <!-- Name Field -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                            <ion-icon name="person-outline" class="align-middle mr-1"></ion-icon>
                            Full Name
                        </label>
                        <input 
                            type="text" 
                            id="name" 
                            x-model="formData.name"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                            placeholder="John Doe"
                            required
                        >
                    </div>

                    <!-- Email Field -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            <ion-icon name="mail-outline" class="align-middle mr-1"></ion-icon>
                            Email Address
                        </label>
                        <input 
                            type="email" 
                            id="email" 
                            x-model="formData.email"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                            placeholder="john@example.com"
                            required
                        >
                    </div>

                    <!-- Phone Field -->
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                            <ion-icon name="call-outline" class="align-middle mr-1"></ion-icon>
                            Phone Number
                        </label>
                        <input 
                            type="tel" 
                            id="phone" 
                            x-model="formData.phone"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                            placeholder="+1 (555) 000-0000"
                        >
                    </div>

                    <!-- Subject Field -->
                    <div>
                        <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">
                            <ion-icon name="chatbox-outline" class="align-middle mr-1"></ion-icon>
                            Subject
                        </label>
                        <input 
                            type="text" 
                            id="subject" 
                            x-model="formData.subject"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                            placeholder="How can we help?"
                            required
                        >
                    </div>

                    <!-- Message Field -->
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700 mb-2">
                            <ion-icon name="document-text-outline" class="align-middle mr-1"></ion-icon>
                            Message
                        </label>
                        <textarea 
                            id="message" 
                            x-model="formData.message"
                            rows="5"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition resize-none"
                            placeholder="Tell us more about your inquiry..."
                            required
                        ></textarea>
                    </div>

                    <!-- Submit Button -->
                    <button 
                        type="submit" 
                        class="w-full bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 transition flex items-center justify-center gap-2"
                        :disabled="loading"
                    >
                        <ion-icon :name="loading ? 'hourglass-outline' : 'send-outline'" class="text-xl"></ion-icon>
                        <span x-text="loading ? 'Sending...' : 'Send Message'"></span>
                    </button>
                </form>

                <!-- Success Message -->
                <div 
                    x-show="success" 
                    x-transition
                    class="mt-6 bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center gap-2"
                >
                    <ion-icon name="checkmark-circle" class="text-2xl"></ion-icon>
                    <span>Thank you! Your message has been sent successfully.</span>
                </div>
            </div>

            <!-- Contact Info -->
            <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-white rounded-lg shadow p-4 text-center">
                    <ion-icon name="location-outline" class="text-3xl text-blue-600 mb-2"></ion-icon>
                    <p class="text-sm text-gray-600">123 Business St, City</p>
                </div>
                <div class="bg-white rounded-lg shadow p-4 text-center">
                    <ion-icon name="call-outline" class="text-3xl text-blue-600 mb-2"></ion-icon>
                    <p class="text-sm text-gray-600">+1 (555) 123-4567</p>
                </div>
                <div class="bg-white rounded-lg shadow p-4 text-center">
                    <ion-icon name="mail-outline" class="text-3xl text-blue-600 mb-2"></ion-icon>
                    <p class="text-sm text-gray-600">hello@company.com</p>
                </div>
            </div>
        </div>

  function contactForm() {
            return {
                formData: {
                    name: '',
                    email: '',
                    phone: '',
                    subject: '',
                    message: ''
                },
                loading: false,
                success: false,
                
                submitForm() {
                    this.loading = true;
                    this.success = false;
                    
                    // Simulate form submission
                    setTimeout(() => {
                        console.log('Form submitted:', this.formData);
                        this.loading = false;
                        this.success = true;
                        
                        // Reset form
                        this.formData = {
                            name: '',
                            email: '',
                            phone: '',
                            subject: '',
                            message: ''
                        };
                        
                        // Hide success message after 5 seconds
                        setTimeout(() => {
                            this.success = false;
                        }, 5000);
                    }, 1500);
                }
            }
        }

Comments (0)

No comments yet. Be the first!