style> .imageRS { border:1px solid black; box-shadow: 10px 10px 5px #888888; } p { font-size: 13pt; } li { font-size: 13pt; } .zbox4 {padding-left:4px;padding-right:4px;border:2px solid navy;}

וורדפרס, תוסף צור קשר Contact Form 7 רספונסיבי

וורדפרס היא מערכת CMS לבניית אתרים הנפוצה בעולם. אחד הפלאגינים הנפוצים ביותר לבניית טפסים הוא תוסף Contact Form 7 שיש לו יכולות בסיסיות נפלאות ליצירת טפסים פשוטים.

אבל אנחנו רוצים יותר מזה,

אנחנו רוצים טופס כזה:

מבנה סכמתי של טופס צור קשר

ולא כזה:

תוסף Contact Form 7 מראה ברירת מחדל

אחת הבעיות של תוסף Contact Form 7 היא שהוא מציג את השדות: שם, טלפון, מייל וכדומה, שדה מתחת לשדה וזה לא תמיד מה שבעלי אתרים ומפתחי אתרים רוצים.

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

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

אני עובד כבר שנים רבות עם Contact Form 7 וזאת מערכת טפסים בכול אתר וורדפרס שאני מעורב בבנייתו.

כאשר מקימים טופס באמצעות פלאגין Contact Form 7 זה מה שרואים

קוד ברירת מחדל של תוסף Contact Form 7

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

תוסף Contact Form 7 מראה ברירת מחדל

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

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

אז איזה טופס נבנה?

מבנה סכמתי של טופס צור קשר

שלב ראשון:

בנייה של קוד CSS המכיל:

  • class לעמודת 1/3 הנקרא .one-third
  • class לעמודת 1/1 – רוחב מלא הנקרא .one-full
  • class לעמודה אחרונה הנקרא .last
  • class העוטף את כל הטופס הנקרא .zform (מעניין למה ה- z) שבעיקרו הוא לתת צבע רקע לטופס.
  • הגדרה מתי הטופס יהיה רספונסיבי בהתאם לרוחב המסך. אם המסך קטן מ- 768 פיקסלים, אז השדות יוצגו אחד מתחת לשני.
כול המספרים בחלק של ה CSS ניתנים לשינוי. שחקו, התאימו – זאת הדרך ללמוד, לא רק להעתיק ולהדביק. אתם עוד עשויים ליהנות מהמשחק.

<style>
.zform {
  background-color: #FF6A00;
  padding: 10px 10px 0px;
}
input[type="submit"] { 
  width:100% !important;
  font-size:18pt !important;
  font-weight: bold !important;
}
.one-third {
    position: relative;
    margin-left: 1.25%;
    float: right;
    margin-bottom: 20px;}
.one-full { width: 100%; }
.one-third { width: 32.50%; }
.last {
    margin-left: 0 !important;
    clear: left;}
 @media only screen and (max-width: 767px) {
    .one-full, .one-third {
        width: 100%;
        margin-left: 0; }
  }
.one-third input { width: 100%; }
</style>

שלב שני:

עיטוף שדות הטופס בקוד המתאים, כלומר בתגית div עם ה- class המתאים כך:

<div class="zform">
  <div class="one-third">
    <label> השם שלך (חובה)
      [text* your-name] </label>
  </div>
  <div class="one-third">
    <label> האימייל שלך (חובה)
      [email* your-email] </label>
  </div>
  <div class="one-third last">
    <label> נושא
      [text your-subject] </label>
  </div>
  <div class="one-full last">
    <label> ההודעה שלך
      [textarea your-message] </label>
  </div>
  <div class="one-full last">
    [submit "שלח"]
  </div>
</div>

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

<div class="zform">
  <div class="one-third">
    <label> השם שלך (חובה)
      [text* your-name] </label>
  </div>
  <div class="one-third">
    <label> האימייל שלך (חובה)
      [email* your-email] </label>
  </div>
  <div class="one-third last">
    <label> נושא
      [text your-subject] </label>
  </div>
  <div class="one-full last">
    <label> ההודעה שלך
      [textarea your-message] </label>
  </div>
  <div class="one-full last">
    [submit "שלח"]
  </div>
</div>

<style>
.zform {
  background-color: #FF6A00;
  padding: 10px 10px 0px;
}
input[type="submit"] { 
  width:100% !important;
  font-size:18pt !important;
  font-weight: bold !important;
}
.one-third {
    position: relative;
    margin-left: 1.25%;
    float: right;
    margin-bottom: 20px;}
.one-full { width: 100%; }
.one-third { width: 32.50%; }
.last {
    margin-left: 0 !important;
    clear: left;}
 @media only screen and (max-width: 767px) {
    .one-full, .one-third {
        width: 100%;
        margin-left: 0; }
  }
.one-third input { width: 100%; }
</style>

כך נראה הטופס

    ומה לגבי רספונסיביות?

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

    סיכום

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

    תרגישו חופשי לשתף אותי ביישום טפסי Contact Form 7 רספונסיביים באתר שלכם, כאן למטה בתגובות.

    About זהר עמיהוד

    מוביל בעלי עסקים להצלחה באינטרנט: יותר פניות ויותר מכירות. מומחה קידום אתרים (SEO), שיווק ופרסום באינטרנט (Google Ads PPC). יועץ לחברות בינוניות וגדולות בנושאי שיווק באינטרנט תוך התמחות בקידום אורגני SEO, פרסום ממומן בגוגל. בוגר תואר שני במנהל עסקים מטעם אוניברסיטת תל אביב. שותף גוגל ומוסמך פרסום בגוגל. צלצלו עוד היום 09-8910462

    8 comments

    1. היי . יש אפשרות לעשות את אותו הדבר רק שהתבנית תהיה מעוגלת ולא מרובעת? ואם אני רוצה לשנות גודל של התבנית ליותר קטנה ואובלית יש אופציה כזאת? תודה מראש

    2. היי,
      איך ניתן לעשות שגם ה"שלח" יהיה באותה השורה?
      אני רוצה שיהיה – שם. האימייל שלך. נושא. ושלח באותה שורה

      • לום מעיין,
        הכל אפשרי שיודעים קצת HTML וקצת CSS.
        הקוד בנוי, לפי ההסבר, לחלוקה של 3 חלקים, שכל חלק נקרא one-third.
        על פי אותם עקרונות ניתן לבנות גם טופס המכיל 4 חלקים בשורה, כפי שאת רוצה.
        בהצלחה,

    3. תודה
      מאלף
      רציתי לאתגר אותך
      התוסף מודיע שיפסיק לתמוך באפשרות שליחת קובץ לאחר הרשמה תחת הלשונית הגדרות נוספות
      בצורה שהיתה עד כה
      מפנה למשהוא שלא הצלחתי להפעיל
      מחפש פיתרון

    4. כל הכבוד על ההסבר המפורט !

      באותה הזדמנות רציתי לשאול אותך איך ניתן לעשות טופס רישום לאירוע מסוים

      תודה צביקה

      • שלום צביקה ותודה,
        בעזרת Contact Form 7 תוכל ליצור כמה טפסים שתרצה. אני יכול להניח שבטופס רישום לאירוע אתה רוצה שיהיו עוד שדות מלבד: שם, מייל, טלפון. רשום כאן איזה שדות אתה רוצה (שדה תאריך? מספר מוזמנים? וכדומה) ואומר לך האם CF7 מתאים לדרישות שלך
        להצלחה שלך

    כתיבת תגובה

    האימייל לא יוצג באתר. שדות החובה מסומנים *

    כמה זה? *

    דילוג לתוכן