Tailwind CSS Contact Forms
These contact forms are built with Tailwind CSS, offering clean and responsive designs that integrate seamlessly into any project. Each form combines utility-first styling with thoughtful UI components to create professional, user-friendly interfaces.
Unlike traditional CSS frameworks, these Tailwind forms allow for quick customization without fighting against opinionated styles. You can easily adjust colors, spacing, and layout to match your brand while maintaining a polished look.
Contact Form with Social Links
<!-- Form with Social Links Container -->
<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow">
<h3 class="text-2xl font-semibold mb-6 text-gray-800 text-center">Contact Us</h3>
<form action="#" method="POST" class="space-y-4">
<div>
<label for="social-name" class="sr-only">Name</label>
<input type="text" name="social-name" id="social-name" required placeholder="Your Name" class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 sm:text-sm">
</div>
<div>
<label for="social-email" class="sr-only">Email</label>
<input type="email" name="social-email" id="social-email" required placeholder="Your Email" class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 sm:text-sm">
</div>
<div>
<label for="social-message" class="sr-only">Message</label>
<textarea name="social-message" id="social-message" rows="4" required placeholder="Your Message" class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 sm:text-sm"></textarea>
</div>
<div>
<button type="submit" class="w-full inline-flex justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
Send
</button>
</div>
</form>
<!-- Social Links Section -->
<div class="mt-8 pt-6 border-t border-gray-200 text-center">
<p class="text-sm text-gray-600 mb-4">Or connect with us on social media:</p>
<div class="flex justify-center space-x-6">
<!-- Replace # with your actual social media links -->
<!-- Facebook Icon -->
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Facebook</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<!-- Twitter Icon -->
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<!-- Instagram Icon -->
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.013-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.023.047 1.351.058 3.807.058h.468c2.456 0 2.784-.011 3.807-.058.975-.045 1.504-.207 1.857-.344.467-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.047-1.023.058-1.351.058-3.807v-.468c0-2.456-.011-2.784-.058-3.807-.045-.975-.207-1.504-.344-1.857a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 11-2.4 0 1.2 1.2 0 012.4 0z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
Contact Form with File Upload
Submit Your Request
<!-- Form with File Upload Container -->
<div class="max-w-xl mx-auto bg-white p-8 rounded-lg shadow">
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Submit Your Request</h3>
<!-- Ensure the form tag includes enctype="multipart/form-data" for file uploads -->
<form action="#" method="POST" enctype="multipart/form-data" class="space-y-5">
<div>
<label for="upload-name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" name="upload-name" id="upload-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<div>
<label for="upload-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" name="upload-email" id="upload-email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<div>
<label for="upload-message" class="block text-sm font-medium text-gray-700 mb-1">Details</label>
<textarea name="upload-message" id="upload-message" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm"></textarea>
</div>
<div>
<label for="upload-file" class="block text-sm font-medium text-gray-700 mb-1">Attach File (Optional)</label>
<!-- Basic file input styling using Tailwind's 'file:' modifier -->
<input type="file" name="upload-file" id="upload-file" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-purple-100 file:text-purple-700 hover:file:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
<p class="mt-1 text-xs text-gray-500">PNG, JPG, PDF up to 5MB</p>
</div>
<div>
<button type="submit" class="w-full inline-flex justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
Submit Request
</button>
</div>
</form>
</div>
Contact Form with CAPTCHA Placeholder
Secure Contact Form
<!-- Form with CAPTCHA Container -->
<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow">
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Secure Contact Form</h3>
<form action="#" method="POST" class="space-y-5">
<div>
<label for="captcha-name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" name="captcha-name" id="captcha-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="captcha-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" name="captcha-email" id="captcha-email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="captcha-message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea name="captcha-message" id="captcha-message" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
</div>
<div>
<!-- CAPTCHA Placeholder Section -->
<label class="block text-sm font-medium text-gray-700 mb-2">Security Check</label>
<!--
IMPORTANT: This is just a visual placeholder.
You need to integrate a real CAPTCHA service here (like Google reCAPTCHA).
Replace the placeholder div with the actual CAPTCHA widget code provided by the service.
Example for Google reCAPTCHA v2 Checkbox:
1. Include the reCAPTCHA API script in your HTML head (usually before the closing </head> tag):
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
2. Place the reCAPTCHA widget div here:
<div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>
Remember to replace YOUR_RECAPTCHA_SITE_KEY with your actual site key.
You will also need server-side validation to verify the CAPTCHA response.
-->
<div class="bg-gray-100 border border-gray-300 rounded-md p-4 h-[78px] flex items-center justify-center">
<span class="text-sm text-gray-500 italic">(CAPTCHA widget integration required)</span>
</div>
<!-- Optional: Add links to privacy policy and terms for services like reCAPTCHA -->
<p class="mt-1 text-xs text-gray-500">This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline">Terms of Service</a> apply.</p>
</div>
<div>
<button type="submit" class="w-full inline-flex justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Submit Securely
</button>
</div>
</form>
</div>
Minimal/Compact Contact Form
Quick Message
<!-- Minimal/Compact Form Container -->
<div class="w-full max-w-sm bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-medium mb-4 text-gray-700">Quick Message</h3>
<form action="#" method="POST" class="space-y-3">
<div>
<!-- Using sr-only for labels to keep it minimal but accessible -->
<label for="compact-email" class="sr-only">Email</label>
<input type="email" name="compact-email" id="compact-email" required placeholder="Your Email Address" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500 sm:text-sm">
</div>
<div>
<label for="compact-message" class="sr-only">Message</label>
<textarea name="compact-message" id="compact-message" rows="3" required placeholder="Your message..." class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500 sm:text-sm"></textarea>
</div>
<div>
<button type="submit" class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
Send
</button>
</div>
</form>
</div>
Contact Form with Address & Phone Details
Contact Information
Fill out the form and our team will get back to you within 24 hours. Or reach us directly:
Our Office
123 Tailwind Lane
Suite 500
Webville, CA 94107
Phone
+1 (555) 123-4567
Email
hello@example.com
Send us a Message
<!-- Form with Address/Phone Details Container -->
<div class="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow">
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Contact Information Column -->
<div>
<h3 class="text-2xl font-semibold mb-4 text-gray-800">Contact Information</h3>
<p class="text-gray-600 mb-6">Fill out the form and our team will get back to you within 24 hours. Or reach us directly:</p>
<div class="space-y-4">
<!-- Address -->
<div class="flex items-start space-x-3">
<!-- Location Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<div>
<h4 class="font-medium text-gray-700">Our Office</h4>
<!-- Replace with your actual address -->
<p class="text-gray-600">123 Tailwind Lane<br>Suite 500<br>Webville, CA 94107</p>
</div>
</div>
<!-- Phone -->
<div class="flex items-start space-x-3">
<!-- Phone Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<div>
<h4 class="font-medium text-gray-700">Phone</h4>
<!-- Replace with your actual phone number -->
<a href="tel:+15551234567" class="text-blue-600 hover:text-blue-800">+1 (555) 123-4567</a>
</div>
</div>
<!-- Email -->
<div class="flex items-start space-x-3">
<!-- Mail Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<div>
<h4 class="font-medium text-gray-700">Email</h4>
<!-- Replace with your actual email address -->
<a href="mailto:hello@example.com" class="text-blue-600 hover:text-blue-800">hello@example.com</a>
</div>
</div>
</div>
</div>
<!-- Form Column -->
<div>
<h3 class="text-2xl font-semibold mb-4 text-gray-800">Send us a Message</h3>
<form action="#" method="POST" class="space-y-4">
<div>
<label for="details-name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" name="details-name" id="details-name" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="details-email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="details-email" id="details-email" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="details-phone" class="block text-sm font-medium text-gray-700">Phone (Optional)</label>
<input type="tel" name="details-phone" id="details-phone" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="details-message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea name="details-message" id="details-message" rows="5" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
</div>
<div class="text-right">
<button type="submit" class="inline-flex justify-center py-2 px-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
Basic Contact Form
Get in Touch
<!-- Basic Contact Form Container -->
<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow">
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Get in Touch</h3>
<form action="#" method="POST" class="space-y-4">
<div>
<label for="basic-name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" name="basic-name" id="basic-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="basic-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" name="basic-email" id="basic-email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="basic-message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea name="basic-message" id="basic-message" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
</div>
<div>
<button type="submit" class="w-full inline-flex justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Send Message
</button>
</div>
</form>
</div>
Full Contact Form
Detailed Contact Form
<!-- Full Contact Form Container -->
<div class="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow">
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Detailed Contact Form</h3>
<form action="#" method="POST" class="space-y-6">
<div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
<div>
<label for="full-first-name" class="block text-sm font-medium text-gray-700">First Name</label>
<input type="text" name="full-first-name" id="full-first-name" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm">
</div>
<div>
<label for="full-last-name" class="block text-sm font-medium text-gray-700">Last Name</label>
<input type="text" name="full-last-name" id="full-last-name" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm">
</div>
</div>
<div>
<label for="full-email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input type="email" name="full-email" id="full-email" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm">
</div>
<div>
<label for="full-phone" class="block text-sm font-medium text-gray-700">Phone Number (Optional)</label>
<input type="tel" name="full-phone" id="full-phone" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm">
</div>
<div>
<label for="full-subject" class="block text-sm font-medium text-gray-700">Subject</label>
<input type="text" name="full-subject" id="full-subject" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm">
</div>
<div>
<label for="full-message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea name="full-message" id="full-message" rows="5" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm"></textarea>
</div>
<div class="flex items-center">
<input id="full-agree" name="full-agree" type="checkbox" required class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
<label for="full-agree" class="ml-2 block text-sm text-gray-900">I agree to the <a href="#" class="text-green-600 hover:text-green-700">terms and conditions</a></label>
</div>
<div class="text-right">
<button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
Submit Inquiry
</button>
</div>
</form>
</div>
Split Layout Contact Form
Contact Information
We're here to help! Reach out via the form, or use the details below. We aim to respond within one business day.
Send us a Message
<!-- Split Layout Contact Form Container -->
<div class="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow">
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Contact Information/Text Column -->
<div class="bg-blue-50 p-6 rounded-lg">
<h3 class="text-2xl font-semibold mb-4 text-blue-800">Contact Information</h3>
<p class="text-blue-700 mb-6">We're here to help! Reach out via the form, or use the details below. We aim to respond within one business day.</p>
<div class="space-y-4 text-blue-700">
<!-- Address -->
<div class="flex items-start space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<div>
<h4 class="font-medium">Address</h4>
<!-- Replace with your actual address -->
<p>456 Design Drive, Creativia, CT 06010</p>
</div>
</div>
<!-- Phone -->
<div class="flex items-start space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<div>
<h4 class="font-medium">Phone</h4>
<!-- Replace with your actual phone number -->
<a href="tel:+15559876543" class="hover:text-blue-900">+1 (555) 987-6543</a>
</div>
</div>
<!-- Email -->
<div class="flex items-start space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<div>
<h4 class="font-medium">Email</h4>
<!-- Replace with your actual email address -->
<a href="mailto:support@example.com" class="hover:text-blue-900">support@example.com</a>
</div>
</div>
</div>
</div>
<!-- Form Column -->
<div>
<h3 class="text-2xl font-semibold mb-4 text-gray-800">Send us a Message</h3>
<form action="#" method="POST" class="space-y-4">
<div>
<label for="split-name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" name="split-name" id="split-name" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="split-email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="split-email" id="split-email" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="split-message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea name="split-message" id="split-message" rows="6" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
</div>
<div class="text-right">
<button type="submit" class="inline-flex justify-center py-2 px-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Send Message
</button>
</div>
</form>
</div>
</div>
</div>
Modal/Popup Contact Form
Contact Us
<!-- Modal/Popup Contact Form -->
<!-- Requires Alpine.js (already included in the template) -->
<!-- Container with Alpine data for modal state -->
<div x-data="{ modalOpen: false }" class="max-w-lg mx-auto text-center">
<!-- Button to trigger the modal -->
<button @click="modalOpen = true" class="inline-flex justify-center py-2.5 px-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
Open Contact Form
</button>
<!-- Modal Structure -->
<div
x-show="modalOpen"
x-cloak <!-- Hide until Alpine initializes -->
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 z-[900] flex items-center justify-center p-4"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
>
<!-- Background Overlay -->
<div @click="modalOpen = false" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<!-- Modal Panel -->
<div
x-show="modalOpen"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
>
<!-- Modal Header -->
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start w-full">
<div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
<h3 class="text-lg font-medium leading-6 text-gray-900 mb-4 flex justify-between items-center" id="modal-title">
<span>Contact Us</span>
<!-- Close Button -->
<button @click="modalOpen = false" class="text-gray-400 hover:text-gray-600">
<span class="sr-only">Close</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</h3>
<!-- Contact Form inside the modal body -->
<form action="#" method="POST" class="space-y-4" id="modal-contact-form">
<div>
<label for="modal-name" class="sr-only">Name</label>
<input type="text" name="modal-name" id="modal-name" required placeholder="Your Name" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 sm:text-sm">
</div>
<div>
<label for="modal-email" class="sr-only">Email</label>
<input type="email" name="modal-email" id="modal-email" required placeholder="Your Email" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 sm:text-sm">
</div>
<div>
<label for="modal-message" class="sr-only">Message</label>
<textarea name="modal-message" id="modal-message" rows="3" required placeholder="Your Message" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 sm:text-sm"></textarea>
</div>
<!-- Form submission button is in the footer -->
</form>
</div>
</div>
</div>
<!-- Modal Footer (Actions) -->
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<!-- Example submit: Could trigger form submit or custom JS -->
<button type="button" @click="modalOpen = false; document.getElementById('modal-contact-form').submit(); /* Or handle via JS */ alert('Form Submitted (simulated)');" class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">
Send
</button>
<button type="button" @click="modalOpen = false" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm">
Cancel
</button>
</div>
</div>
</div>
</div>
Multi-Step Contact Form
Project Inquiry
<!-- Multi-Step Contact Form Container -->
<!-- Requires Alpine.js -->
<div x-data="{ currentStep: 1, totalSteps: 3 }" class="max-w-xl mx-auto bg-white p-8 rounded-lg shadow">
<h3 class="text-2xl font-semibold mb-2 text-gray-800">Project Inquiry</h3>
<!-- Step Indicator -->
<p class="text-sm text-gray-500 mb-6" x-text="`Step ${currentStep} of ${totalSteps}`"></p>
<!-- Optional Progress Bar -->
<div class="w-full bg-gray-200 rounded-full h-2 mb-6">
<div class="bg-cyan-600 h-2 rounded-full" :style="`width: ${(currentStep / totalSteps) * 100}%`"></div>
</div>
<!-- Add a form element wrapping all steps -->
<form action="#" method="POST" @submit.prevent="alert('Form Submitted (simulated)')">
<!-- Step 1: Contact Info -->
<!-- Use x-show to display the current step. Add transitions for effect. -->
<div x-show="currentStep === 1" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" class="space-y-4">
<h4 class="text-lg font-medium text-gray-700 mb-4">Your Contact Details</h4>
<div>
<label for="multi-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" name="multi-name" id="multi-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
</div>
<div>
<label for="multi-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" name="multi-email" id="multi-email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
</div>
<div>
<label for="multi-company" class="block text-sm font-medium text-gray-700 mb-1">Company (Optional)</label>
<input type="text" name="multi-company" id="multi-company" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
</div>
</div>
<!-- Step 2: Project Details -->
<div x-show="currentStep === 2" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" class="space-y-4">
<h4 class="text-lg font-medium text-gray-700 mb-4">Project Information</h4>
<div>
<label for="multi-project-type" class="block text-sm font-medium text-gray-700 mb-1">Type of Project</label>
<select id="multi-project-type" name="multi-project-type" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
<option value="">Select a type...</option>
<option value="web-design">Web Design</option>
<option value="development">Web Development</option>
<option value="seo">SEO Optimization</option>
<option value="consulting">Consulting</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="multi-description" class="block text-sm font-medium text-gray-700 mb-1">Project Description</label>
<textarea name="multi-description" id="multi-description" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm"></textarea>
</div>
</div>
<!-- Step 3: Budget & Timeline -->
<div x-show="currentStep === 3" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" class="space-y-4">
<h4 class="text-lg font-medium text-gray-700 mb-4">Budget & Timeline</h4>
<div>
<label for="multi-budget" class="block text-sm font-medium text-gray-700 mb-1">Estimated Budget</label>
<select id="multi-budget" name="multi-budget" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
<option value="">Select a range...</option>
<option value="<5k">< $5,000</option>
<option value="5k-10k">$5,000 - $10,000</option>
<option value="10k-25k">$10,000 - $25,000</option>
<option value=">25k">> $25,000</option>
<option value="tbd">To Be Determined</option>
</select>
</div>
<div>
<label for="multi-timeline" class="block text-sm font-medium text-gray-700 mb-1">Ideal Start Date</label>
<input type="date" name="multi-timeline" id="multi-timeline" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
</div>
</div>
<!-- Navigation Buttons -->
<div class="mt-8 flex justify-between">
<!-- Previous Button: Shows only if not on the first step -->
<button
type="button"
@click="currentStep--"
x-show="currentStep > 1"
class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
>
Previous
</button>
<!-- Spacer: Takes up space when Previous button is hidden on Step 1, pushing Next to the right -->
<div x-show="currentStep === 1" class="flex-grow"></div>
<!-- Next Button: Shows only if not on the last step -->
<button
type="button"
@click="currentStep++" <!-- Add validation here if needed before proceeding -->
x-show="currentStep < totalSteps"
class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
>
Next
</button>
<!-- Submit Button: Shows only on the last step -->
<button
type="submit"
x-show="currentStep === totalSteps"
class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
>
Submit Inquiry
</button>
</div>
</form>
</div>
Contact Form with Dropdown
Inquiry Form
<!-- Contact Form with Dropdown Container -->
<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow">
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Inquiry Form</h3>
<form action="#" method="POST" class="space-y-5">
<div>
<label for="dropdown-name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" name="dropdown-name" id="dropdown-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-pink-500 focus:border-pink-500 sm:text-sm">
</div>
<div>
<label for="dropdown-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" name="dropdown-email" id="dropdown-email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-pink-500 focus:border-pink-500 sm:text-sm">
</div>
<div>
<label for="dropdown-subject" class="block text-sm font-medium text-gray-700 mb-1">Reason for Contact</label>
<!-- Standard HTML select element styled with Tailwind -->
<select id="dropdown-subject" name="dropdown-subject" required class="w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-pink-500 focus:border-pink-500 sm:text-sm">
<option value="" disabled selected>Please select an option</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="sales">Sales Question</option>
<option value="feedback">Feedback</option>
<option value="partnership">Partnership Opportunity</option>
</select>
</div>
<div>
<label for="dropdown-message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea name="dropdown-message" id="dropdown-message" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-pink-500 focus:border-pink-500 sm:text-sm"></textarea>
</div>
<div>
<button type="submit" class="w-full inline-flex justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
Submit Inquiry
</button>
</div>
</form>
</div>
Contact Form with Checkboxes
Request Information
<!-- Contact Form with Checkboxes Container -->
<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow">
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Request Information</h3>
<form action="#" method="POST" class="space-y-6">
<div>
<label for="check-name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" name="check-name" id="check-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500 sm:text-sm">
</div>
<div>
<label for="check-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" name="check-email" id="check-email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500 sm:text-sm">
</div>
<!-- Checkbox Group using fieldset and legend for accessibility -->
<fieldset>
<legend class="text-sm font-medium text-gray-700 mb-2">Services Interested In:</legend>
<div class="space-y-2">
<!-- Checkbox Item -->
<div class="relative flex items-start">
<div class="flex h-5 items-center">
<!-- Note: name="services[]" is typical for PHP backend to receive an array -->
<input id="check-service-design" name="services[]" value="design" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-500">
</div>
<div class="ml-3 text-sm">
<label for="check-service-design" class="font-medium text-gray-700">Web Design</label>
</div>
</div>
<!-- Repeat for other checkboxes -->
<div class="relative flex items-start">
<div class="flex h-5 items-center">
<input id="check-service-dev" name="services[]" value="development" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-500">
</div>
<div class="ml-3 text-sm">
<label for="check-service-dev" class="font-medium text-gray-700">Web Development</label>
</div>
</div>
<div class="relative flex items-start">
<div class="flex h-5 items-center">
<input id="check-service-hosting" name="services[]" value="hosting" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-500">
</div>
<div class="ml-3 text-sm">
<label for="check-service-hosting" class="font-medium text-gray-700">Hosting & Maintenance</label>
</div>
</div>
<div class="relative flex items-start">
<div class="flex h-5 items-center">
<input id="check-service-other" name="services[]" value="other" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-500">
</div>
<div class="ml-3 text-sm">
<label for="check-service-other" class="font-medium text-gray-700">Other</label>
</div>
</div>
</div>
</fieldset>
<div>
<label for="check-message" class="block text-sm font-medium text-gray-700 mb-1">Additional Details</label>
<textarea name="check-message" id="check-message" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500 sm:text-sm"></textarea>
</div>
<!-- Required Consent Checkbox -->
<div class="relative flex items-start">
<div class="flex h-5 items-center">
<input id="check-consent" name="consent" type="checkbox" required class="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-500">
</div>
<div class="ml-3 text-sm">
<label for="check-consent" class="font-medium text-gray-700">I agree to be contacted regarding this inquiry. <span class="text-red-500">*</span></label>
<p class="text-gray-500 text-xs">We respect your privacy.</p>
</div>
</div>
<div>
<button type="submit" class="w-full inline-flex justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
Request Info
</button>
</div>
</form>
</div>
Contact Form with Embedded Google Map
Contact Us & Find Us
Send a Message
Our Location
123 Map Street, Location City, LC 12345
<!-- Contact Form with Embedded Google Map Container -->
<div class="max-w-5xl mx-auto bg-white p-8 rounded-lg shadow overflow-hidden">
<h3 class="text-2xl font-semibold mb-6 text-gray-800 text-center md:text-left">Contact Us & Find Us</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Form Column -->
<div>
<h4 class="text-lg font-semibold mb-4 text-gray-700">Send a Message</h4>
<form action="#" method="POST" class="space-y-4">
<div>
<label for="map-name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" name="map-name" id="map-name" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-lime-500 focus:border-lime-500 sm:text-sm">
</div>
<div>
<label for="map-email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="map-email" id="map-email" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-lime-500 focus:border-lime-500 sm:text-sm">
</div>
<div>
<label for="map-message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea name="map-message" id="map-message" rows="5" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-lime-500 focus:border-lime-500 sm:text-sm"></textarea>
</div>
<div class="text-right">
<button type="submit" class="inline-flex justify-center py-2 px-5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-lime-600 hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500">
Send
</button>
</div>
</form>
</div>
<!-- Map Column -->
<!-- Ensure container has a defined height for the map iframe -->
<div class="h-64 md:h-full">
<h4 class="text-lg font-semibold mb-4 text-gray-700">Our Location</h4>
<!-- Google Map Embed -->
<div class="w-full h-full bg-gray-200 rounded-lg overflow-hidden">
<!--
IMPORTANT: Replace the entire iframe below with the embed code provided by Google Maps.
1. Go to Google Maps (maps.google.com).
2. Search for your business address.
3. Click the 'Share' button.
4. Go to the 'Embed a map' tab.
5. Copy the HTML (iframe code) provided.
6. Paste the copied iframe code here, replacing the placeholder below.
Ensure width="100%" and height="100%" are set for responsiveness within the container.
-->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.0198077789943!2d144.963157!3d-37.814107!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0x5045675218ce7e0!2sMelbourne%20VIC%203000%2C%20Australia!5e0!3m2!1sen!2sus!4v1678886888000!5m2!1sen!2sus" <!-- Replace this src -->
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Our Business Location"> <!-- Update title -->
</iframe>
</div>
<!-- Optional: Add address text below map -->
<p class="text-sm text-gray-500 mt-2 text-center md:text-left">123 Map Street, Location City, LC 12345</p>
</div>
</div>
</div>
Contact Form with Custom Icons in Inputs
Reach Out
<!-- Contact Form with Icons in Inputs Container -->
<div class="max-w-md mx-auto bg-white p-8 rounded-lg shadow">
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Reach Out</h3>
<form action="#" method="POST" class="space-y-5">
<!-- Name Input with Icon -->
<div>
<label for="icon-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<!-- Use relative positioning on the wrapper -->
<div class="relative rounded-md shadow-sm">
<!-- Position the icon absolutely within the wrapper -->
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<!-- Heroicon: user -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
</svg>
</div>
<!-- Add left padding to the input to make space for the icon -->
<input type="text" name="icon-name" id="icon-name" required class="block w-full rounded-md border-gray-300 pl-10 focus:border-sky-500 focus:ring-sky-500 sm:text-sm" placeholder="Jane Doe">
</div>
</div>
<!-- Email Input with Icon -->
<div>
<label for="icon-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<div class="relative rounded-md shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<!-- Heroicon: envelope -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
</div>
<input type="email" name="icon-email" id="icon-email" required class="block w-full rounded-md border-gray-300 pl-10 focus:border-sky-500 focus:ring-sky-500 sm:text-sm" placeholder="you@example.com">
</div>
</div>
<!-- Message Textarea (Usually doesn't need an internal icon) -->
<div>
<label for="icon-message" class="block text-sm font-medium text-gray-700 mb-1">Your Message</label>
<textarea name="icon-message" id="icon-message" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500 sm:text-sm" placeholder="How can we help?"></textarea>
</div>
<!-- Submit Button -->
<div>
<button type="submit" class="w-full inline-flex justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-sky-600 hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500">
Send Message
</button>
</div>
</form>
</div>
FAQ on Tailwind CSS Contact Forms
How do I create a basic contact form with Tailwind CSS?
Start by creating your HTML form structure with proper input fields. Apply Tailwind utility classes for spacing, colors, and layout. Use form control elements like class="block w-full px-4 py-2 mt-2 border rounded-md" for inputs. Add form validation and button styling with Tailwind's focus states and hover effects.
Can I make Tailwind CSS contact forms responsive?
Yes! Tailwind's responsive design system makes it simple:
<div class="w-full px-4 sm:w-2/3 md:w-1/2 lg:w-1/3 mx-auto">
<!-- Your form goes here -->
</div>Your contact page setup will adapt perfectly to different screen sizes without custom media queries.
What's the best way to handle form validation in Tailwind?
Combine HTML5 validation with Tailwind CSS classes for error states. Create CSS form templates that include:
- Required attributes on input fields
- Conditional classes for invalid inputs
- Tailwind form validation utility classes
- Error message styling with red text/borders
Consider adding JavaScript form events for more advanced validation.
How do I style form buttons with Tailwind CSS?
Style form submission buttons using Tailwind's utility classes:
<button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline">
Submit
</button>This creates clean buttons with proper hover effects and focus states for better form UX best practices.
Can I use Tailwind with JavaScript frameworks for contact forms?
Absolutely! Tailwind works great with React contact forms, Vue contact forms, and Alpine.js. Import Tailwind into your frontend form development workflow. The utility classes integrate perfectly with component-based architecture, making dynamic form handling straightforward across all JavaScript frameworks.
How do I create multi-step forms with Tailwind CSS?
Build multi-step forms by creating separate form sections with hidden classes. Use JavaScript to toggle visibility as users progress. Style each section consistently with Tailwind form components. Add progress indicators with Tailwind's flex utilities. This approach maintains good form state management while keeping the code clean.
What plugins are available for Tailwind CSS forms?
The official @tailwindcss/forms plugin provides reset styles for form elements. This plugin makes form field styling consistent across browsers. Other Tailwind form plugins like headless UI offer accessible dropdowns and form input sanitization components. These enhance your form component library without sacrificing customization.
How do I make accessible Tailwind contact forms?
Focus on these key areas:
- Proper labeling with
forattributes - Sufficient color contrast (check with tools)
- Keyboard navigation support
- Clear form error messages
- ARIA attributes when needed
Modern contact forms need to work for everyone. Tailwind's utility classes make implementing these contact form accessibility features straightforward.
How do I handle form submission with Tailwind CSS?
Tailwind only handles styling, not functionality. For form submission API integration:
- Use JavaScript form events to capture the submit event
- Add form submission handling with fetch or axios
- Display form success states with conditional Tailwind classes
- Implement AJAX forms for better UX
Consider Node.js or PHP as form processors on the backend.
What are some recommended Tailwind form templates?
Look for templates with:
- Clean form design principles
- Mobile-friendly forms
- Form grid layout options
- Proper input focus states
- Form placeholder text styling
TailwindUI offers official components, but many free Tailwind form templates exist online. These save time while maintaining the flexibility of Tailwind's CSS framework.