splitforms.com
Get free key

Form template · Basic contact form

AJAX Contact Form Template

A contact form that POSTs via fetch() and updates the DOM inline. No page reload, no jQuery dependency, no framework — just HTML + 15 lines of vanilla JS pointed at splitforms.

Use this template — freeSee setup steps
  • 500 free total
  • No PHP · no SDK
  • One POST endpoint
Live template preview

This template is one of our free HTML form templates. See more form templates by industry.

Pick your ajax contact form — 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 match

Free HTML Contact Form Template

Use this template

Minimal contact form

Use this template

Phone Number Input Form Template

Use this template

No backend code

No server, API route, or SDK — your AJAX Contact Form 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 AJAX Contact Form snippet, swap in your access key, and ship.

Copy and ship

Your AJAX Contact Form, 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.

Use this template — free
form.html
<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 AJAX Contact Form 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.

Paste the form HTML

Standard form markup — no `data-` attributes, no framework-specific syntax. The form doesn't even need a method or action because JavaScript intercepts the submit.

Add the fetch handler

Listen for submit, prevent default, FormData(form) → fetch POST to splitforms. The response JSON tells you whether to show success or error UI.

Style the four states

idle / loading / ok / err. Toggle classes or render different text — that's the whole UX.

Create your formBrowse all templates

What's included

What's included.

Inline submission feedback (no page reload) is the conversion-rate standard in 2026. You don't need jQuery, axios, or a framework to do it — fetch() plus FormData has been baseline browser support for years. The trick is wiring it to a backend that returns clean JSON. splitforms's `/api/submit` returns `{ success: true, message: "..." }` on success and a structured error otherwise, so your status state machine is four lines of code. Inline submission, four-state status, zero dependencies.

  • 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
What's included with the AJAX Contact Form Template

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
Spam-filtered submissions from the AJAX Contact Form Template

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.

A SplitForms contact form submission launching straight to your inbox

Add your endpoint

Point your form to your unique SplitForms endpoint. That's it.

HTML form pointing at a SplitForms submit endpoint

Receive submissions

We instantly capture and organize every submission in your inbox.

Submissions inbox with searchable leads and status pills

Route anywhere

Send data to email, spreadsheets, CRMs, webhooks, and 7,000+ apps.

Generic integration tiles for email, sheets, chat, CRM, automate, and webhook
Start FreeRead the Docs

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.

Connect your SplitForms form to Slack, Google Sheets, Mailchimp, Zapier and more
StripePaymentsDiscordMessagingTelegramMessagingGoogle SheetsSpreadsheetNotionDatabaseMailchimpEmailMakeAutomationWebhookCustomWordPressPlatformShopifyPlatformFramerPlatformNext.jsFrameworkHTMLFramework
SlackMessagingWhatsAppMessagingTeamsMessagingAirtableDatabaseHubSpotCRMZapierAutomationn8nAutomationMCP / AIAgentsElementorPlatformWebflowPlatformCarrdPlatformReactFramework
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 →
View all integrations →

Setup guides for the stacks you use

HTMLReactNext.jsAstroWebflowWordPress

Questions

Frequently asked questions.

View all FAQs
Why not just use jQuery's $.ajax?

jQuery's ajax was the standard 10 years ago. fetch() has been native since Chrome 42 / Firefox 39 and removes a 90KB dependency. The syntax is also cleaner — `await fetch(url, { method: 'POST', body: formData })` is one line.

Do I need a Content-Type header?

No — fetch with a FormData body sets `multipart/form-data` automatically, including the boundary string. If you set Content-Type manually you'll break the boundary.

How do I handle CORS errors?

splitforms's /api/submit endpoint sends `Access-Control-Allow-Origin: *` so cross-origin POSTs from any frontend work without preflight gymnastics. If you see a CORS error, check that you're using `method: 'POST'` (uppercase) and a FormData body, not a JSON body with custom headers.

What about progress events for file uploads?

fetch doesn't support upload progress yet — use XMLHttpRequest if you need it. For typical contact forms (no files or small files), the submission is fast enough that a 'loading…' label is enough feedback.

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
 

No card, no time limit

Best for testing

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
Get Started
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
Best value

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