Modern Contact Form
A sleek and modern contact form with floating labels, input validation styling, and a gradient submit button. Features a clean design with smooth transitions and hover effects.
form contact
Loading component...
83 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Contact Form</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-slate-900 to-slate-800 min-h-screen flex items-center justify-center p-6">
<div class="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full">
<!-- Header -->
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-gray-800 mb-2">Get in Touch</h2>
<p class="text-gray-600">We'd love to hear from you. Send us a message!</p>
</div>
<!-- Form -->
<form class="space-y-6">
<!-- Name Input -->
<div class="relative">
<input type="text" id="name"
class="peer w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none transition-colors placeholder-transparent"
placeholder="Your Name" />
<label for="name"
class="absolute left-4 -top-2.5 bg-white px-1 text-sm text-gray-600 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-blue-500">
Your Name
</label>
</div>
<!-- Email Input -->
<div class="relative">
<input type="email" id="email"
class="peer w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none transition-colors placeholder-transparent"
placeholder="Email Address" />
<label for="email"
class="absolute left-4 -top-2.5 bg-white px-1 text-sm text-gray-600 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-blue-500">
Email Address
</label>
</div>
<!-- Subject Input -->
<div class="relative">
<input type="text" id="subject"
class="peer w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none transition-colors placeholder-transparent"
placeholder="Subject" />
<label for="subject"
class="absolute left-4 -top-2.5 bg-white px-1 text-sm text-gray-600 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-blue-500">
Subject
</label>
</div>
<!-- Message Textarea -->
<div class="relative">
<textarea id="message" rows="4"
class="peer w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none transition-colors placeholder-transparent resize-none"
placeholder="Your Message"></textarea>
<label for="message"
class="absolute left-4 -top-2.5 bg-white px-1 text-sm text-gray-600 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-blue-500">
Your Message
</label>
</div>
<!-- Submit Button -->
<button type="submit"
class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-semibold py-3 px-6 rounded-lg hover:from-blue-600 hover:to-indigo-700 transform hover:scale-[1.02] transition-all duration-200 shadow-lg flex items-center justify-center gap-2">
<span>Send Message</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</form>
<!-- Footer -->
<div class="mt-6 text-center text-sm text-gray-500">
We'll get back to you within 24 hours
</div>
</div>
</body>
</html>