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.
ExploreContact form template
Free contact form
template in HTML and CSS, or React.
The three fields most websites need: name, email and message. Preview it in five styles, copy the HTML and CSS or the React component, and connect it to Form Koi for submission storage, spam filtering and email notifications.
250 submissions/month free. No credit card required.
Preview, restyle and copy the code.
Preview only. Nothing is sent from this page.
Your contact 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: #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="Let’s talk.">
<h2>Let’s talk.</h2>
<p>Have a question or an idea? We’d love to hear from you.</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="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required>
</div>
<div class="formkoi-field">
<label for="message">Your message</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 message</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 contact form.
Three fields keep the form quick to fill in. The email field is named email, so replies use the visitor’s address. Automatic replies need separate setup, Turnstile and visitor consent.
| Label | Field name | Type | Required |
|---|---|---|---|
| Your name | name | Short text | Yes |
| Email address | email | Yes | |
| Your message | 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
Contact form
questions.
Does this contact form send email by itself?
No. HTML cannot send email. The form posts to a Form Koi endpoint, which stores the message, filters spam and emails your verified recipients.
Can I add more fields?
Yes. Add a phone number, dropdown or file upload in the visual designer, or edit the HTML directly. Every named field arrives with the message.
Is the template accessible?
Every input has a visible label connected with for and id, focus states are visible, and the layout collapses to one column on small screens.
How do I connect it to my email?
Create a free form, verify the address that should receive messages, and replace the placeholder action URL with your form’s endpoint. The quickstart walks through each step.
Start with Form Koi Free