Dark Mode Contact Form
A contact form that adapts to the visitor's system theme automatically. Uses CSS custom properties and prefers-color-scheme to switch between light and dark palettes — no JavaScript required.
Before you start
Before using the Form Template below, you need a Formtorch endpoint.
Don't have one yet? Sign up now and get one in less than 5 minutes.
Don't have one yet? Sign up now and get one in less than 5 minutes.
Add your Formtorch endpoint
Paste your form ID and the code below updates instantly.
contact.html
<section class="ft-form-wrap">
<div class="ft-card">
<form
action="https://formtorch.com/f/abc123"
method="POST"
accept-charset="UTF-8"
>
<input
type="hidden"
name="_redirect"
value="https://yoursite.com/thank-you"
/>
<div class="ft-field">
<label for="ft-name">Full name</label>
<input
id="ft-name"
type="text"
name="name"
placeholder="Jane Doe"
autocomplete="name"
required
minlength="2"
/>
</div>
<div class="ft-field">
<label for="ft-email">Email address</label>
<input
id="ft-email"
type="email"
name="email"
placeholder="jane@example.com"
autocomplete="email"
required
/>
</div>
<div class="ft-field">
<label for="ft-message">Message</label>
<textarea
id="ft-message"
name="message"
rows="5"
placeholder="Tell us about your project..."
required
minlength="10"
></textarea>
</div>
<button type="submit">Send message</button>
</form>
</div>
</section>
<style>
/* ── Light theme tokens (default) ───────────────────────────────── */
.ft-form-wrap {
box-sizing: border-box;
width: 100%;
max-width: 480px;
font-family: Inter, system-ui, sans-serif;
font-size: 14px;
line-height: 1.5;
--ft-accent-hue: 220;
--ft-accent: hsl(var(--ft-accent-hue) 96% 56%);
--ft-border: #e2e8f0;
--ft-border-hover: #cbd5e1;
--ft-text: #0f172a;
--ft-label: #374151;
--ft-muted: #6b7280;
--ft-placeholder: #9ca3af;
--ft-bg-field: #ffffff;
--ft-bg-hover: #f8fafc;
--ft-card-bg: #ffffff;
--ft-card-border: #e2e8f0;
}
/* ── Dark theme tokens — applied when the OS prefers dark mode ─── */
@media (prefers-color-scheme: dark) {
/* Pull the iframe page background dark to match the card */
html {
background: oklch(12% 0 0);
}
.ft-form-wrap {
--ft-border: rgba(255, 255, 255, 0.09);
--ft-border-hover: rgba(255, 255, 255, 0.16);
--ft-text: oklch(95% 0 0);
--ft-label: oklch(82% 0 0);
--ft-muted: oklch(62% 0 0);
--ft-placeholder: rgba(255, 255, 255, 0.28);
--ft-bg-field: oklch(19% 0 0);
--ft-bg-hover: oklch(23% 0 0);
--ft-card-bg: oklch(16% 0 0);
--ft-card-border: rgba(255, 255, 255, 0.08);
}
}
.ft-form-wrap * {
box-sizing: border-box;
}
/* ── Card container ────────────────────────────────────────────── */
.ft-card {
background: var(--ft-card-bg);
border: 1px solid var(--ft-card-border);
border-radius: 12px;
padding: 28px 24px;
}
.ft-form-wrap form {
display: flex;
flex-direction: column;
gap: 16px;
}
.ft-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.ft-form-wrap label {
font-size: 13px;
font-weight: 500;
color: var(--ft-label);
letter-spacing: 0.01em;
}
.ft-form-wrap input,
.ft-form-wrap textarea {
width: 100%;
border: 1px solid var(--ft-border);
border-radius: 8px;
background: var(--ft-bg-field);
color: var(--ft-text);
font: inherit;
padding: 10px 12px;
outline: none;
transition:
border-color 120ms ease,
box-shadow 120ms ease,
background-color 120ms ease;
}
.ft-form-wrap input {
height: 40px;
}
.ft-form-wrap textarea {
min-height: 110px;
resize: vertical;
}
.ft-form-wrap input::placeholder,
.ft-form-wrap textarea::placeholder {
color: var(--ft-placeholder);
}
.ft-form-wrap input:hover,
.ft-form-wrap textarea:hover {
border-color: var(--ft-border-hover);
background: var(--ft-bg-hover);
}
.ft-form-wrap input:focus-visible,
.ft-form-wrap textarea:focus-visible {
border-color: var(--ft-accent);
box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 96% 56% / 0.2);
background: var(--ft-bg-field);
}
.ft-form-wrap input:focus-visible:invalid,
.ft-form-wrap textarea:focus-visible:invalid {
border-color: var(--ft-accent);
box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 96% 56% / 0.2);
}
.ft-form-wrap button {
appearance: none;
border: 0;
border-radius: 8px;
height: 40px;
width: 100%;
padding: 0 16px;
background: var(--ft-accent);
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin-top: 4px;
transition:
filter 120ms ease,
transform 120ms ease,
box-shadow 120ms ease;
}
.ft-form-wrap button:hover {
filter: brightness(1.08);
}
.ft-form-wrap button:active {
transform: translateY(1px);
}
.ft-form-wrap button:focus-visible {
box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 96% 56% / 0.28);
outline: none;
}
.ft-form-wrap button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
How it works
Create a Formtorch endpoint
Sign up and create a new form endpoint in the dashboard. You will get a unique URL in seconds.
Create endpointPaste it into your form
Set your form's action attribute to your endpoint URL. No other changes required.
Deploy and start receiving submissions
Every submission is stored in your dashboard, triggers email notifications, and can fire webhooks to any service.
Frequently asked questions
No. Formtorch works with standard HTML forms via the action attribute. No JavaScript required for basic submissions.
Start in less than 5 minutes
Create your endpoint, paste it into any template, and you are live.