Dark mode contact form
A contact form drawn in dark colours with a style block on the page. It uses the system font. It does not load a font file.
What you are copying
This starter is a contact form with a dark colour scheme written in a style block on the page.
The font stack is system-ui and Segoe UI. The snippet does not load a font file and does not call a font host.
Colours are set on the form itself: a dark background, light text, and a light button. They do not depend on Formgong CSS.
The preview on this site uses the same idea, with the site's own stylesheet, so you can see the contrast before you copy.
The post is a normal HTML POST. Dark colours do not change access_key, _lang or botcheck.
Always dark, or follow the system
The first snippet is dark all the time. Use it on a page that is already dark, or when you want the form to stay dark in a light page.
The extra snippet is light by default and switches to the same dark colours inside prefers-color-scheme: dark.
That media query follows the visitor's system setting. The snippet does not add a toggle button, because a toggle needs script and a stored choice.
If you want a manual switch, keep it in your site's existing theme control. Do not add a second, conflicting scheme only for this form.
Inputs inherit the font. There is no @import and no link to a stylesheet on another domain.
Delivery and limits
Labels can be translated. Field names stay name, email, phone and message so Telegram stays short.
The honeypot uses a small style so it stays off screen on both the light and the dark scheme.
Turnstile is optional and commented out. Paste your site key only after you enable Turnstile on the form.
Free allows 300 submissions a month, keeps them for 30 days in the EU, sends Telegram at once, and sends email as a daily digest.
Formgong is the operator. support@formgong.com is the support address.
Preview
Form code
<style>
.fg-dark {
font-family: system-ui, "Segoe UI", sans-serif;
color: #e8eaef;
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 20px;
display: grid;
gap: 12px;
max-width: 32rem;
}
.fg-dark label { display: grid; gap: 4px; }
.fg-dark input, .fg-dark textarea {
font: inherit;
color: inherit;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 8px 10px;
}
.fg-dark button {
font: inherit;
background: #e8eaef;
color: #161b22;
border: 0;
border-radius: 8px;
padding: 8px 14px;
}
</style>
<form class="fg-dark" action="https://formgong.com/submit" method="POST">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="en">
<label>Name <input type="text" name="name" autocomplete="name" required></label>
<label>Email <input type="email" name="email" autocomplete="email" required></label>
<label>Phone <input type="tel" name="phone" autocomplete="tel"></label>
<label>Message <textarea name="message" required></textarea></label>
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
<label>Leave this field empty <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Optional. Turn Turnstile on for this form, then remove these comment marks and paste your site key.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="en"></div>
-->
<button type="submit">Send</button>
</form>Light by default, dark when the system is
<style>
.fg-auto { font-family: system-ui, "Segoe UI", sans-serif; display: grid; gap: 12px; max-width: 32rem; }
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea, .fg-auto button { font: inherit; }
@media (prefers-color-scheme: dark) {
.fg-auto {
font-family: system-ui, "Segoe UI", sans-serif;
color: #e8eaef;
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 20px;
display: grid;
gap: 12px;
max-width: 32rem;
}
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea {
font: inherit;
color: inherit;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 8px 10px;
}
.fg-auto button {
font: inherit;
background: #e8eaef;
color: #161b22;
border: 0;
border-radius: 8px;
padding: 8px 14px;
}
}
</style>
<form class="fg-auto" action="https://formgong.com/submit" method="POST">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="en">
<label>Name <input type="text" name="name" autocomplete="name" required></label>
<label>Email <input type="email" name="email" autocomplete="email" required></label>
<label>Phone <input type="tel" name="phone" autocomplete="tel"></label>
<label>Message <textarea name="message" required></textarea></label>
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
<label>Leave this field empty <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Optional. Turn Turnstile on for this form, then remove these comment marks and paste your site key.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="en"></div>
-->
<button type="submit">Send</button>
</form>Questions and answers
Will this clash with my site's dark theme?
The form paints its own background. On a dark page that is usually fine. If your theme already styles inputs, check the contrast after you paste.
Can I use my brand colour on the button?
Yes. Change the button background in the style block. Do not add a font import to match a brand typeface from a third party.
Does the system snippet flash light then dark?
It starts light, then the browser applies the media query. People who prefer dark colours should see the dark rules without a second request.
Is the honeypot visible in dark mode?
It should not be. It is positioned off screen with a one-pixel box. If you restyle the form, keep that rule.