Contact Form HTML Template
Collect inquiries with a responsive card layout, labeled inputs, and accessible markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Studio Ember</title>
<style>
body { font-family: 'Inter', sans-serif; background: #0f172a; color: white; margin: 0; }
.wrapper { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.card { background: #1e293b; border-radius: 1.5rem; max-width: 540px; width: 100%; padding: 2rem; box-shadow: 0 25px 70px rgba(2, 6, 23, 0.55); }
h1 { margin-bottom: 1rem; }
p { color: #cbd5f5; margin-bottom: 2rem; }
label { display: block; margin-bottom: 0.35rem; font-weight: 600; }
input, textarea { width: 100%; border-radius: 0.8rem; border: 1px solid rgba(148, 163, 184, 0.5); background: transparent; color: white; padding: 0.85rem 1rem; font-size: 1rem; }
textarea { min-height: 140px; resize: vertical; }
.field { margin-bottom: 1.25rem; }
button { width: 100%; background: #38bdf8; color: #0f172a; border: none; border-radius: 999px; padding: 0.9rem 1.2rem; font-weight: 700; cursor: pointer; }
</style>
</head>
<body>
<div class="wrapper">
<section class="card">
<h1>Let’s build together</h1>
<p>Tell us about your product, timeline, and the impact you want to make. We reply within two business days.</p>
<form>
<div class="field">
<label for="name">Full name</label>
<input id="name" type="text" name="name" required />
</div>
<div class="field">
<label for="email">Work email</label>
<input id="email" type="email" name="email" required />
</div>
<div class="field">
<label for="budget">Estimated budget</label>
<input id="budget" type="text" name="budget" placeholder="$25k - $50k" />
</div>
<div class="field">
<label for="message">Project details</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit">Send inquiry</button>
</form>
</section>
</div>
</body>
</html>