Темна форма контакту
Форма контакту в темних кольорах, зі стилями на сторінці. Вона бере системний шрифт і не вантажить файл шрифту.
Що ви копіюєте
Це форма контакту з темною схемою кольорів, записаною в блоці стилів на сторінці.
Стек шрифтів — system-ui і Segoe UI. Сніпет не вантажить файл шрифту і не звертається до хоста шрифтів.
Кольори задані на самій формі: темне тло, світлий текст і світла кнопка. Вони не залежать від CSS Formgong.
Перегляд на цьому сайті використовує ту саму ідею, зі стилями сайту, тож контраст видно до копіювання.
Надсилання — це звичайний HTML POST. Темні кольори не змінюють access_key, _lang і botcheck.
Завжди темна або за системою
Перший сніпет темний увесь час. Беріть його на сторінку, яка вже темна, або коли форма має лишатися темною на світлій сторінці.
Додатковий сніпет світлий типово і перемикається на ті самі темні кольори всередині prefers-color-scheme: dark.
Цей медіазапит іде за налаштуванням системи відвідувача. Сніпет не додає кнопку перемикання, бо перемикачу потрібні скрипт і збережений вибір.
Якщо хочете ручний перемикач, лишіть його в уже наявному керуванні темою сайту. Не додавайте другу, суперечливу схему лише для цієї форми.
Поля успадковують шрифт. Немає @import і немає посилання на таблицю стилів з іншого домену.
Доставлення і межі
Підписи можна перекласти. Назви полів лишаються name, email, phone і message, щоб Telegram лишався коротким.
Пастка ховається коротким стилем, тож вона поза екраном і на світлій, і на темній схемі.
Turnstile необов’язковий і закоментований. Вставляйте ключ сайту лише після того, як увімкнете Turnstile на формі.
Безкоштовний план дозволяє 300 заявок на місяць, зберігає їх 30 днів у ЄС, надсилає Telegram одразу і пошту денним дайджестом.
Оператор — Formgong. Адреса підтримки — support@formgong.com.
Перегляд
Код форми
<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="uk">
<label>Ім’я <input type="text" name="name" autocomplete="name" required></label>
<label>Email <input type="email" name="email" autocomplete="email" required></label>
<label>Телефон <input type="tel" name="phone" autocomplete="tel"></label>
<label>Повідомлення <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>Залиште це поле порожнім <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Необов’язково. Увімкніть Turnstile для цієї форми, приберіть ці позначки коментаря і вставте ключ сайту.
<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="uk"></div>
-->
<button type="submit">Надіслати</button>
</form>Світла типово, темна якщо така система
<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="uk">
<label>Ім’я <input type="text" name="name" autocomplete="name" required></label>
<label>Email <input type="email" name="email" autocomplete="email" required></label>
<label>Телефон <input type="tel" name="phone" autocomplete="tel"></label>
<label>Повідомлення <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>Залиште це поле порожнім <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Необов’язково. Увімкніть Turnstile для цієї форми, приберіть ці позначки коментаря і вставте ключ сайту.
<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="uk"></div>
-->
<button type="submit">Надіслати</button>
</form>Питання та відповіді
Чи це зіткнеться з темною темою мого сайту?
Форма фарбує власне тло. На темній сторінці це зазвичай нормально. Якщо ваша тема вже стилізує поля, після вставки перевірте контраст.
Чи можна поставити колір бренду на кнопку?
Так. Змініть тло кнопки в блоці стилів. Не додавайте імпорт шрифту, щоб повторити брендову гарнітуру від третьої сторони.
Чи системний сніпет спалахує світлим, а потім темним?
Він починається світлим, потім браузер застосовує медіазапит. Люди, які обирають темні кольори, мають побачити темні правила без другого запиту.
Чи пастка видима в темному режимі?
Не має бути. Її поставлено поза екран у рамку на один піксель. Якщо перестилізовуєте форму, збережіть це правило.