Formgong

טופס יצירת קשר במצב כהה

טופס יצירת קשר בצבעים כהים, עם בלוק עיצוב בדף. הוא משתמש בגופן המערכת ולא טוען קובץ גופן.

התחברו כדי להשתמש בתבנית

מה אתם מעתיקים

תבנית זו היא טופס יצירת קשר עם סכמת צבעים כהה, כתובה בבלוק עיצוב בעמוד.

ערימת הגופנים היא system-ui ו-Segoe UI. המקטע אינו טוען קובץ גופן ואינו פונה למארח גופנים.

הצבעים נקבעים על הטופס עצמו: רקע כהה, טקסט בהיר וכפתור בהיר. הם אינם תלויים ב-CSS של Formgong.

התצוגה המקדימה באתר הזה משתמשת באותו רעיון, עם גיליון העיצוב של האתר, כדי שתראו את הניגודיות לפני ההעתקה.

השליחה היא POST רגיל של HTML. צבעים כהים אינם משנים את access_key, את _lang או את botcheck.

תמיד כהה, או לפי המערכת

המקטע הראשון כהה כל הזמן. השתמשו בו בעמוד שכבר כהה, או כשאתם רוצים שהטופס יישאר כהה בעמוד בהיר.

המקטע הנוסף בהיר כברירת מחדל ועובר לאותם צבעים כהים בתוך prefers-color-scheme: dark.

שאילתת המדיה הזאת עוקבת אחרי הגדרת המערכת של המבקר. המקטע אינו מוסיף כפתור מתג, כי מתג צריך סקריפט ובחירה שמורה.

אם אתם רוצים מתג ידני, השאירו אותו בבקרת ערכת הנושא שכבר קיימת באתר. אל תוסיפו סכמה שנייה וסותרת רק לטופס הזה.

שדות הקלט יורשים את הגופן. אין @import ואין קישור לגיליון עיצוב בדומיין אחר.

מסירה ומגבלות

אפשר לתרגם תוויות. שמות השדות נשארים name, email, phone ו-message כדי ש-Telegram יישאר קצר.

המלכודת משתמשת בעיצוב קצר כדי להישאר מחוץ למסך גם בסכמה הבהירה וגם בכהה.

Turnstile אופציונלי ונמצא בתוך הערה. הדביקו את מפתח האתר רק אחרי שהפעלתם את Turnstile בטופס.

התוכנית החינמית מתירה 300 פניות בחודש, שומרת אותן 30 יום באיחוד האירופי, שולחת את Telegram מיד, ושולחת דוא״ל כסיכום יומי.

Formgong הוא המפעיל. support@formgong.com היא כתובת התמיכה.

תצוגה מקדימה

קוד הטופס

HTML
<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="he">
  <label>שם <input type="text" name="name" autocomplete="name" required></label>
  <label>אימייל <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="he"></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="he">
  <label>שם <input type="text" name="name" autocomplete="name" required></label>
  <label>אימייל <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="he"></div>
-->
  <button type="submit">שליחה</button>
</form>

שאלות ותשובות

האם זה יתנגש עם ערכת הנושא הכהה של האתר שלי?

הטופס צובע את הרקע שלו בעצמו. בעמוד כהה זה בדרך כלל בסדר. אם ערכת הנושא שלכם כבר מעצבת שדות קלט, בדקו את הניגודיות אחרי ההדבקה.

אפשר להשתמש בצבע המותג על הכפתור?

כן. שנו את רקע הכפתור בבלוק העיצוב. אל תוסיפו ייבוא גופן כדי להתאים גופן מותג מצד שלישי.

האם מקטע המערכת מהבהב בהיר ואז כהה?

הוא מתחיל בהיר, ואז הדפדפן מפעיל את שאילתת המדיה. אנשים שמעדיפים צבעים כהים אמורים לראות את כללי הכהה בלי בקשה שנייה.

האם המלכודת גלויה במצב כהה?

היא לא אמורה להיות גלויה. היא ממוקמת מחוץ למסך בתיבה של פיקסל אחד. אם אתם מעצבים מחדש את הטופס, שמרו על הכלל הזה.