Kontaktformular im Dunkelmodus
Ein Kontaktformular in dunklen Farben, mit einem Style-Block auf der Seite. Es nutzt die Systemschrift und lädt keine Schriftdatei.
Was Sie kopieren
Diese Vorlage ist ein Kontaktformular mit einem dunklen Farbschema, geschrieben in einem Style-Block auf der Seite.
Der Schriftstapel ist system-ui und Segoe UI. Das Snippet lädt keine Schriftdatei und ruft keinen Dienst auf, der Schriften bereitstellt.
Die Farben stehen am Formular selbst: ein dunkler Hintergrund, heller Text und eine helle Schaltfläche. Sie hängen nicht vom CSS von Formgong ab.
Die Vorschau auf dieser Website nutzt dieselbe Idee, mit dem Stylesheet der Website, damit Sie den Kontrast sehen, bevor Sie kopieren.
Das Absenden ist ein normaler POST in HTML. Dunkle Farben ändern access_key, _lang oder botcheck nicht.
Immer dunkel oder der Systemeinstellung folgen
Das erste Snippet ist die ganze Zeit dunkel. Nutzen Sie es auf einer Seite, die bereits dunkel ist, oder wenn das Formular auf einer hellen Seite dunkel bleiben soll.
Das zusätzliche Snippet ist standardmäßig hell und wechselt zu denselben dunklen Farben innerhalb von prefers-color-scheme: dark.
Diese Media Query folgt der Systemeinstellung des Besuchers. Das Snippet fügt keine Schaltfläche zum Umschalten hinzu, weil ein Umschalter ein Skript und eine gespeicherte Wahl braucht.
Wenn Sie einen Schalter von Hand möchten, belassen Sie ihn in der Steuerung, die Ihre Website für das Theme schon hat. Fügen Sie nicht nur für dieses Formular ein zweites, widersprüchliches Schema hinzu.
Die Eingabefelder erben die Schrift. Es gibt kein @import und keinen Verweis auf ein Stylesheet auf einer anderen Domain.
Zustellung und Grenzen
Beschriftungen dürfen übersetzt werden. Die Feldnamen bleiben name, email, phone und message, damit Telegram kurz bleibt.
Das Honeypot nutzt einen kleinen Stil, damit es sowohl im hellen als auch im dunklen Schema außerhalb des Bildschirms bleibt.
Turnstile ist optional und steht in einem Kommentar. Fügen Sie Ihren Site-Key erst ein, nachdem Sie Turnstile am Formular eingeschaltet haben.
Der Free-Tarif erlaubt 300 Einsendungen im Monat, behält sie 30 Tage in der EU, sendet Telegram sofort und sendet die E-Mail als tägliche Übersicht.
Formgong ist der Betreiber. support@formgong.com ist die Adresse für den Support.
Vorschau
Formularcode
<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="de">
<label>Name <input type="text" name="name" autocomplete="name" required></label>
<label>E-Mail <input type="email" name="email" autocomplete="email" required></label>
<label>Telefon <input type="tel" name="phone" autocomplete="tel"></label>
<label>Nachricht <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>Lassen Sie dieses Feld leer <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Optional. Schalten Sie Turnstile für dieses Formular ein, entfernen Sie diese Kommentarzeichen und fügen Sie den Site-Key ein.
<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="de"></div>
-->
<button type="submit">Senden</button>
</form>Hell als Standard, dunkel wenn das System es ist
<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="de">
<label>Name <input type="text" name="name" autocomplete="name" required></label>
<label>E-Mail <input type="email" name="email" autocomplete="email" required></label>
<label>Telefon <input type="tel" name="phone" autocomplete="tel"></label>
<label>Nachricht <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>Lassen Sie dieses Feld leer <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Optional. Schalten Sie Turnstile für dieses Formular ein, entfernen Sie diese Kommentarzeichen und fügen Sie den Site-Key ein.
<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="de"></div>
-->
<button type="submit">Senden</button>
</form>Fragen und Antworten
Kollidiert das mit dem dunklen Theme meiner Website?
Das Formular setzt seinen eigenen Hintergrund. Auf einer dunklen Seite ist das in der Regel in Ordnung. Wenn Ihr Theme die Eingabefelder schon gestaltet, prüfen Sie den Kontrast nach dem Einfügen.
Kann ich die Farbe meiner Marke auf der Schaltfläche nutzen?
Ja. Ändern Sie den Hintergrund der Schaltfläche im Style-Block. Fügen Sie keinen Import einer Schrift hinzu, um eine Markenschrift eines Drittanbieters nachzubilden.
Blitzt das Snippet für das System erst hell und dann dunkel auf?
Es beginnt hell, danach wendet der Browser die Media Query an. Menschen, die dunkle Farben bevorzugen, sollten die dunklen Regeln ohne eine zweite Anfrage sehen.
Ist das Honeypot im dunklen Modus sichtbar?
Es sollte nicht sichtbar sein. Es liegt außerhalb des Bildschirms in einem Kasten von einem Pixel. Wenn Sie das Formular neu gestalten, behalten Sie diese Regel.