איך ליצור טפסים מעוצבים ב 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.

    בהצלחה

    עוד תיעוד:
    http://pojo.co.il/topic/helpers-classes-buttons-fields-forms
    http://contactform7.com/submit-button
    http://contactform7.com/text-fields

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

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