← All templates
Lead generation
Quote request
Capture service details, budget, and contact info for sales follow-up.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Request a quote</title>
<style>
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f9fafb; color: #111827; }
.wrap { max-width: 560px; margin: 48px auto; padding: 0 16px; }
h1 { font-size: 30px; margin: 0 0 8px; letter-spacing: -0.02em; }
p.lead { color: #6b7280; margin: 0 0 24px; }
form { background: #fff; padding: 32px; border-radius: 14px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin: 14px 0 6px; }
label:first-of-type { margin-top: 0; }
.row label { margin-top: 0; }
input, textarea, select { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px; box-sizing: border-box; font-family: inherit; background: #fff; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
textarea { min-height: 110px; resize: vertical; }
button { margin-top: 22px; width: 100%; padding: 12px; background: #111827; color: #fff; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: 0.01em; }
button:hover { background: #000; }
.hint { font-size: 12px; color: #6b7280; margin-top: 6px; }
@media (max-width: 480px) { .row { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="wrap">
<h1>Request a quote</h1>
<p class="lead">Tell us about your project and we'll come back with pricing within 24 hours.</p>
<form action="https://formserve.io/f/your-endpoint-key" method="POST">
<div class="row">
<div>
<label for="name">Your name</label>
<input id="name" name="name" type="text" required>
</div>
<div>
<label for="company">Company</label>
<input id="company" name="company" type="text">
</div>
</div>
<div class="row" style="margin-top:14px;">
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</div>
<div>
<label for="phone">Phone (optional)</label>
<input id="phone" name="phone" type="tel">
</div>
</div>
<label for="service">Service needed</label>
<select id="service" name="service" required>
<option value="">Choose a service…</option>
<option>Website design</option>
<option>Branding</option>
<option>Photography</option>
<option>Consulting</option>
<option>Other</option>
</select>
<label for="budget">Estimated budget</label>
<select id="budget" name="budget" required>
<option value="">Choose a range…</option>
<option>Under $1,000</option>
<option>$1,000 – $5,000</option>
<option>$5,000 – $20,000</option>
<option>$20,000+</option>
</select>
<label for="details">Project details</label>
<textarea id="details" name="details" placeholder="Timeline, deliverables, anything we should know…" required></textarea>
<button type="submit">Request quote</button>
</form>
</div>
</body>
</html>
Make it yours
- Copy the HTML above and paste it into your page.
-
Replace
your-endpoint-keyin theactionattribute with the endpoint key from your Formserve dashboard. - Style it to match your site — every class is yours to override.
Don't have a Formserve account yet? Create one free.