splitforms.com
LEAD CAPTURE · CONTACT FORM TEMPLATE

Raw HTML Contact Form (no CSS, no JavaScript)

A working HTML contact form with no CSS, no JavaScript, no framework — just semantic markup and an action URL. Use as a starting point or for accessibility audits.

1,000/mo free·no card·works on any host
form.htmlhtml22 lines
01<form action="https://splitforms.com/api/submit" method="POST">
02 <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
03 <input type="hidden" name="subject" value="New contact form submission">
04
05 <label for="name">Full name *</label>
06 <input id="name" type="text" name="name" placeholder="Jane Builder" required>
07 <label for="email">Email *</label>
08 <input id="email" type="email" name="email" placeholder="jane@example.com" required>
09 <label for="phone">Phone *</label>
10 <input id="phone" type="tel" name="phone" placeholder="+1 415 555 0142" required>
11 <label for="message">Message *</label>
12 <textarea id="message" name="message" placeholder="How can we help?" required></textarea>
13
14 <!-- honeypot — bots fill every field -->
15 <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
16
17 <button type="submit">Send</button>
18</form>
19
20<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
21 Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
22</p>
1,000
submissions / mo, free
4
fields, ready to ship
5
code outputs
60s
from copy to inbox
§ 01Why it mattersthe qualifying-fields argument

Most contact-form tutorials front-load CSS and JavaScript before the underlying HTML is correct. The bare-HTML version is the right starting point — semantic <label> + <input> pairs, native validation attributes, a real <button type="submit">. Style it later. The raw version is also useful for accessibility audits — if it works with no CSS, your form is structurally sound.

Semantic HTML, zero CSS, zero JavaScript — the right starting point.
✦ at a glance
  • Basic contact form · 4 fields
  • HTML, JS, React, PHP, cURL outputs
  • One POST endpoint, no SDK
  • Honeypot + classifier, no CAPTCHA
§ 02Live previewinteractive · sandboxed · no key required

See exactly what your visitors see — and you’ll receive.

Left: the rendered form, fully interactive in a sandboxed iframe. Right: the email and dashboard view that lands the moment a visitor submits.

preview · raw-contact-form-no-csslocalhost:3000
✦ what you’ll see in your inbox

Every submission becomes an email plus a dashboard row. The fields below are the exact payload your form will send. Reply-to is wired to the visitor’s email so hitting reply goes back to them.

dashboard · new submission14ms · 200 OK
SUBJECT · New contact form submission
Full name
Maya Iyer
Email
maya@studio71.co
Phone
+1 415 555 0142
Message
Loved your last open house in Hayes — looking for similar with parking. Pre-approved through Wells Fargo.

Iframe is sandboxed — submit doesn’t actually fire. Get your access key to wire it up live.

§ 03Three steps3 steps · ~60 seconds

Generate, embed, receive.

Three actions stand between you and your first lead. None of them require a backend, a database, or a CAPTCHA library.

STEP 01GENERATE

Use semantic HTML

Every input has a <label> with `for` matching the input's id. Inputs use native types: text, email, tel, url. Required fields have `required`. The button is `<button type="submit">`, not a div with onclick.

Create your form
key=sk_live_••••••••
STEP 02EMBED

Add the splitforms action

Set `action="https://splitforms.com/api/submit"` and `method="POST"`. The form works as plain HTML — no JavaScript, no fetch, no AJAX.

snippethtml
<form action="https://splitforms.com/api/submit" method="POST">
  …
</form>
STEP 03RECEIVE

Style later

Once the bare HTML is correct, add CSS. Tailwind, plain CSS, CSS-in-JS — all of them work because the markup is semantic.

inbox · 1 newjust now
FROM contact@yoursite.com
New contact form submission
Maya Iyer maya@studio71.co
Loved your last open house in Hayes — looking for similar with parking. Pre-approved through Wells Fargo.
§ 04Copy & ship5 languages · same endpoint

Five outputs. One backend.

HTML by default. Click open the language you ship in — every variant POSTs to the same /api/submit endpoint.

01HTMLform.html22 lines
<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 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>
02JavaScriptform.js38 lines
<form id="lf-form">
  <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>
  <button type="submit">Send</button>
</form>

<p 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>

<script>
  document.getElementById('lf-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New contact form submission');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    if (json.success) {
      e.target.reset();
      alert('Sent!');
    } else {
      alert('Error: ' + (json.message || 'Try again'));
    }
  });
</script>
03React / Next.jsForm.tsx53 lines
'use client';

import { useState, type FormEvent } from 'react';

export default function BasicForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');

    const data = new FormData(e.currentTarget);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New contact form submission');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    setStatus(json.success ? 'sent' : 'error');
    if (json.success) e.currentTarget.reset();
  }

  if (status === 'sent') return <p>Thanks — we&rsquo;ll be in touch.</p>;

  return (
    <>
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Full name *</label>
      <input id="name" type="text" name="name" placeholder="Jane Builder" required />
      <label htmlFor="email">Email *</label>
      <input id="email" type="email" name="email" placeholder="jane@example.com" required />
      <label htmlFor="phone">Phone *</label>
      <input id="phone" type="tel" name="phone" placeholder="+1 415 555 0142" required />
      <label htmlFor="message">Message *</label>
      <textarea id="message" name="message" placeholder="How can we help?" required />

      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send'}
      </button>

      {status === 'error' && <p>Something went wrong. Try again.</p>}
    </form>

      <p style={{ marginTop: 12, fontSize: 11, color: '#888', textAlign: 'right' }}>
        Powered by <a href="https://splitforms.com" target="_blank" rel="noopener" style={{ color: '#888', textDecoration: 'none' }}>splitforms</a>
      </p>
    </>
  );
}
04PHPsubmit.php28 lines
<?php
// Drop into a PHP page. Receives a form POST and proxies it to splitforms.com.
// Useful when you want to add server-side validation or rate limiting.

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $allowed = ['name', 'email', 'phone', 'message'];
    $payload = ['access_key' => 'YOUR_ACCESS_KEY'];
    $payload['subject'] = 'New contact form submission';

    foreach ($allowed as $f) {
        if (isset($_POST[$f])) $payload[$f] = $_POST[$f];
    }

    $ch = curl_init('https://splitforms.com/api/submit');
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($payload));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Accept: application/json']);
    $response = curl_exec($ch);
    $status   = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    header('Content-Type: application/json');
    http_response_code($status);
    echo $response;
    exit;
}
?>
05cURLtest.sh8 lines
curl -X POST https://splitforms.com/api/submit \
  -H "Accept: application/json" \
  -d "access_key=YOUR_ACCESS_KEY" \
  -d "subject=New contact form submission" \
  -d "name=Jane Builder" \
  -d "email=jane@example.com" \
  -d "phone=+15555555555" \
  -d "message=Hello from cURL" 

Replace YOUR_ACCESS_KEY with the key from your dashboard. That’s the only edit.

§ 04bUse this template with…25 frameworks · same backend

One template. Every framework.

The same field set works on every framework splitforms supports. HTML, React, Next.js, Vue, Astro, Hugo, WordPress — same POST, same backend.

§ 06FAQ4 answered

Things people ask before they ship.

Direct answers, no marketing fluff. Missing one? Email hello@splitforms.com.

01Why start with raw HTML?
Three reasons. (1) Forms must work without JavaScript — progressive enhancement starts from a working baseline. (2) Accessibility is structural — if the bare HTML isn't right, no amount of ARIA fixes it. (3) Debugging is easier — when you can see the form working without styling, you know any later issues are visual, not behavioral.
02Does it work in old browsers?
Yes. Plain <form action method=POST> has worked in every browser since Mosaic. Modern attributes (required, type=email) gracefully degrade in browsers that don't support them — the form still submits, just without native validation.
03What about email validation?
Use type="email" on the input. Modern browsers validate the format natively (must contain @, must have a TLD). For more strict validation, splitforms validates server-side anyway and rejects malformed addresses.
04Can I add CSS without breaking semantics?
Yes — CSS doesn't change HTML semantics. Style the form however you want; the labels still associate with inputs, the button still submits, the validation still fires.
✻ ✻ ✻

Ship your raw html contact form (no css, no javascript) in 60 seconds.

1,000 free submissions per month. No credit card. Copy the snippet, paste your access key, watch leads land in your inbox.

Get free access key →Browse all 67 templates →
v0.1 · founders pricing locked in · early access open