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.
ExploreQuote request form template
Free quote request form
template, HTML and React.
A request-a-quote form that qualifies the lead before the first call. Visitors pick a service, a budget range and a timeline, then describe the project in their own words, so your reply can be an estimate instead of a list of questions.
250 submissions/month free. No credit card required.
Preview, restyle and copy the code.
Preview only. Nothing is sent from this page.
Your quote 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.
<style>
.formkoi-form, .formkoi-form * { box-sizing: border-box; }
.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #fffaf0; color: #483c32; font: 16px/1.5 Georgia, serif; border: 1px solid #483c3230; border-radius: 2px; }
.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 24px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.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: 0; border-bottom: 1px solid #483c3280; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; color: #483c32; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #483c3280; }
.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: #92452e; }
.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: 16px; padding: 12px 22px; border: 0; border-radius: 2px; background: #92452e; 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 #92452e; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="Tell us about your project.">
<h2>Tell us about your project.</h2>
<p>Share a few details and we’ll come back to you with a quote.</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="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">
</div>
<div class="formkoi-field formkoi-field--half">
<label for="company">Company</label>
<input id="company" name="company">
</div>
<div class="formkoi-field formkoi-field--half">
<label for="service">Service</label>
<select id="service" name="service" required>
<option value="">Choose one</option>
<option value="Website">Website</option>
<option value="Branding">Branding</option>
<option value="App">App</option>
<option value="Something else">Something else</option>
</select>
</div>
<div class="formkoi-field formkoi-field--half">
<label for="budget">Budget</label>
<select id="budget" name="budget" required>
<option value="">Choose one</option>
<option value="Under $5,000">Under $5,000</option>
<option value="$5,000–$15,000">$5,000–$15,000</option>
<option value="Over $15,000">Over $15,000</option>
</select>
</div>
<fieldset class="formkoi-field formkoi-choices">
<legend>Timeline</legend>
<label><input type="radio" name="timeline" value="As soon as possible" required> As soon as possible</label>
<label><input type="radio" name="timeline" value="Within 3 months" required> Within 3 months</label>
<label><input type="radio" name="timeline" value="Flexible" required> Flexible</label>
</fieldset>
<div class="formkoi-field">
<label for="message">Project details</label>
<textarea id="message" name="message" placeholder="Goals, pages, integrations, anything we should know." 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">Request a quote</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 quote request form.
Service and budget are dropdowns, so routing rules and reports get consistent values. Phone number and company are optional so they never block a request.
| Label | Field name | Type | Required |
|---|---|---|---|
| Your name | name | Short text | Yes |
| Email address | email | Yes | |
| Phone number | phone | Phone | No |
| Company | company | Short text | No |
| Service | service | Dropdown: Website, Branding, App, Something else | Yes |
| Budget | budget | Dropdown: Under $5,000, $5,000–$15,000, Over $15,000 | Yes |
| Timeline | timeline | Multiple choice: As soon as possible, Within 3 months, Flexible | Yes |
| Project details | 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.
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.
ExploreRelated templates.
Frequently asked questions
Quote request form
questions.
Can different services go to different people?
Yes. Recipient routing rules match on any field, so quotes for branding can reach a designer while website requests go to a developer.
Can visitors attach a brief?
Add a file upload field in the designer once uploads are enabled for the form, which is part of Pro. Attachments stay private and download from your inbox.
Do I have to use these budget ranges?
No. Change the options to your own ranges or currency. The values you choose are exactly what arrive with each request.
Should I use this or the contact form?
The contact form is three fields. This one adds service, budget and timeline so you can size the job before replying. If most enquiries are simple questions, start with the contact form and add fields later.
Start with Form Koi Free