משחקים עם עיצוב התוסף Contact Form 7

התוסף Contact Form 7 הוא אחד התוספים הפופולריים ביותר ליצירת טפסים בוורדפרס, עם למעלה מחמישה מיליון התקנות פעילות. התיאור שלו – "פשוט אך גמיש" – מדויק לחלוטין.

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

פוסט זה מרכז טיפים, רעיונות ודברים שלא כולם מכירים על עיצוב טפסים של Contact Form 7. חלקם פשוטים, חלקם פחות ידועים – אבל כולם שימושיים.

הבנת מבנה ה-HTML של Contact Form 7

לפני שמתחילים לעצב, חשוב להבין את מבנה ה-HTML שהתוסף מייצר. כל טופס של CF7 עטוף בקלאס .wpcf7, והטופס עצמו מקבל את הקלאס .wpcf7-form.

כל שדה בטופס עטוף ב-<span> עם הקלאס .wpcf7-form-control-wrap. הכרת הקלאסים האלה היא המפתח לעיצוב מדויק.

הנה הקלאסים העיקריים שכדאי להכיר:

• .wpcf7 – העטיפה החיצונית של כל טופס CF7
• .wpcf7-form – אלמנט הטופס עצמו
• .wpcf7-form-control – כל שדה בודד (input, textarea, select)
• .wpcf7-submit – כפתור השליחה
• .wpcf7-spinner – אנימציית הטעינה לאחר שליחה
• .wpcf7-response-output – הודעת התגובה לאחר שליחה

עיצוב שדות הקלט וה-Textarea

ברירת המחדל של שדות CF7 יורשת את סגנונות התבנית, מה שלעיתים מוביל למראה לא אחיד. הנה CSS שיוצר מראה נקי ומינימלי:

.wpcf7 input:not([type="submit"]),
.wpcf7 textarea {
    border: none;
    border-bottom: 1px solid #545454;
    background: transparent;
    outline: none;
    border-radius: 0;
    width: 100%;
    padding: 8px 0;
    font-size: 16px;
    transition: border-color 0.3s;
}

.wpcf7 input:focus:not([type="submit"]),
.wpcf7 textarea:focus {
    border-bottom-color: #a3316f;
}

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

הגדרת font-size: 16px על שדות input מונעת זום אוטומטי במכשירי iOS. מתחת ל-16px, Safari מבצע זום על השדה בזמן פוקוס.

Textarea שגדל בזמן פוקוס

טריק נחמד שחוסך מקום במסך – שדה ה-textarea מתחיל קטן ומתרחב כשהמשתמש לוחץ עליו:

.wpcf7 textarea {
    resize: none;
    height: 46px;
    transition: height 0.4s ease;
}

.wpcf7 textarea:focus {
    height: 120px;
}

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

עיצוב כפתור השליחה

כפתור השליחה של CF7 מקבל את הקלאס .wpcf7-submit. ניתן לעצב אותו בכל דרך, אבל כדאי לכלול מצבי hover ו-focus לנגישות:

.wpcf7 input[type="submit"] {
    background: #a3316f;
    color: #fff;
    border: none;
    padding: 12px 32px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus {
    background: #8a2a5e;
}

טיפ: הוספת קלאס מותאם לכפתור השליחה

ניתן להוסיף קלאסים ישירות דרך ה-shortcode tag של CF7. במקום לכתוב [submit "שלח"], כתבו:

[submit class:my-custom-btn "שלח"]

כך תוכלו לטרגט את הכפתור בצורה ספציפית עם .my-custom-btn מבלי להשפיע על כפתורים אחרים באתר.

הוספת קלאסים ו-IDs לשדות בודדים

דבר שמפתחים רבים לא יודעים – ניתן להוסיף קלאסים מותאמים ו-IDs ישירות ל-shortcode tags של CF7:

[text* your-name class:my-input id:name-field placeholder "שם מלא"]
[email* your-email class:email-input id:email-field placeholder "אימייל"]

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

עיצוב ה-Placeholder

ב-CF7 ניתן להגדיר placeholder ישירות ב-shortcode tag. כדי לשנות את צבע הטקסט של ה-placeholder, השתמשו ב-pseudo-element ::placeholder:

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #999;
    opacity: 1;
}

ההגדרה opacity: 1 חשובה כי דפדפנים מסוימים (בעיקר Firefox) מציגים placeholders עם שקיפות מופחתת כברירת מחדל.

דוגמה: טופס בשתי עמודות עם כפתור שליחה בתחתית

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

קוד הטופס בעורך CF7

הקוד הבא נכנס ישירות לעורך הטופס בממשק הניהול של CF7:

<div class="cf7-two-cols">
    <div>[text* your-name placeholder "שם מלא"]</div>
    <div>[email* your-email placeholder "אימייל"]</div>
    <div>[text your-phone placeholder "טלפון"]</div>
    <div>[text your-subject placeholder "נושא"]</div>
</div>

[textarea your-message placeholder "הודעה"]

<div class="cf7-submit-wrap">
    [submit class:cf7-btn "שלח"]
</div>

ה-CSS

הוסיפו את ה-CSS הבא לתבנית הבת שלכם. הוא משתמש ב-Flexbox כדי לסדר את השדות בשתי עמודות ולמרכז את כפתור השליחה:

.cf7-two-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.cf7-two-cols > div {
    flex: 1 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    margin-bottom: 16px;
}

.cf7-submit-wrap {
    text-align: center;
    margin-top: 10px;
}

.cf7-btn {
    background: #a3316f;
    color: #fff;
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.cf7-btn:hover,
.cf7-btn:focus {
    background: #8a2a5e;
}

@media screen and (max-width: 768px) {
    .cf7-two-cols > div {
        flex: 1 0 100%;
        max-width: 100%;
    }
}

ב-media query, השדות עוברים לעמודה אחת במובייל כדי לשמור על קריאות.

דוגמה: טופס אימייל אינליין עם כפתור

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

קוד הטופס בעורך CF7

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

<div class="cf7-inline-form">
    <div class="cf7-inline-field">
        [email* your-email placeholder "האימייל שלכם"]
    </div>
    <div class="cf7-inline-btn">
        [submit class:cf7-subscribe-btn "הרשמה"]
    </div>
</div>

ה-CSS

ה-CSS משתמש ב-Flexbox כדי ליישר את השדה והכפתור על אותה שורה:

.cf7-inline-form {
    display: flex;
    max-width: 480px;
}

.cf7-inline-field {
    flex: 1;
}

.cf7-inline-field input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #545454;
    background: transparent;
    padding: 10px 0;
    font-size: 16px;
    outline: none;
}

.cf7-inline-field input:focus {
    border-bottom-color: #a3316f;
}

.cf7-subscribe-btn {
    background: #a3316f;
    color: #fff;
    border: none;
    padding: 10px 24px;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s;
}

.cf7-subscribe-btn:hover,
.cf7-subscribe-btn:focus {
    background: #8a2a5e;
}

@media screen and (max-width: 480px) {
    .cf7-inline-form {
        flex-direction: column;
    }
    .cf7-subscribe-btn {
        width: 100%;
        margin-top: 10px;
    }
}

ה-white-space: nowrap על הכפתור מונע שבירת שורה בטקסט הכפתור. ב-media query, המתווה עובר לעמודה אנכית במסכים צרים.

הודעות Validation צפות (פיצ'ר מובנה)

זהו אחד הפיצ'רים הפחות ידועים של CF7. כברירת מחדל, הודעת שגיאה מופיעה מתחת לשדה ודוחפת את כל השדות שמתחתיה למטה, מה ששובר את עיצוב הטופס.

CF7 כולל פתרון מובנה – הוסיפו את הקלאס use-floating-validation-tip לשורטקוד של הטופס:

[[contact-form-7 id="xxx" html_class="use-floating-validation-tip" title="הטופס שלי"]]

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

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

ניתן לשנות את המראה של הודעות השגיאה באמצעות הקלאס .wpcf7-not-valid-tip:

.wpcf7-not-valid-tip {
    color: #e74c3c;
    font-size: 13px;
    font-weight: 400;
}

.wpcf7 .wpcf7-not-valid {
    border-bottom-color: #e74c3c;
}

הקלאס .wpcf7-not-valid מתווסף אוטומטית לשדות שלא עברו ולידציה. ניתן להשתמש בו כדי לסמן אותם עם גבול אדום.

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

דבר שרבים לא מודעים אליו – CF7 מוסיף קלאסים שונים לטופס עצמו בהתאם לסטטוס השליחה. ניתן להשתמש בהם כדי ליצור עיצובים שונים לכל מצב:

• .wpcf7-form.sent – שליחה הצליחה
• .wpcf7-form.invalid – יש שגיאות ולידציה
• .wpcf7-form.spam – הוזהה כספאם
• .wpcf7-form.failed – שליחה נכשלה

לדוגמה, כדי לעצב את הודעת ההצלחה בצורה שונה מהודעת השגיאה:

.wpcf7-form.sent .wpcf7-response-output {
    border-color: #27ae60;
    color: #27ae60;
    background: rgba(39, 174, 96, 0.05);
}

.wpcf7-form.invalid .wpcf7-response-output {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.05);
}

הסתרת הטופס לאחר שליחה מוצלחת

טיפ מתקדם – ניתן להסתיר את כל שדות הטופס לאחר שליחה מוצלחת ולהשאיר רק את הודעת ההצלחה:

.wpcf7-form.sent .wpcf7-form-control-wrap,
.wpcf7-form.sent .wpcf7-submit {
    display: none;
}

.wpcf7-form.sent .wpcf7-response-output {
    text-align: center;
    font-size: 18px;
    padding: 20px;
    margin-top: 0;
}

כל זה מתבצע ב-CSS בלבד, ללא צורך ב-JavaScript.

עיצוב Checkbox ו-Radio Buttons

CF7 עוטף כל checkbox ו-radio ב-<span> עם הקלאס .wpcf7-list-item. ניתן להשתמש בזה כדי ליצור מראה מותאם:

.wpcf7 .wpcf7-list-item {
    display: block;
    margin: 8px 0;
}

.wpcf7 .wpcf7-list-item label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

התאמת ה-Spinner (אנימציית טעינה)

לאחר לחיצה על כפתור השליחה, CF7 מציג spinner. ניתן לשנות את המראה שלו או להסתיר אותו לחלוטין:

.wpcf7-spinner {
    display: none;
}

או, אם רוצים לשנות את המיקום שלו:

.wpcf7-spinner {
    position: absolute;
    margin: 0;
}

תכונות נוספות ב-Shortcode Tags

CF7 תומך בתכונות נוספות ב-shortcode tags שלא כולם מכירים:

• size:40 – קובע את רוחב השדה הנראה
• minlength:3 ו-maxlength:100 – הגבלת אורך טקסט
• autocomplete:name – מפעיל השלמה אוטומטית של הדפדפן
• default:value – ערך ברירת מחדל לשדה

דוגמה משולבת:

[text* your-name minlength:2 maxlength:50 autocomplete:name class:styled-input placeholder "שם מלא"]

שימוש ב-html_class ו-html_id בשורטקוד

ניתן להוסיף כל קלאס או מזהה לעטיפת הטופס דרך השורטקוד עצמו:

[[contact-form-7 id="xxx" html_class="my-form dark-theme" html_id="main-contact" title="הטופס שלי"]]

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

שאלות נפוצות

שאלות נפוצות על עיצוב טפסים של Contact Form 7:

סיכום

למרות ש-Contact Form 7 לא כולל ממשק עיצוב, הוא מספק מבנה HTML צפוי עם קלאסים ספציפיים שמאפשרים התאמה עיצובית מלאה באמצעות CSS. מפיצ'רים מובנים כמו floating validation tips ועד קלאסים דינמיים שמתווספים בהתאם לסטטוס השליחה – יש כאן הרבה יותר ממה שנראה במבט ראשון.

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