Quote request form template

    Service, budget range, timeline and the brief — enough to reply with a real number.

    Reviewed by Ritu Fadadu · Last reviewed

    Customize in the generatorGet a free endpoint

    Preview and code

    Preview

    Budget

    Code — replace YOUR_ENDPOINT_ID with your form's ID

    <style>
  .fb-form { display: grid; gap: 1rem; max-width: 36rem; }
  .fb-field { display: flex; flex-direction: column; gap: 0.375rem; }
  .fb-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  .fb-label { font-weight: 600; }
  .fb-optional { font-weight: 400; color: #6b7280; }
  .fb-help { margin: 0; font-size: 0.875rem; color: #6b7280; }
  .fb-input { box-sizing: border-box; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: #111827; font: inherit; }
  .fb-input:focus { border-color: #2563eb; outline: 2px solid #2563eb; outline-offset: 1px; }
  .fb-options { display: flex; flex-direction: column; gap: 0.5rem; }
  .fb-option { display: flex; align-items: center; gap: 0.5rem; }
  .fb-check { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: #2563eb; }
  .fb-button { justify-self: start; min-height: 44px; padding: 0.625rem 1.25rem; border: 0; border-radius: 0.5rem; background: #2563eb; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  .fb-button:hover { background: #1d4ed8; }
  .fb-button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  .fb-button:disabled { opacity: 0.6; cursor: wait; }
  .fb-status { margin: 0; min-height: 1.5em; }
  @media (min-width: 640px) {
    .fb-form { grid-template-columns: 1fr 1fr; }
    .fb-field, .fb-button, .fb-status { grid-column: 1 / -1; }
    .fb-field--half { grid-column: auto; }
  }
</style>

<form id="fb-form" class="fb-form" action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
  <div class="fb-field fb-field--half">
    <label for="fb-name" class="fb-label">Your name</label>
    <input type="text" id="fb-name" name="name" class="fb-input" required autocomplete="name">
  </div>
  <div class="fb-field">
    <label for="fb-email" class="fb-label">Email</label>
    <input type="email" id="fb-email" name="email" class="fb-input" required autocomplete="email">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-company" class="fb-label">
      Company
      <span class="fb-optional">(optional)</span>
    </label>
    <input type="text" id="fb-company" name="company" class="fb-input" autocomplete="organization">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-service" class="fb-label">What do you need?</label>
    <select id="fb-service" name="service" class="fb-input" required>
      <option value="">Choose…</option>
      <option value="website">Website</option>
      <option value="web-app">Web app</option>
      <option value="mobile-app">Mobile app</option>
      <option value="branding">Branding</option>
      <option value="something-else">Something else</option>
    </select>
  </div>
  <fieldset class="fb-field fb-fieldset">
    <legend class="fb-label">Budget</legend>
    <div class="fb-options">
      <label class="fb-option">
        <input type="radio" name="budget" value="under-5-000" class="fb-check" required>
        <span>Under $5,000</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="budget" value="5-000-15-000" class="fb-check" required>
        <span>$5,000–$15,000</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="budget" value="15-000-50-000" class="fb-check" required>
        <span>$15,000–$50,000</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="budget" value="over-50-000" class="fb-check" required>
        <span>Over $50,000</span>
      </label>
    </div>
  </fieldset>
  <div class="fb-field">
    <label for="fb-timeline" class="fb-label">
      When do you need it?
      <span class="fb-optional">(optional)</span>
    </label>
    <select id="fb-timeline" name="timeline" class="fb-input">
      <option value="">Choose…</option>
      <option value="as-soon-as-possible">As soon as possible</option>
      <option value="within-3-months">Within 3 months</option>
      <option value="3-6-months">3–6 months</option>
      <option value="just-exploring">Just exploring</option>
    </select>
  </div>
  <div class="fb-field">
    <label for="fb-details" class="fb-label">Tell us about the project</label>
    <textarea id="fb-details" name="details" class="fb-input" required rows="5"></textarea>
  </div>
  <!-- Honeypot: keep it hidden. People never see it; bots fill it in and get flagged as spam. -->
  <div
    aria-hidden="true"
    style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden"
  >
    <label for="fb-honey">Leave this field empty</label>
    <input type="text" id="fb-honey" name="_honey" tabindex="-1" autocomplete="off">
  </div>
  <input type="hidden" name="_subject" value="New quote request">
  <button type="submit" class="fb-button">Request a quote</button>
</form>

    About this template

    A quote request is a lead that has already told you what they want. This template asks the three questions that decide whether you can help — which service, what budget, how soon — before the free-text brief, so the most useful information is at the top of every notification.

    The budget is a set of ranges, not an open number box. People answer ranges more readily, and every submission lands in one of four buckets you can sort by in the export.

    Because the lead's address is named email, you can reply straight from the notification in plain HTML too, by switching the reply-to option in the generator; the HTML + JS and React versions set the reply-to for you.

    Fields in this template

    FieldNameTypeRequiredWhy it is there
    Your namenameShort textYesRequired.
    EmailemailEmailYesRequired, named email for Auto Reply and the reply-to.
    CompanycompanyShort textNoOptional; useful context for B2B work.
    What do you need?serviceDropdownYesRequired dropdown — the first thing you triage on.
    BudgetbudgetSingle choiceYesRequired ranges, so every lead sorts into a bucket.
    When do you need it?timelineDropdownNoOptional; separates urgent work from early research.
    Tell us about the projectdetailsLong textYesRequired. The brief itself.

    Each name becomes a column in your dashboard and a row in the notification email. The hidden _honey field is the honeypot; _subject sets the email's subject line. Both are reserved fields and never appear in the field table.

    Make it yours

    • Edit the budget ranges to match your pricing; keep four or five so each bucket means something.
    • Add a hidden source field per landing page to see which page brings the leads that convert.
    • Remove the timeline question if every project you take is urgent — shorter forms convert better.
    • Add a phone field only if you actually call leads back. Every extra required field is one more reason to leave the form half-finished, and the email address is already enough to reply with a quote.

    Where the submissions go

    • Each request is stored and emailed to you. With the HTML + JS or React version, hitting reply in your inbox answers the lead directly.
    • Get leads in front of the team instantly in Slack or Telegram, on any plan.
    • On Starter and above, push each lead into a CRM through a webhook or Zapier, and acknowledge it with Auto Reply.

    Lead Generation: plans, destinations and a worked setup →

    Before you publish it

    1. Create a form in the Formboost dashboard and replace YOUR_ENDPOINT_ID with its ID.
    2. Pick one variant: HTML posts and reloads, HTML + JS and React send JSON with fetch() and stay on the page.
    3. For the plain HTML version, add a hidden _redirect with an https:// thank-you page on the same site as the form — anything else falls back to Formboost's page.
    4. Submit it once from the live page and check the submission in your dashboard. Every request is acknowledged, so the dashboard is the real test. Troubleshooting covers the rest.

    More form templates

    Put the quote request form live

    Free forever: 500 submissions a month across 10 forms, no card.

    Get a free endpointOpen the form generator