Use HTML5 validation attributes
required for non-empty, type='email' for email format, pattern='\d{6}' for codes, minlength / maxlength for bounds. These give you free error states with no JS.
Form template · Basic contact form
Contact Form with Validation Example
Form validation that shows errors as the user types, not after they hit submit. Native HTML5 validation plus a tiny script to surface error messages inline.
- 500 free total
- No PHP · no SDK
- One POST endpoint
Live template preview
Basic contact form
Full name *Jane Builder
Email *jane@example.com
Phone *+1 415 555 0142
Message *How can we help?
Send
This template is one of our free HTML form templates. See more form templates by industry.
Overview
A stray typo in an email address is a lead you can never reply to, so on a contact form the validation matters as much as the fields themselves. SplitForms is just an endpoint your plain HTML <form> posts to (https://splitforms.com/api/submit, with a hidden access_key input), and it ships zero JavaScript to your page — so the validation lives entirely in your own markup. HTML5 attributes like required, type="email", and pattern make the browser block a malformed submission before the POST ever fires, no validation library needed. A hidden honeypot field plus a rule-based content filter then screen the spam that clears the browser check, without ever putting a CAPTCHA in front of a real visitor.
Pick your contact form with validation — one click to use it
Every template is free and fully editable in the drag-drop builder — swap fields, colors, and the button label before you publish.
Best matchUse this template
Free HTML Contact Form Template
Basic contact form
Full name *Jane Builder
Email *jane@example.com
Phone *+1 415 555 0142
+ 1 more fields in the builder
Send
Phone Number Input Form Template
Detailed contact form
Full name *Jane Builder
Work email *jane@company.com
Phone *+1 415 555 0142
+ 3 more fields in the builder
Send
Contact Form with File Upload Template
Quote request
Name *Jane Builder
Email *jane@example.com
Phone *+1 415 555 0142
+ 3 more fields in the builder
Send
No backend code
No server, API route, or SDK — your Contact Form with Validation posts straight to one endpoint.
Straight to your inbox
Every submission is emailed to you and saved to a searchable dashboard — spam filtered before it reaches you.
Copy-paste ready
It's plain HTML you own — paste the Contact Form with Validation snippet, swap in your access key, and ship.
Copy and ship
Your Contact Form with Validation, ready to paste.
HTML by default — the same field set also renders as React, Next.js, PHP, and cURL in your dashboard. Every variant posts to the same /api/submit endpoint. Replace YOUR_ACCESS_KEY with the key from your dashboard; that's the only edit.
<form action="https://splitforms.com/api/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="hidden" name="subject" value="New contact form submission">
<label for="name">Full name *</label>
<input id="name" type="text" name="name" placeholder="Jane Builder" required>
<label for="email">Email *</label>
<input id="email" type="email" name="email" placeholder="jane@example.com" required>
<label for="phone">Phone *</label>
<input id="phone" type="tel" name="phone" placeholder="+1 415 555 0142" required>
<label for="message">Message *</label>
<textarea id="message" name="message" placeholder="How can we help?" required></textarea>
<!-- honeypot — bots fill every field -->
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
<button type="submit">Send</button>
</form><p class="splitforms-attribution" style="margin-top:12px;font-size:11px;color:#888;text-align:right">
Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
</p>
<!-- drop-off analytics + partial leads (the form works without it) -->
<script src="https://splitforms.com/embed.js" async></script>How to add it
How to add this form to your site.
To add a Contact Form with Validation to your site you need three things: a free splitforms access key, the HTML snippet above, and your key pasted into it. No backend, database, or CAPTCHA library — the form posts to one URL and every submission lands in your inbox and dashboard.
Style :invalid with CSS
input:invalid:not(:placeholder-shown) { border-color: red; }. That single rule turns inputs red the moment they're invalid — but only after the user has typed (placeholder-shown trick).
Custom messages in JS
Listen for 'invalid' events and call setCustomValidity('Friendlier error') to override the browser's default message. Polished forms personalise every error.
What's included
What's included.
Showing 'Please fill out this field' after the user submits is a worse UX than catching the error as they type. HTML5 has built-in validation primitives (required, type='email', pattern) that work in every browser — combined with the :invalid CSS pseudo-class, you get inline error indicators with zero JavaScript. Add ~20 lines of JS for custom messages and you have a production-quality validation pattern.
- Basic contact form — 4 ready-made fields
- HTML, JS, React, PHP, and cURL outputs
- One POST endpoint, no SDK — honeypot and spam scoring, no CAPTCHA
Where submissions go
Where submissions go.
Reply-to is wired to the visitor's email, so one tap on Reply answers them directly — while the built-in honeypot and automatic spam scoring filter out bots before they reach you. Every submission is emailed to your inbox and can forward to a webhook or Slack the moment a visitor hits send.
- Reply-to wired to the visitor's email — reply straight from your inbox
- Honeypot and automatic spam scoring filter bots, no CAPTCHA friction
- Live dashboard, CSV export, and signed webhooks on paid plans
How SplitForms works
What happens after someone submits your form?
splitforms receives the submission, filters spam, saves it to your dashboard and emails you — then, on paid plans, sends it on to your webhooks and integrations. No backend infrastructure to build.
Add your endpoint
Point your form to your unique SplitForms endpoint. That's it.
Receive submissions
We instantly capture and organize every submission in your inbox.
Route anywhere
Send data to email, spreadsheets, CRMs, webhooks, and 7,000+ apps.
No credit card required. Set up in under 60 seconds.
Connect & automate
Where can submissions go besides email?
On paid plans, submissions can also go to Slack, Discord, Google Sheets, Notion, Airtable, Zapier or any signed webhook — and splitforms works on the platforms you build on, from WordPress and Shopify to Next.js. With Stripe connected, your forms can take payments too.
NewTake payments on your formsDeposits, bookings, order forms — submitters check out through Stripe and the money goes straight to your Stripe account. Included on every paid plan.See payment forms →Need time slots? Online booking →Questions
Frequently asked questions.
View all FAQsHow do I validate the email field before it posts to SplitForms?
Add type="email" and required to the input. The browser's own constraint check refuses to submit until the value is a well-formed address, so the POST to https://splitforms.com/api/submit only fires on valid data. The endpoint stores whatever fields you send it and runs no validation of its own — so getting the rules right in your markup is the whole job.
Do I need a JavaScript validation library on a SplitForms contact form?
No. SplitForms adds no script to your page, so nothing competes with the browser's native constraint validation — required, type="email", pattern, minlength, and maxlength cover nearly every contact-form rule with zero JavaScript. Reach for a few lines of script only for things HTML5 can't express, like confirming two fields match or replacing the browser's default error bubble with a styled inline message.
Do empty or invalid submissions count against my 500 free submissions?
No. Native validation blocks empty and malformed forms in the browser, so they never POST and never reach your count. Bots that skip the browser and post directly trip the hidden honeypot or get flagged by the rule-based content filter before landing — so your 500 free submissions fill up with real, validated inquiries in your dashboard, not junk.
How do I show a custom validation message instead of the browser's default?
Add a title attribute next to a pattern to feed the browser's native error bubble a hint, or call setCustomValidity() in a few lines of JavaScript for fully custom text and styling. It's all front-end: SplitForms only responds after a valid POST reaches the endpoint, so the entire validation experience is yours to design.
Do I need a validation library like Zod?
Only if you're doing complex business-logic validation (cross-field rules, async checks against a database). For 'this field is required' and 'this is a valid email', native HTML5 + CSS handles it without dependencies.
Does Tailwind CSS make this easier?
Tailwind's peer-modifier and invalid: variants let you style validation states directly in your markup with no separate stylesheet. We have a Tailwind variant in the dashboard once you sign up.
How do I show server-side errors?
splitforms returns JSON with { success: false, message: '...' } on validation failure. Render that message above the form. For per-field errors, the message specifies the field name.
Simple pricing
How much does splitforms cost?
Free gives you 500 submissions for $0 — no card, no time limit. Pro is $5/month for 5,000 submissions a month, and Annual is $49/year for 15,000 a month with every Pro feature.
Free
$0— 500 submissions
For side projects and indie devs.
- 500 free submissions
- Unlimited forms
- Email notifications included
- Smart spam filtering
- Submissions dashboard
- Redirect after submit
- MCP server included
Recommended
Pro
$5/ month
Billed monthly
Every paid feature, for agencies and growing products.
- 5,000 submissions per month
- Unlimited forms
- Webhooks and integrations
- CC/BCC, auto-replies and routing
- File uploads with 500 MB storage
- Stripe payments on your forms
- 3 team seats
- Cancel anytime
Annual
$49/ year
About $4.08 per month, billed yearly
Every Pro feature with triple the volume — $0.27 per 1,000 at full use.
- 15,000 submissions per month
- Unlimited forms
- Everything in Pro
- File uploads with 5 GB storage
- 3 team seats
- Priority email support
No credit card required on Free • Cancel anytime • Full pricing and FAQ