Service request form template

    What needs doing, where, how urgently and how to get in — for repairs, installs and maintenance.

    Reviewed by Ritu Fadadu · Last reviewed

    Customize in the generatorGet a free endpoint

    Preview and code

    Preview

    How urgent is it?

    Gate codes, parking, pets — anything the technician should know.

    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">Name</label>
    <input type="text" id="fb-name" name="name" class="fb-input" required autocomplete="name">
  </div>
  <div class="fb-field fb-field--half">
    <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-phone" class="fb-label">Phone</label>
    <input type="tel" id="fb-phone" name="phone" class="fb-input" required autocomplete="tel">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-service" class="fb-label">Type of service</label>
    <select id="fb-service" name="service" class="fb-input" required>
      <option value="">Choose…</option>
      <option value="repair">Repair</option>
      <option value="installation">Installation</option>
      <option value="maintenance">Maintenance</option>
      <option value="inspection">Inspection</option>
      <option value="other">Other</option>
    </select>
  </div>
  <div class="fb-field">
    <label for="fb-address" class="fb-label">Service address</label>
    <textarea
      id="fb-address"
      name="address"
      class="fb-input"
      required
      autocomplete="street-address"
      rows="3"
    ></textarea>
  </div>
  <fieldset class="fb-field fb-fieldset">
    <legend class="fb-label">How urgent is it?</legend>
    <div class="fb-options">
      <label class="fb-option">
        <input type="radio" name="urgency" value="routine" class="fb-check" required>
        <span>Routine</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="urgency" value="within-a-few-days" class="fb-check" required>
        <span>Within a few days</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="urgency" value="emergency" class="fb-check" required>
        <span>Emergency</span>
      </label>
    </div>
  </fieldset>
  <div class="fb-field fb-field--half">
    <label for="fb-preferred_date" class="fb-label">
      Preferred date
      <span class="fb-optional">(optional)</span>
    </label>
    <input type="date" id="fb-preferred_date" name="preferred_date" class="fb-input">
  </div>
  <div class="fb-field">
    <label for="fb-description" class="fb-label">Describe the problem or the work needed</label>
    <textarea id="fb-description" name="description" class="fb-input" required rows="4"></textarea>
  </div>
  <div class="fb-field">
    <label for="fb-access" class="fb-label">
      Access notes
      <span class="fb-optional">(optional)</span>
    </label>
    <textarea
      id="fb-access"
      name="access"
      class="fb-input"
      aria-describedby="fb-access-help"
      rows="2"
    ></textarea>
    <p id="fb-access-help" class="fb-help">
      Gate codes, parking, pets — anything the technician should know.
    </p>
  </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 service request">
  <button type="submit" class="fb-button">Request service</button>
</form>

    About this template

    A service request is a job to schedule, not a question to answer. This template collects what a technician needs before turning up: the type of work, the address, how urgent it is, a preferred date and anything about access — a gate code, a dog, a parking permit.

    Urgency is three levels, with an explicit emergency option, so you can see at a glance which requests cannot wait. The phone number is required here, unlike most templates, because service work usually needs a call on the day.

    It is a request, not a booking: the preferred date is a preference, and you confirm the visit. Say on the page how quickly you respond, and what someone should do in a genuine emergency — a form is not the right channel for a burst pipe at midnight.

    Fields in this template

    FieldNameTypeRequiredWhy it is there
    NamenameShort textYesRequired.
    EmailemailEmailYesRequired, for the confirmation.
    PhonephonePhoneYesRequired here: service visits usually need a call on the day.
    Type of serviceserviceDropdownYesRequired dropdown — decides who goes and how long to book.
    Service addressaddressLong textYesRequired, with the street-address autofill hint.
    How urgent is it?urgencySingle choiceYesRequired, three levels so emergencies stand out.
    Preferred datepreferred_dateDateNoOptional preference, not a booking.
    Describe the problem or the work neededdescriptionLong textYesRequired. What is wrong, or what needs doing.
    Access notesaccessLong textNoOptional notes that save a wasted trip.

    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

    • Add a property_type dropdown (home, office, rental) if it changes who you send.
    • Mark the preferred date required if you schedule everything a day ahead.
    • Point a custom redirect at a page with your emergency phone number and response times.
    • If you cover a limited area, ask for the postcode first and say on the page which areas you serve, so out-of-area requests are not left waiting for an answer that will be no.

    Where the submissions go

    • Each request is stored and emailed to you, with the urgency in the field table.
    • Send requests to a dispatch channel on Telegram or Slack, on any plan, so emergencies are seen quickly.
    • On Starter and above, pass requests to a job-management tool with a webhook or Zapier, and confirm receipt with Auto Reply.

    Contact Forms: 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 service request form live

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

    Get a free endpointOpen the form generator