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

• זהר עמיהוד
• 26 בספטמבר 2017
• קטגוריות: כללי

וורדפרס היא מערכת CMS לבניית אתרים הנפוצה בעולם. אחד הפלאגינים הנפוצים ביותר לבניית טפסים הוא תוסף 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 פיקסלים, אז השדות יוצגו אחד מתחת לשני.

  <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 רספונסיביים באתר שלכם, כאן למטה בתגובות.