Copy-paste contact form examples for a simple message form, a support form with department routing, and a sales inquiry form — each one backed by Formigo so every submission lands in your inbox, Slack, or Google Sheets without writing a line of server code.
This guide focuses on the patterns and use cases behind good contact forms: what fields to include, which layout fits each scenario, and how to get submissions delivered wherever your team already works. For the full HTML and JavaScript wiring — honeypot, timestamp, fetch with error handling — see the HTML & JavaScript form guide. Framework-specific guides for React, Next.js, Vue, and Astro are linked at the bottom.
The best website contact forms are short, clear, and deliver submissions reliably. Here are the principles that separate forms people actually fill out from ones they abandon.
Name, email, and message cover most contact scenarios. Every extra field lowers completion. Add a subject or department only when routing genuinely requires it.
Use required and type="email" for browser-native validation. If you handle submission with JavaScript, show inline errors so users know exactly what to fix.
Always show a success state — a thank-you message, a redirect, or a toast. Without it, users resubmit and you get duplicates.
A honeypot field and a timestamp check stop the vast majority of bots with zero friction for real visitors. No CAPTCHA puzzle needed on most forms.
On delivery: even a perfectly designed form fails if submissions disappear. Formigo's form backend delivers every submission to your email, Slack, Discord, or Google Sheet the moment it arrives — no polling, no dashboard refresh required.
Three copy-paste patterns for the most common online contact form scenarios. Each POSTs directly to Formigo. Swap your-form for your actual form slug and you're live.
The baseline. Covers personal sites, portfolio pages, and any use case where you just want to hear from visitors.
<form action="https://formigo.io/f/your-form" method="POST">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<!-- Silent spam protection -->
<input type="text" name="_formigo_hp" value=""
style="display:none" tabindex="-1" autocomplete="off">
<input type="hidden" name="_formigo_t" value="">
<button type="submit">Send message</button>
</form>
<script>
document.querySelector('input[name="_formigo_t"]').value =
Math.floor(Date.now() / 1000);
</script>
When you need to triage incoming messages — billing questions to finance, technical issues to engineering — add a <select> field so every submission records the chosen department, ready to filter or forward on your end.
<form action="https://formigo.io/f/your-form" method="POST">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="department">Department</label>
<select id="department" name="department" required>
<option value="">Select a department</option>
<option value="sales">Sales</option>
<option value="billing">Billing</option>
<option value="technical">Technical support</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" required>
</div>
<div>
<label for="message">Describe your issue</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<!-- Silent spam protection -->
<input type="text" name="_formigo_hp" value=""
style="display:none" tabindex="-1" autocomplete="off">
<input type="hidden" name="_formigo_t" value="">
<button type="submit">Submit request</button>
</form>
<script>
document.querySelector('input[name="_formigo_t"]').value =
Math.floor(Date.now() / 1000);
</script>A multi-field form that captures company, role, and budget context so your sales team gets qualified leads rather than bare email addresses.
<form action="https://formigo.io/f/your-form" method="POST">
<div>
<label for="name">Full name</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Work email</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="company">Company</label>
<input type="text" id="company" name="company">
</div>
<div>
<label for="role">Your role</label>
<input type="text" id="role" name="role" placeholder="e.g. CTO, Product Manager">
</div>
<div>
<label for="team_size">Team size</label>
<select id="team_size" name="team_size">
<option value="">Select size</option>
<option value="1-10">1–10</option>
<option value="11-50">11–50</option>
<option value="51-200">51–200</option>
<option value="200+">200+</option>
</select>
</div>
<div>
<label for="message">How can we help?</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<!-- Silent spam protection -->
<input type="text" name="_formigo_hp" value=""
style="display:none" tabindex="-1" autocomplete="off">
<input type="hidden" name="_formigo_t" value="">
<button type="submit">Get in touch</button>
</form>
<script>
document.querySelector('input[name="_formigo_t"]').value =
Math.floor(Date.now() / 1000);
</script>Want the full wiring? The HTML & JavaScript form guide covers fetch-based submission, JSON payloads, 429 rate-limit handling, and accessibility patterns. Framework guides are below.
Every submission that arrives at your Formigo endpoint is stored and then forwarded to whichever destinations you configure. You can enable multiple channels on the same form at once.
Each submission arrives as a formatted email. Add multiple recipients so every stakeholder gets notified.
Post submissions directly to a Slack channel so your team sees new leads without leaving their workflow.
Route submissions to a Discord channel via a webhook. Useful for community-run projects and open-source teams.
Each submission appends a row to a spreadsheet — a simple CRM or leads log with no extra tooling.
POST submission data to your own endpoint, Zapier, or Make to trigger any downstream automation.
Configure channels in the Formigo dashboard. One form can deliver to email, Slack, and Google Sheets simultaneously — no extra code required.
Contact forms are a favourite target for bots. Formigo includes a layered spam-scoring system: a honeypot field, a timestamp check, optional CAPTCHA, and automatic rate limiting. The examples above already include the honeypot and timestamp fields — they cover most forms with zero impact on real visitors.
Honeypot
Hidden field bots fill; humans don't
Timestamp
Flags submissions under 2 seconds
Rate limiting
5 per IP per form every 10 min
For the full picture — CAPTCHA options (Cloudflare Turnstile, hCaptcha), spam scores, and how to review flagged submissions — see the spam protection guide.
Common questions about contact form examples, delivery, and spam handling.
At minimum, a contact form needs a name field, an email address field, and a message textarea. Support and sales forms often add a subject line or a department select so submissions can be routed to the right inbox. Keep it short: every extra field reduces completion rates.
Point the form's action attribute at a form backend endpoint such as https://formigo.io/f/your-form and set method to POST. Formigo receives the submission and forwards it to whichever email address, Slack channel, or Google Sheet you configured. No server code needed.
No. A plain HTML form with action and method POST works fine. Formigo accepts standard url-encoded form submissions without any JavaScript. If you want to avoid a full page reload or show a custom success message, you can use fetch or XMLHttpRequest to POST instead, but it is entirely optional.
Add a hidden honeypot field named _formigo_hp that must stay empty, and a hidden timestamp field named _formigo_t that JavaScript sets to the current Unix time when the page loads. Bots fill the honeypot or submit too quickly, triggering Formigo's spam scoring. Most contact forms need nothing more; an optional Cloudflare Turnstile or hCaptcha can be layered on for high-risk forms.
You choose. Formigo can deliver each submission to an email address, a Slack channel, a Discord channel, a Google Sheet, or a custom webhook. You can enable multiple destinations on the same form so the same submission lands in your inbox and in your team's Slack channel simultaneously.
Point your contact form at Formigo and submissions land in your email, Slack, or Google Sheets the moment they arrive. Free forever, no credit card required.
Start for freePlain HTML form with fetch, honeypot, and error handling.
Hooks-based contact form with controlled inputs and 429 handling.
App Router Client Component, Server Action, and Route Handler examples.
Vue 3 script-setup form with reactive state and spam protection.
Static Astro form with client-side fetch, no plugins needed.
Full guide: honeypot, timestamp, CAPTCHA, and rate limits.