Support form template

Free support request form
template, HTML and React.

Enough structure to answer quickly, without a ticketing system. A topic, an optional order reference and a priority sit above the message.

Use this template Preview the template

250 submissions/month free. No credit card required.

Preview, restyle and copy the code.

Preview only. Nothing is sent from this page.

Your support request form, ready to make your own.

The code includes the fields, the CSS for the style you chose and a hidden anti-spam field. Replace the placeholder endpoint with your own before publishing, or open it in the designer to change fields, colors and wording without touching code.

Customize in Form Koi

support-request-form.html

<style>
.formkoi-form, .formkoi-form * { box-sizing: border-box; }
.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #f6f7fb; color: #2b2d42; font: 16px/1.5 system-ui, sans-serif; border: 1px solid #2b2d4230; border-radius: 14px; }
.formkoi-form h2 { margin: 0 0 8px; font: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.formkoi-form > p { margin: 0 0 18px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.formkoi-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.formkoi-field--half { grid-column: span 1; }
.formkoi-fields label, .formkoi-fields legend { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.formkoi-fields input:not([type=checkbox]):not([type=radio]):not([hidden]), .formkoi-fields textarea, .formkoi-fields select { display: block; width: 100%; min-width: 0; padding: 12px; border: 1px solid transparent; border-radius: 14px; background: #2b2d4212; color: #2b2d42; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #2b2d4280; }
.formkoi-fields input[type=file] { padding: 10px; }
.formkoi-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.formkoi-choices legend { padding: 0; margin-bottom: 6px; }
.formkoi-choices label, .formkoi-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.formkoi-choices label + label { margin-top: 8px; }
.formkoi-choices input, .formkoi-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: #4f46e5; }
.formkoi-help { margin: 0; font-size: 13px; opacity: .75; overflow-wrap: anywhere; }
.formkoi-fields .cf-turnstile { grid-column: 1 / -1; }
.formkoi-fields button { grid-column: 1 / -1; justify-self: start; margin-top: 10px; padding: 12px 22px; border: 0; border-radius: 14px; background: #4f46e5; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }
.formkoi-fields button:hover { filter: brightness(.94); }
.formkoi-fields :focus-visible { outline: 2px solid #4f46e5; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="How can we help?">
<h2>How can we help?</h2>
<p>Tell us what happened and we’ll get back to you as soon as we can.</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
  <div class="formkoi-field formkoi-field--half">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="topic">Topic</label>
  <select id="topic" name="topic" required>
    <option value="">Choose one</option>
    <option value="An existing order">An existing order</option>
    <option value="A product question">A product question</option>
    <option value="Billing">Billing</option>
    <option value="Something else">Something else</option>
  </select>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="order_reference">Order reference</label>
  <input id="order_reference" name="order_reference" placeholder="Optional">
  </div>
  <fieldset class="formkoi-field formkoi-choices">
    <legend>Priority</legend>
    <label><input type="radio" name="priority" value="Normal" required> Normal</label>
    <label><input type="radio" name="priority" value="Urgent" required> Urgent</label>
  </fieldset>
  <div class="formkoi-field">
  <label for="message">What happened?</label>
  <textarea id="message" name="message" required></textarea>
  </div>

  <!-- Leave this hidden anti-spam field empty. -->
  <input type="text" name="botcheck"
    tabindex="-1" autocomplete="off" style="display:none" hidden>

  <button type="submit">Send request</button>
</form>
</section>

New to connecting a form? The HTML contact form guide and the React contact form guide walk through pointing any of these templates at your endpoint.

Fields in this support request form.

Topic and priority are choice fields, so you can route urgent requests to whoever is on duty. The order reference is optional and half width.

Label	Field name	Type	Required
Your name	`name`	Short text	Yes
Email address	`email`	Email	Yes
Topic	`topic`	Dropdown: An existing order, A product question, Billing, Something else	Yes
Order reference	`order_reference`	Short text	No
Priority	`priority`	Multiple choice: Normal, Urgent	Yes
What happened?	`message`	Long text	Yes

Field names are what arrive with each message and what routing rules match on. The email field is used for replies and auto-replies.

Make it yours in minutes.

Change fields without code

Open the template in the visual designer to add, remove or reorder fields, switch input types, and set labels, placeholders and help text.

Explore

Match your website

Pick a style preset, then adjust colors, typography, corners and spacing. Copy fresh HTML or a React component whenever you change it.

Connect one endpoint

Create a form, verify a recipient, and paste the code. Submissions land in your inbox with spam review, routing and delivery tracking.

Explore

Related templates.

Frequently asked questions

Support request form
questions.

Can I send an automatic confirmation?

Yes. Turn on Turnstile and auto-replies for the form, then add an unchecked consent checkbox. Visitors who tick it receive a confirmation email with your wording.

Where do requests go?

Every request lands in your Form Koi inbox and is emailed to verified recipients. Delivery status for each email is tracked separately.

Can customers attach screenshots?

Add a file upload field once uploads are enabled. Up to three files per request, five megabytes each.

Start with Form Koi Free

Start receiving
form submissions.

Use this template Read the quickstart

Free support request formtemplate, HTML and React.