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.
3. 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>
4. 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>
5. 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 tag):
2. Place the reCAPTCHA widget div here:
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>
6. 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>
7. 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-4567Send 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>
8. Basic Contact Form
Get in Touch
Get in Touch
9. Full Contact Form
Detailed Contact Form
Detailed Contact Form
10. 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
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
11. Modal/Popup Contact Form
Contact Us
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"
>
Contact Us
12. Multi-Step Contact Form
Project Inquiry
Project Inquiry
13. Contact Form with Dropdown
Inquiry Form
Inquiry Form
14. Contact Form with Checkboxes
Request Information
Request Information
15. Contact Form with Embedded Google Map
Contact Us & Find Us
Send a Message
Our Location
123 Map Street, Location City, LC 12345
Contact Us & Find Us
Send a Message
Our Location
123 Map Street, Location City, LC 12345
16. Contact Form with Custom Icons in Inputs
Reach Out
Reach Out
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.