Quote Request Form

Form requesting a price or estimate.

html

<form class="quote">
  <h2 class="quote__heading">Request a quote</h2>
  <label for="quote-service">Service type</label>
  <select id="quote-service" name="service">
    <option selected>Web</option>
    <option>Web</option>
    <option>Branding</option>
    <option>Marketing</option>
  </select>
  <label for="quote-budget">Budget range</label>
  <input id="quote-budget" type="text" name="budget" placeholder="$5,000 - $10,000" />
  <label for="quote-details">Project details</label>
  <textarea id="quote-details" name="details" rows="3"></textarea>
  <button type="submit" style="background:#E8A020;">Send request</button>
</form>
<style>
.quote { font: 15px system-ui, sans-serif; color: #241430; display: flex; flex-direction: column; gap: 8px; max-width: 320px; padding: 22px; border: 1px solid #24143022; border-radius: 14px; background: #FAF7F2; }
.quote__heading { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.quote label { font-size: 13px; font-weight: 600; }
.quote input, .quote select, .quote textarea { font: inherit; padding: 9px 11px; border: 1px solid #24143033; border-radius: 8px; background: #FAF7F2; }
.quote button { margin-top: 10px; border: none; color: #241430; padding: 11px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.quote button:hover, .quote button:focus-visible { opacity: .85; }
</style>

tailwind

<form class="font-sans text-[15px] text-[#241430] flex flex-col gap-2 max-w-[320px] p-5.5 border border-[#24143022] rounded-2xl bg-[#FAF7F2]">
  <h2 class="m-0 mb-2 text-lg font-bold">Request a quote</h2>
  <label for="quote-tw-service" class="text-[13px] font-semibold">Service type</label>
  <select id="quote-tw-service" name="service" class="font-sans px-2.5 py-2 border border-[#24143033] rounded-lg bg-[#FAF7F2]">
    <option selected>Web</option>
    <option>Web</option>
    <option>Branding</option>
    <option>Marketing</option>
  </select>
  <label for="quote-tw-budget" class="text-[13px] font-semibold">Budget range</label>
  <input id="quote-tw-budget" type="text" name="budget" placeholder="$5,000 - $10,000" class="font-sans px-2.5 py-2 border border-[#24143033] rounded-lg" />
  <label for="quote-tw-details" class="text-[13px] font-semibold">Project details</label>
  <textarea id="quote-tw-details" name="details" rows="3" class="font-sans px-2.5 py-2 border border-[#24143033] rounded-lg"></textarea>
  <button type="submit" class="mt-2.5 border-0 text-[#241430] p-2.5 rounded-lg font-bold cursor-pointer hover:opacity-85" style="background:#E8A020;">Send request</button>
</form>

react

export function QuoteRequestForm({
  heading = "Request a quote",
  serviceType = "Web",
  submitText = "Send request",
  accent = "#E8A020",
}) {
  return (
    <form style={{ font: "15px system-ui, sans-serif", color: "#241430", display: "flex", flexDirection: "column",
      gap: 8, maxWidth: 320, padding: 22, border: "1px solid #24143022", borderRadius: 14, background: "#FAF7F2" }}>
      <h2 style={{ margin: "0 0 8px", fontSize: 19, fontWeight: 700 }}>{heading}</h2>
      <label htmlFor="quote-service" style={{ fontSize: 13, fontWeight: 600 }}>Service type</label>
      <select id="quote-service" name="service" defaultValue={serviceType}
        style={{ font: "inherit", padding: "9px 11px", border: "1px solid #24143033", borderRadius: 8, background: "#FAF7F2" }}>
        <option>Web</option>
        <option>Branding</option>
        <option>Marketing</option>
      </select>
      <label htmlFor="quote-budget" style={{ fontSize: 13, fontWeight: 600 }}>Budget range</label>
      <input id="quote-budget" type="text" name="budget" placeholder="$5,000 - $10,000"
        style={{ font: "inherit", padding: "9px 11px", border: "1px solid #24143033", borderRadius: 8 }} />
      <label htmlFor="quote-details" style={{ fontSize: 13, fontWeight: 600 }}>Project details</label>
      <textarea id="quote-details" name="details" rows={3}
        style={{ font: "inherit", padding: "9px 11px", border: "1px solid #24143033", borderRadius: 8 }} />
      <button type="submit" style={{ marginTop: 10, border: "none", color: "#241430", padding: 11, borderRadius: 8,
        fontWeight: 700, cursor: "pointer", background: accent }}>{submitText}</button>
    </form>
  );
}