splitforms.com
Get free key

Form template · Basic contact form

Dark Mode Contact Form Template

A contact form that respects the visitor's OS dark-mode preference automatically. Pure CSS, no JavaScript theme switcher, no library — uses prefers-color-scheme media queries.

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 dark mode 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

Multi-Step Form Template

Use this template

No backend code

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

Copy and ship

Your Dark Mode 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 Dark Mode 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.

Define color tokens

Set --bg, --ink, --line, --accent in :root. These are your light-mode values.

Override for dark mode

Inside @media (prefers-color-scheme: dark), redefine the same tokens with dark-friendly values. Every color in your form references the tokens, so the whole thing flips.

(Optional) Add a manual toggle

If you want a manual override, add a `data-theme` attribute on `<html>` and additional CSS selectors. Most sites don't need this — system preference is enough.

Create your formBrowse all templates

What's included

What's included.

OS-level dark mode is the standard in 2026 — every modern browser supports prefers-color-scheme and most visitors have a preference set. A contact form that respects that preference looks polished without any JavaScript or theme-toggle UI. The trick is using CSS custom properties for color tokens and a single @media (prefers-color-scheme: dark) override. Native OS dark mode, no JS, no theme library.

  • 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 Dark Mode 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 Dark Mode 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
Will the dark version work in older browsers?

prefers-color-scheme has been supported since 2018 (Chrome 76, Firefox 67, Safari 12.1). Older browsers see the light theme — which is the safe fallback.

How do I support both system preference AND a manual toggle?

Use a `data-theme="dark"` attribute on `<html>` and write `[data-theme="dark"]` selectors. Default to system preference, override on user action. Persist the choice in localStorage.

Does Tailwind support this pattern?

Yes — Tailwind ships a `dark:` variant. Either base it on system preference (`darkMode: 'media'` in config) or on a class (`darkMode: 'class'`). Both work with splitforms.

What about accessibility for low-contrast issues?

Hit WCAG AA on both themes — at least 4.5:1 for body text, 3:1 for large text. Use a contrast checker on every color combination. Dark mode is where most accessibility bugs hide because designers test light-mode first.

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