Contact Forms
User-friendly contact forms with validation, input fields, and submission buttons for user inquiries.
5 COMPONENT VARIATIONS
Compact Side-by-Side Contact Form
A space-efficient contact form with contact information displayed alongside the form fields
View
Inline Horizontal Contact Form
A compact horizontal contact form perfect for headers, footers, or landing page sections.
View
Minimalist Contact Form
A clean, minimal contact form with subtle borders and plenty of white space for a modern look.
View
Professional Contact Form
A clean and professional contact form with validation states and clear field organization.
View
Step-by-Step Contact Form
A progressive contact form with visual steps and progress indication for better user experience.
View
Compact Side-by-Side Contact Form
A space-efficient contact form with contact information displayed alongside the form fields
Contact Us
Ready to get started? Reach out to us and let's discuss your project.
Send us a message
Get in touch
We're here to help and answer any question you might have. We look forward to hearing from you.
Visit our office
123 Innovation Drive
Tech District, Suite 400
San Francisco, CA 94105
Call us
+1 (555) 987-6543
Monday - Friday, 9am - 6pm PST
Email us
contact@company.com
We'll respond within 24 hours
Component Code
<div class="bg-gray-50 py-12">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Contact Us
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Ready to get started? Reach out to us and let's discuss your project.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- Contact Form -->
<div class="bg-white rounded-lg p-9">
<h3 class="text-xl font-semibold text-gray-900 mb-6">Send us a message</h3>
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-3">
Full Name *
</label>
<input
type="text"
id="name"
name="name"
required
class="w-full px-3 py-3 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="Your full name"
>
</div>
<div>
<label for="email-compact" class="block text-sm font-medium text-gray-700 mb-3">
Email Address *
</label>
<input
type="email"
id="email-compact"
name="email"
required
class="w-full px-3 py-3 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="your.email@example.com"
>
</div>
<div>
<label for="company" class="block text-sm font-medium text-gray-700 mb-3">
Company
</label>
<input
type="text"
id="company"
name="company"
class="w-full px-3 py-3 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="Your company name"
>
</div>
<div>
<label for="budget" class="block text-sm font-medium text-gray-700 mb-3">
Project Budget
</label>
<select
id="budget"
name="budget"
class="w-full px-3 py-3 border border-gray-300 rounded-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
>
<option value="">Select budget range</option>
<option value="under-5k">Under $5,000</option>
<option value="5k-15k">$5,000 - $15,000</option>
<option value="15k-50k">$15,000 - $50,000</option>
<option value="50k-plus">$50,000+</option>
</select>
</div>
<div>
<label for="message-compact" class="block text-sm font-medium text-gray-700 mb-3">
Project Details *
</label>
<textarea
id="message-compact"
name="message"
rows="4"
required
class="w-full px-3 py-3 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent resize-none"
placeholder="Tell us about your project requirements..."
></textarea>
</div>
<button
type="submit"
class="w-full bg-cyan-700 text-white py-3 px-6 rounded-md font-medium hover:bg-cyan-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-700 transition-colors duration-200"
>
Send Message
</button>
</form>
</div>
<!-- Contact Information -->
<div class="space-y-9">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-6">Get in touch</h3>
<p class="text-gray-600 leading-relaxed">
We're here to help and answer any question you might have. We look forward to hearing from you.
</p>
</div>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-cyan-700 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
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 strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
</div>
<div class="ml-6">
<h4 class="text-lg font-medium text-gray-900">Visit our office</h4>
<p class="mt-3 text-gray-600">
123 Innovation Drive<br>
Tech District, Suite 400<br>
San Francisco, CA 94105
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-cyan-700 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
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>
</div>
<div class="ml-6">
<h4 class="text-lg font-medium text-gray-900">Call us</h4>
<p class="mt-3 text-gray-600">
+1 (555) 987-6543<br>
Monday - Friday, 9am - 6pm PST
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-cyan-700 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
d="M3 8l7.89 4.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>
</div>
<div class="ml-6">
<h4 class="text-lg font-medium text-gray-900">Email us</h4>
<p class="mt-3 text-gray-600">
contact@company.com<br>
We'll respond within 24 hours
</p>
</div>
</div>
</div>
<div class="pt-6 border-t border-gray-200">
<h4 class="text-lg font-medium text-gray-900 mb-6">Follow us</h4>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-cyan-700 transition-colors duration-200">
<span class="sr-only">Twitter</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<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>
<a href="#" class="text-gray-400 hover:text-cyan-700 transition-colors duration-200">
<span class="sr-only">LinkedIn</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700 transition-colors duration-200">
<span class="sr-only">GitHub</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Inline Horizontal Contact Form
A compact horizontal contact form perfect for headers, footers, or landing page sections.
Quick Contact
Get in touch with us in seconds
Email Us
hello@company.com
Call Us
+1 (555) 123-4567
Response Time
Within 2 hours
Component Code
<div class="bg-white py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-3">
Quick Contact
</h2>
<p class="text-gray-600">
Get in touch with us in seconds
</p>
</div>
<div class="bg-gray-50 rounded-lg p-9">
<form class="space-y-6">
<!-- First Row -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">
Name
</label>
<input
type="text"
name="name"
class="w-full px-3 py-3 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="Your full name"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">
Email
</label>
<input
type="email"
name="email"
class="w-full px-3 py-3 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="your@email.com"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">
Phone
</label>
<input
type="tel"
name="phone"
class="w-full px-3 py-3 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="(555) 123-4567"
>
</div>
</div>
<!-- Second Row -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">
Service
</label>
<select
name="service"
class="w-full px-3 py-3 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
>
<option value="">Select service</option>
<option value="web-design">Web Design</option>
<option value="development">Development</option>
<option value="consulting">Consulting</option>
<option value="support">Support</option>
</select>
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-3">
Message
</label>
<input
type="text"
name="message"
class="w-full px-3 py-3 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="Brief description of your project"
>
</div>
<div class="flex items-end">
<button
type="submit"
class="w-full px-6 py-3 bg-cyan-700 text-white font-medium rounded-md hover:bg-cyan-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-700 transition-colors duration-200"
>
Send Message
</button>
</div>
</div>
<!-- Terms -->
<div class="flex items-center justify-center">
<label class="flex items-center text-sm text-gray-600">
<input
type="checkbox"
name="terms"
class="mr-3 h-4 w-4 text-cyan-700 focus:ring-cyan-700 border-gray-300 rounded"
>
I agree to the
<a href="#" class="text-cyan-700 hover:text-cyan-600 mx-1">terms of service</a>
and
<a href="#" class="text-cyan-700 hover:text-cyan-600 ml-1">privacy policy</a>
</label>
</div>
</form>
</div>
<!-- Contact Info Bar -->
<div class="mt-12 bg-cyan-700 text-white rounded-lg p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
<div>
<div class="flex justify-center mb-3">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
d="M3 8l7.89 4.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 mb-1">Email Us</h4>
<p class="text-cyan-100 text-sm">hello@company.com</p>
</div>
<div>
<div class="flex justify-center mb-3">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
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 mb-1">Call Us</h4>
<p class="text-cyan-100 text-sm">+1 (555) 123-4567</p>
</div>
<div>
<div class="flex justify-center mb-3">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h4 class="font-medium mb-1">Response Time</h4>
<p class="text-cyan-100 text-sm">Within 2 hours</p>
</div>
</div>
</div>
</div>
</div>Minimalist Contact Form
A clean, minimal contact form with subtle borders and plenty of white space for a modern look.
Contact
Let's start a conversation
Or reach us directly
hello@company.com
+1 (555) 123-4567
Component Code
<div class="bg-white min-h-screen flex items-center justify-center py-12 px-6">
<div class="w-full max-w-md">
<div class="text-center mb-12">
<h1 class="text-3xl font-light text-gray-900 mb-3">
Contact
</h1>
<p class="text-gray-600 text-sm">
Let's start a conversation
</p>
</div>
<form class="space-y-6">
<div>
<input
type="text"
name="name"
placeholder="Your name"
class="w-full px-0 py-3 text-gray-900 placeholder-gray-400 bg-transparent border-0 border-b border-gray-200 focus:outline-none focus:border-cyan-700 transition-colors duration-300"
>
</div>
<div>
<input
type="email"
name="email"
placeholder="Email address"
class="w-full px-0 py-3 text-gray-900 placeholder-gray-400 bg-transparent border-0 border-b border-gray-200 focus:outline-none focus:border-cyan-700 transition-colors duration-300"
>
</div>
<div>
<input
type="tel"
name="phone"
placeholder="Phone number"
class="w-full px-0 py-3 text-gray-900 placeholder-gray-400 bg-transparent border-0 border-b border-gray-200 focus:outline-none focus:border-cyan-700 transition-colors duration-300"
>
</div>
<div>
<textarea
name="message"
rows="4"
placeholder="Your message"
class="w-full px-0 py-3 text-gray-900 placeholder-gray-400 bg-transparent border-0 border-b border-gray-200 focus:outline-none focus:border-cyan-700 transition-colors duration-300 resize-none"
></textarea>
</div>
<div class="pt-6">
<button
type="submit"
class="w-full py-3 text-cyan-700 font-medium border border-cyan-700 hover:bg-cyan-700 hover:text-white transition-all duration-300"
>
Send Message
</button>
</div>
</form>
<div class="mt-12 text-center">
<p class="text-xs text-gray-400 mb-6">Or reach us directly</p>
<div class="space-y-3">
<p class="text-sm text-gray-600">hello@company.com</p>
<p class="text-sm text-gray-600">+1 (555) 123-4567</p>
</div>
</div>
</div>
</div>Professional Contact Form
A clean and professional contact form with validation states and clear field organization.
Get in Touch
We'd love to hear from you. Send us a message and we'll respond as soon as possible.
hello@company.com
Phone
+1 (555) 123-4567
Office
123 Business Ave
Suite 100
City, ST 12345
Component Code
<div class="bg-white py-12">
<div class="max-w-2xl mx-auto px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Get in Touch
</h2>
<p class="mt-6 text-lg leading-8 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 class="space-y-6">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">
First name
</label>
<div class="mt-3">
<input
type="text"
name="first-name"
id="first-name"
autocomplete="given-name"
class="block w-full rounded-md border-0 px-3 py-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-cyan-700 sm:text-sm sm:leading-6"
placeholder="Enter your first name"
>
</div>
</div>
<div>
<label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">
Last name
</label>
<div class="mt-3">
<input
type="text"
name="last-name"
id="last-name"
autocomplete="family-name"
class="block w-full rounded-md border-0 px-3 py-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-cyan-700 sm:text-sm sm:leading-6"
placeholder="Enter your last name"
>
</div>
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">
Email address
</label>
<div class="mt-3">
<input
type="email"
name="email"
id="email"
autocomplete="email"
class="block w-full rounded-md border-0 px-3 py-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-cyan-700 sm:text-sm sm:leading-6"
placeholder="Enter your email address"
>
</div>
</div>
<div>
<label for="phone" class="block text-sm font-medium leading-6 text-gray-900">
Phone number
</label>
<div class="mt-3">
<input
type="tel"
name="phone"
id="phone"
autocomplete="tel"
class="block w-full rounded-md border-0 px-3 py-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-cyan-700 sm:text-sm sm:leading-6"
placeholder="Enter your phone number"
>
</div>
</div>
<div>
<label for="subject" class="block text-sm font-medium leading-6 text-gray-900">
Subject
</label>
<div class="mt-3">
<select
id="subject"
name="subject"
class="block w-full rounded-md border-0 px-3 py-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-cyan-700 sm:text-sm sm:leading-6"
>
<option value="">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="sales">Sales Question</option>
<option value="partnership">Partnership Opportunity</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div>
<label for="message" class="block text-sm font-medium leading-6 text-gray-900">
Message
</label>
<div class="mt-3">
<textarea
name="message"
id="message"
rows="6"
class="block w-full rounded-md border-0 px-3 py-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-cyan-700 sm:text-sm sm:leading-6"
placeholder="Tell us more about your inquiry..."
></textarea>
</div>
</div>
<div class="flex items-start">
<div class="flex h-6 items-center">
<input
id="privacy"
name="privacy"
type="checkbox"
class="h-4 w-4 rounded border-gray-300 text-cyan-700 focus:ring-cyan-700"
>
</div>
<div class="ml-3 text-sm leading-6">
<label for="privacy" class="text-gray-600">
I agree to the
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600">privacy policy</a>
and
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600">terms of service</a>
</label>
</div>
</div>
<div class="pt-3">
<button
type="submit"
class="w-full flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-cyan-700 hover:bg-cyan-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-700 transition-colors duration-200"
>
<svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
Send Message
</button>
</div>
</form>
<div class="mt-12 pt-12 border-t border-gray-200">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
<div class="text-center">
<div class="flex justify-center">
<div class="flex items-center justify-center w-12 h-12 bg-cyan-100 rounded-lg">
<svg class="w-6 h-6 text-cyan-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 4.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>
</div>
<h3 class="mt-3 text-lg font-medium text-gray-900">Email</h3>
<p class="mt-3 text-sm text-gray-600">hello@company.com</p>
</div>
<div class="text-center">
<div class="flex justify-center">
<div class="flex items-center justify-center w-12 h-12 bg-cyan-100 rounded-lg">
<svg class="w-6 h-6 text-cyan-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" 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>
</div>
<h3 class="mt-3 text-lg font-medium text-gray-900">Phone</h3>
<p class="mt-3 text-sm text-gray-600">+1 (555) 123-4567</p>
</div>
<div class="text-center">
<div class="flex justify-center">
<div class="flex items-center justify-center w-12 h-12 bg-cyan-100 rounded-lg">
<svg class="w-6 h-6 text-cyan-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" 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 strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
</div>
<h3 class="mt-3 text-lg font-medium text-gray-900">Office</h3>
<p class="mt-3 text-sm text-gray-600">123 Business Ave<br>Suite 100<br>City, ST 12345</p>
</div>
</div>
</div>
</div>
</div>Step-by-Step Contact Form
A progressive contact form with visual steps and progress indication for better user experience.
Get in Touch
We'll guide you through a quick contact process
1
Personal Info
2
Project Details
3
Review
Step 1: Personal Information
Tell us a bit about yourself so we can get in touch
Need help? Contact us at support@company.com
Component Code
<div class="bg-gray-50 min-h-screen py-12">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-3">
Get in Touch
</h2>
<p class="text-gray-600">
We'll guide you through a quick contact process
</p>
</div>
<!-- Progress Steps -->
<div class="mb-12">
<div class="flex items-center justify-center space-x-12">
<div class="flex items-center">
<div class="w-9 h-9 bg-cyan-700 text-white rounded-full flex items-center justify-center text-sm font-medium">
1
</div>
<span class="ml-3 text-sm font-medium text-cyan-700">Personal Info</span>
</div>
<div class="w-12 h-px bg-gray-300"></div>
<div class="flex items-center">
<div
class="w-9 h-9 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-sm font-medium">
2
</div>
<span class="ml-3 text-sm font-medium text-gray-500">Project Details</span>
</div>
<div class="w-12 h-px bg-gray-300"></div>
<div class="flex items-center">
<div
class="w-9 h-9 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-sm font-medium">
3
</div>
<span class="ml-3 text-sm font-medium text-gray-500">Review</span>
</div>
</div>
</div>
<!-- Form Card -->
<div class="bg-white rounded-lg p-9">
<div class="mb-9">
<h3 class="text-xl font-semibold text-gray-900 mb-3">
Step 1: Personal Information
</h3>
<p class="text-gray-600 text-sm">
Tell us a bit about yourself so we can get in touch
</p>
</div>
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">
First Name *
</label>
<input
type="text"
name="firstName"
class="w-full px-3 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="John"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">
Last Name *
</label>
<input
type="text"
name="lastName"
class="w-full px-3 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="Doe"
>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">
Email Address *
</label>
<input
type="email"
name="email"
class="w-full px-3 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="john.doe@example.com"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">
Phone Number
</label>
<input
type="tel"
name="phone"
class="w-full px-3 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="+1 (555) 123-4567"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">
Company
</label>
<input
type="text"
name="company"
class="w-full px-3 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:border-transparent"
placeholder="Your company name"
>
</div>
<div class="flex justify-between pt-6">
<button
type="button"
class="px-6 py-3 text-gray-600 font-medium border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-200"
disabled
>
Previous
</button>
<button
type="button"
class="px-6 py-3 bg-cyan-700 text-white font-medium rounded-md hover:bg-cyan-800 transition-colors duration-200"
>
Next Step
</button>
</div>
</form>
</div>
<!-- Help Text -->
<div class="mt-9 text-center">
<p class="text-sm text-gray-500">
Need help? Contact us at
<a href="mailto:support@company.com" class="text-cyan-700 hover:text-cyan-600">support@company.com</a>
</p>
</div>
</div>
</div>Ready to Use These Components?
Copy the code and customize it to match your brand. These components are built with TailwindCSS and work seamlessly in any project.
Explore More Components