Formulaire de contact en mode sombre
Un formulaire de contact en couleurs sombres, avec un bloc de style sur la page. Il utilise la police système et ne charge pas de fichier de police.
Ce que vous copiez
Ce modèle est un formulaire de contact avec un jeu de couleurs sombres écrit dans un bloc de style sur la page.
La pile de polices est system-ui et Segoe UI. L’extrait ne charge pas de fichier de police et n’appelle pas un hôte de polices.
Les couleurs sont fixées sur le formulaire lui-même : un fond sombre, un texte clair et un bouton clair. Elles ne dépendent pas du CSS de Formgong.
L’aperçu sur ce site reprend la même idée, avec la feuille de styles du site, afin que vous voyiez le contraste avant de copier.
L’envoi est un POST HTML ordinaire. Les couleurs sombres ne changent pas access_key, _lang ni botcheck.
Toujours sombre, ou suivre le système
Le premier extrait est sombre en permanence. Utilisez-le sur une page déjà sombre, ou lorsque vous voulez que le formulaire reste sombre dans une page claire.
L’extrait supplémentaire est clair par défaut et passe aux mêmes couleurs sombres à l’intérieur de prefers-color-scheme: dark.
Cette media query suit le réglage système du visiteur. L’extrait n’ajoute pas de bouton de bascule, parce qu’une bascule a besoin d’un script et d’un choix enregistré.
Si vous voulez un interrupteur manuel, gardez-le dans le contrôle de thème déjà présent sur votre site. N’ajoutez pas un second jeu de couleurs en conflit, seulement pour ce formulaire.
Les inputs héritent de la police. Il n’y a pas de @import et pas de lien vers une feuille de styles sur un autre domaine.
Livraison et limites
Les libellés peuvent être traduits. Les noms de champs restent name, email, phone et message afin que Telegram reste court.
Le honeypot utilise un petit style pour rester hors de l’écran sur le jeu clair comme sur le jeu sombre.
Turnstile est facultatif et commenté. Collez votre clé de site seulement après avoir activé Turnstile sur le formulaire.
Le gratuit autorise 300 soumissions par mois, les conserve 30 jours dans l’UE, envoie Telegram tout de suite, et envoie l’e-mail en résumé quotidien.
Formgong est l’opérateur. support@formgong.com est l’adresse d’assistance.
Aperçu
Code du formulaire
<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="fr">
<label>Nom <input type="text" name="name" autocomplete="name" required></label>
<label>E-mail <input type="email" name="email" autocomplete="email" required></label>
<label>Télé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>Laissez ce champ vide <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Facultatif. Activez Turnstile pour ce formulaire, retirez ces marques de commentaire et collez la clé du site.
<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="fr"></div>
-->
<button type="submit">Envoyer</button>
</form>Clair par défaut, sombre si le système l’est
<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="fr">
<label>Nom <input type="text" name="name" autocomplete="name" required></label>
<label>E-mail <input type="email" name="email" autocomplete="email" required></label>
<label>Télé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>Laissez ce champ vide <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Facultatif. Activez Turnstile pour ce formulaire, retirez ces marques de commentaire et collez la clé du site.
<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="fr"></div>
-->
<button type="submit">Envoyer</button>
</form>Questions et réponses
Cela va-t-il heurter le thème sombre de mon site ?
Le formulaire peint son propre fond. Sur une page sombre, c’est en général correct. Si votre thème stylise déjà les inputs, vérifiez le contraste après avoir collé.
Puis-je utiliser la couleur de ma marque sur le bouton ?
Oui. Changez le fond du bouton dans le bloc de style. N’ajoutez pas un import de police pour imiter une police de marque d’un tiers.
L’extrait système clignote-t-il du clair vers le sombre ?
Il commence clair, puis le navigateur applique la media query. Les personnes qui préfèrent les couleurs sombres devraient voir les règles sombres sans une seconde requête.
Le honeypot est-il visible en mode sombre ?
Il ne devrait pas l’être. Il est placé hors de l’écran dans une boîte d’un pixel. Si vous restylez le formulaire, gardez cette règle.