English Español Português Русский العربية עברית
Home / Features / Custom CSS
ידידותי למפתחים

טפסים מדויקים עד הפיקסל עם CSS

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

התחילו בחינם לערכות העיצוב
form-design.css
/* Brand fonts */
@import url('https://fonts.googleapis.com/css?family=Inter:400,600,700');
.fb-form {
font-family: 'Inter', sans-serif;
--brand: #5B47FF;
}
.fb-input {
border-radius: 14px;
border: 1px solid #E3E8EE;
transition: border-color .2s;
}
.fb-input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(91,71,255,.12);
}

איפה שערכות העיצוב נגמרות, ה-CSS מתחיל

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

עורך מובנה

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

דורסים הכול

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

ערכת עיצוב + CSS

התחילו עם ערכת עיצוב לעבודה הכבדה והוסיפו מעליה את ה-CSS שלכם. הטוב משני העולמות — הקמה מהירה ושליטה מלאה.

נשמר לכל טופס

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

מעצבים ומפתחים יחד

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

בלי שלב בנייה

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

עצבו כל דבר בטופס

יעדים נפוצים — ואיך לגשת אליהם.

  • גופנים מותאמים באמצעות @font-face או ייבוא מ-Google Fonts
  • צבעי מותג שמוחלים על שדות קלט, מסגרות פוקוס וכפתורים
  • עיגול פינות, צלליות ואפקטי עומק
  • מרווחים בין שדות, מיקום תוויות ופריסה מרובת עמודות
  • אנימציות ריחוף ופוקוס, מעברים חלקים
  • מצבי שגיאה והודעות אימות מותאמים
  • גיליונות סגנון להדפסה לתהליכי עבודה עם טפסי נייר
  • דריסות ייעודיות למובייל באמצעות media queries
FORM PREVIEW

שאלות נפוצות

איפה מוסיפים CSS מותאם אישית?
פתחו את הטופס ועברו אל עיצוב ← CSS מותאם אישית. העורך ייפתח עם הדגשת תחביר. שמרו והסגנונות יוחלו מיד על הטופס החי.
אפשר לייבא גופנים חיצוניים?
כן. השתמשו ב-@import url(...) בראש ה-CSS המותאם כדי לטעון Google Fonts, Adobe Fonts או כל גופן שמוגש מהרשת. הטופס מכבד את הייבוא בזמן הטעינה.
האם ה-CSS המותאם יישבר אם תעדכנו את מנוע הטפסים?
אנחנו מתייחסים לשמות מחלקות ה-CSS הציבוריות של הטופס כ-API יציב ונמנעים משינוי שמם בעדכונים שוטפים. עיצובים מחדש משמעותיים מתועדים ביומן השינויים עם הנחיות מעבר.
אפשר לדרוס את סגנונות ערכת העיצוב, או שהן נעולות?
אפשר לדרוס הכול. ה-CSS המותאם נטען אחרי סגנונות ערכת העיצוב, כך שהכללים שלכם גוברים במפל. ברוב המקרים אין צורך ב-`!important`.
האם CSS מותאם אישית זמין בכל התוכניות?
כל התוכניות תומכות במערכת ערכות העיצוב המלאה. CSS מותאם אישית תלוי ברמת ההתאמה האישית של התוכנית שלכם; בדקו בעמוד המחירים את הרמה המדויקת.
אפשר לשתף את ה-CSS בין כמה טפסים?
כרגע לכל טופס יש CSS משלו. לסגנונות משותפים בין טפסים רבים, העתיקו והדביקו את קטע הקוד — או שמרו אותו במערכת ההערות/קטעי הקוד של הצוות.

קשור

ערכות עיצוב

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

למידע נוסף →

White Label

הסירו לגמרי את המיתוג של FormBuilder בתוכניות בתשלום. שלבו עם CSS מותאם אישית לזהות מותג מלאה.

למידע נוסף →

בונה בגרירה ושחרור

העורך הוויזואלי מטפל במבנה, בשדות, באימות ובלוגיקה המותנית. ה-CSS מטפל במראה.

למידע נוסף →

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

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

התחילו בחינם