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

עודכן בתאריך 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 נראה כמו בסקרינשוט הבא:

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

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

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

בהצלחה

עוד תיעוד:

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

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