איך ליצור טפסים מעוצבים ב Contact Form 7

פורום התמיכה פתוח למשתמשים מנויים בלבד. יש להתחבר או להרשם כדי להוסיף דיון או תגובה בפורום.

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

ראשי פורומים מדריכים איך ליצור טפסים מעוצבים ב Contact Form 7

מוצגות 1 תגובות (מתוך 1 סה״כ)
  • מאת
    תגובות
  • #1211

    Ariel
    Participant

    עודכן בתאריך 02.07.2015

    הרבה אנשים שואלים איך ליצור טפסים מעוצבים ב Contact Form 7? אם זה נראה לכם מסובך, באמצעות Helpers Classes של pojo תגלו שהדברים הרבה יותר קלים ממה שאתם חושבים.

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

    הקדמה

    בגדול כל שדה או טופס של Contact Form 7 נותן אפשרות להזין לו דיבים מותאמים אישית. במידה ואתה מכניס דיב שלך וכותב לו ערכי CSS – אז הם דורסים את הערכים הדיפולטיים של CF7.

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

    עכשיו לפרקטיקה

    לדוגמא, כפתור בסיסי שמוסיפים ב CF7 כתוב ככה: [submit "Send Mail"]
    אבל ניתן להוסיף דיב מותאם אישית, ואז זה יהיה כתוב ככה: [submit class:button "Send Mail"] – שים לב ל class:button.
    על אותה דרך ניתן להוסיב דיב ייחודי: id:form-submit

    עכשיו, בדיוק כמו שמוסיפים קלאס לכפתור – ניתן להוסיף קלאס לכל שדה אחר, לדוגמא:
    שדה טקסט בסיסי כתוב ככה: [text your-name]
    אם תוסיף לו קלאס הוא יהיה כתוב ככה: [text* your-name class:field]

    עכשיו לנקודה הכי חשובה בסיפור. כל הקלאסים שלנו לא יעבדו היטב אם לא תעטפו את כל הטופס בדיב פותח ודיב סוגר עם הסלקטור הבא:
    .pojo-form

    לצורך העניין, טופס דיפולט של Contact Form 7 נראה כמו בסקרינשוט הבא:

    cf7

    ברגע שנוסיף לו שדות וכפתורים מעוצבים, הוא אמור להיות כתוב ככה:

    או כמו בתמונה המצורפת:
    cf7-pojo

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

    בהצלחה

    עוד תיעוד:

    Helpers Classes – סלקטורים של CSS לטפסים מעוצבים


    http://contactform7.com/submit-button
    http://contactform7.com/text-fields

מוצגות 1 תגובות (מתוך 1 סה״כ)

הפורום 'מדריכים' נסגר לדיונים ולתגובות חדשות.