עיצוב טופס יצירת קשר עם CSS

עיצוב טופס יצירת קשר עם CSS

  • פרסומת

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

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

עיצוב הגבולות והרקע

form {
    border:2px solid white;
    border-radius:10px;
    box-shadow:0 0 3px #AAA;
    width:250px;
    background:#CCC;
    margin:10px auto;padding:10px;
    overflow:auto;
}

טופס יצירת קשר עם php

העיצוב של הטופס פשוט: צבע רקע אפור עם קצת צל וגבול לבן.

  • border – גבול בצבע לבן ובעובי של 2 פיקסל.
  • border-radius – פינות מעוגלות ברדיוס של 10 פיקסל
  • box-shadow– צל בעובי 3 פיקסל ובצבע לבן. ניתן לעצב את הצל באופן הבא: 
    • הסיפרה הראשונה אחראית על הזזת הצל על ציר ה-X.
    • הסיפרה השניה אחראית על הזזת הצל על ציר ה-Y.
    • הסיפרה השלישית אחראית על עובי הצל.
    • החלק האחרון קובע את צבע הצל. במקרה שלנו – לבן #AAA.
  • width – רוחב הטופס (250 פיקסל).
  • background – רקע הטופס (#CCC = אפור בהיר).
    כאן ניתן לקבוע גם תמונה כרקע. ראה דוגמה:
    background:url('FileName.jpg') no-repeat;
  • margin – הגבולות החיצוניים של הטופס. כדי למרכז את הטופס, ניתן לכתוב auto. שימו לב ששיטה זו עובדת אך ורק אם יש רוחב אובייקט מוגדר (width).
  • overflow – מה קורה כשהאובייקטים הפנימיים גדולים מגודל הטופס? auto אומר להכיל את כל האובייקטים הפנימיים, גם אם הם גדולים מהטופס.

עיצוב השדות

div.row {margin:5px 5px 15px}
form label {
    display:block;
    color:#333;
    text-shadow:0 1px 0 white
}
form input[type=text],
form textarea {
    box-shadow:0 1px 0 white,inset 0 1px 1px #555;
    border-radius:3px;
    border:1px solid #999;
    width:228px;
    padding:5px;
}
form textarea {height:100px}
  • div.row – חילקתי את השדות לשורות. כל שורה מוכלת בתוך מחלק (div) הנקרא row. כך זה יראה בשפת html:
  • form label – התווית המוצמדת לכל שדה
  • form input[type=text] – כך ניתן לבחור את כל השדות מסוג טקסט בלבד (אנו עושים זאת בכדי להבדיל בין השדות של הטקסט לבין הלחצן של השליחה. שניהם נקראים input). כאשר מפרידים בין השמות בפסיק, ניתן להגדיר מספר אובייקטים בבת אחת.
  • padding – "ריפוד" כלומר, הגבולות הפנימיים של השדה.

עיצוב לחצן שליחת הטופס

form input[type=submit] {
    box-shadow:inset 0 2px 1px white,inset 0 -1px 2px #555;
    border-radius:3px;border:1px solid #999;
    padding:3px 20px;margin:5px 5px 0 5px;
    float:left;
    cursor:pointer;
}
form input[type=submit]:hover {background:#333;color:#CCC;box-shadow:inset 0 2px 0 #999, 0 1px 1px black;}
  • input[type=submit] – כך אנו בוחרים את הלחצן
  • float:left – הלחצן צף (מוצמד) לצד שמאל
  • cursor:pointer – שינוי צורת העכבר לצורה של יד
  • input[type=submit]:hover – כך מגידירים מה קורה כאשר העכבר מרחף מעל הלחצן.

עיצוב הודעת שגיאה או הצלחה

form,
div.success {
    /*הכניסו כאן את הקוד*/
}
div.error {
    background:#FFD2D2;
    color:red;border-radius:10px;
    width:260px;
    margin:0 auto;
    border:1px solid red;padding:5px
}
div.error p {text-align:center;margin:0}
  • div.success – הודעת ההצלחה מקבלת את אותן הגדרות של הטופס
  • div.error – הודעת שגיאה תהיה בצבע אדום וברקע אדום בהיר