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.
ExploreCallback request form template
Four fields and a button. For visitors who would rather talk than type, and for teams who close by phone.
250 submissions/month free. No credit card required.
Preview only. Nothing is sent from this page.
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: #ffffff; color: #233c34; font: 16px/1.5 system-ui, sans-serif; border: 1px solid #233c3430; border-radius: 8px; }
.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 20px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 15px; }
.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 #233c3470; border-radius: 8px; background: #ffffff; color: #233c34; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #233c3480; }
.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: #233c34; }
.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: 12px; padding: 12px 22px; border: 0; border-radius: 8px; background: #233c34; 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 #233c34; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="Request a callback.">
<h2>Request a callback.</h2>
<p>Leave your number and we’ll call you back.</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
<div class="formkoi-field">
<label for="name">Your name</label>
<input id="name" name="name" autocomplete="name" required>
</div>
<div class="formkoi-field">
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" required>
</div>
<div class="formkoi-field">
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">
</div>
<fieldset class="formkoi-field formkoi-choices">
<legend>Best time to call</legend>
<label><input type="radio" name="best_time" value="Morning" required> Morning</label>
<label><input type="radio" name="best_time" value="Afternoon" required> Afternoon</label>
<label><input type="radio" name="best_time" value="Evening" required> Evening</label>
</fieldset>
<div class="formkoi-field">
<label for="message">What’s it about?</label>
<input id="message" name="message">
</div>
<!-- Leave this hidden anti-spam field empty. -->
<input type="text" name="botcheck"
tabindex="-1" autocomplete="off" style="display:none" hidden>
<button type="submit">Call me back</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.
The phone field uses the tel type so mobiles show a number keypad. Best time is multiple choice so nobody has to guess your hours.
| Label | Field name | Type | Required |
|---|---|---|---|
| Your name | name | Short text | Yes |
| Phone number | phone | Phone | Yes |
| Email address | email | No | |
| Best time to call | best_time | Multiple choice: Morning, Afternoon, Evening | Yes |
| What’s it about? | message | Short text | No |
Field names are what arrive with each message and what routing rules match on. The email field is used for replies and auto-replies.
Open the template in the visual designer to add, remove or reorder fields, switch input types, and set labels, placeholders and help text.
ExplorePick a style preset, then adjust colors, typography, corners and spacing. Copy fresh HTML or a React component whenever you change it.
Create a form, verify a recipient, and paste the code. Submissions land in your inbox with spam review, routing and delivery tracking.
ExploreFrequently asked questions
Form Koi emails your recipients and can post to a webhook. Connect the webhook to a texting service if you want SMS alerts.
The point of the form is a phone number. Email is there for visitors who want a written follow-up too.
Yes. The form is a single column by default and its width follows its container.
Start with Form Koi Free