יצירת קשר עם עמודות: איך ליצור עמודות בטופס יצירת קשר של CF7?

אתם מנהלים אתר וורדפרס? יש סבירות רבה שאתם גם עושים שימוש בתוסף הפופולרי של Contact Form 7 (CF7) בכל זאת התקינו אותו נכון להיום 186,726,297 פעמים. אבל, ככל שהטופס יצירת קשר אמין ופשוט לשימוש, יש רבים שמתבאסים מכך שאין דרך פשוטה ליצור עמודות בטופס. במידה ואתם רוצים להציג באתר טופס יצירת קשר מחולק ל2,3,4 עמודות, במאמר זה נסביר איך בכל זאת עושים זאת!

יצירת קשר עם עמודות

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

1. לאפיין את הצרכים שלנו:
   • להחליט כמה שורות אנו רוצים (עם ובלי הכפתור שליחה).
   • להחליט כמה עמודות אנו רוצים (עם ובלי הכפתור שליחה).
   • להחליט איך יראה בתצורת צפייה ממכשירים סלולריים.
2. להבין איך בנוי טופס  ואיך ניתן לשלוט בו:
   • רכיבי CSS.
   • רכיבי HTML.

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

רכיבי קוד להכנת טופס CF7 עם מספר עמודות

• יש לנו מזהה טופס: #responsive-form
  • יש לנו מזהה שורה: .form-row
    • יש לנו מזהה עמודה: 
      • עמודה ברוחב מלא: .column-full
      • עמודה ברוחב חצי:. column-half
      • עמודה ברוחב שליש: column-third
      • עמודה ברוחב רבע: .column-Quarter

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

עם הבנה זו, ניתן להתקדם לקוד עצמו,

הגדרות CSS לטופס עם עמודות:

להלן הקוד לדוגמה לטופס בעל 4 עמודות:

#responsive-form{
max-width:1000px ;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-Quarter{
float: right;
position: relative;
padding: 0.65rem;
width:25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

@media screen and (max-width: 500px) {
.column-Quarter {
width: 100%;
}
}

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

• את הקוד הנ"ל אפשר להעתיק איך שהוא ולהדביקו במערכת תחת: עיצוב>התאמה אישית>CSS מותאם.

במידה ורוצים שלושה עמודות, ניתן לשנות את שם העמודה מ .column-Quarter ל-column-third ולהחליף בהגדרות את ה-25% לנתון החדש 33% ובכך בעצם לשנות את החלוקה בעמודות בתוך הטופס.

הגדרות HTML לטופס עם עמודות:

בהגדרות הHTML אנו נקבע אילו שדות יופיעו בכל שורה ועמודה על ידי שימוש בתיוג נכון של הגדרות הזיהוי של הקוד CSS מעלה.

להלן הקוד לטופס CF7 בעל 4 עמודות:

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-Quarter">[text* first-name placeholder"שם"]</div>
<div class="column-Quarter">[tel* your-phone placeholder"טלפון"]</div>
<div class="column-Quarter">[email* your-email placeholder"מייל"]</div>
<div class="column-Quarter">[submit "צרפו אותי למשפחה"]</div>

</div>

אנו בחרנו בדוגמה זו להציג את כל ארבעת העמודות בשורה אחת ולכן הגדרנו את הזיהוי של הטופס ובתוכו מיקמנו שורה אחת ובתוך השורה הצבנו את ארבעת השדות הרצויים לנו כאשר יש להם תיוג של עמודת רבע. במידה ורוצים לחלק את הטופס ל-2 שורות ולהציג 2 עמודות בשורה, יהיה עלינו לעדכן את הCSS עם שם חדש, עם 50% לעמודה וכמובן לשנות את הזיהוי בטופס עצמו בהתאמה ולמקם את הרכיבים של התפריט בשני שורות וזה יראה ככה:

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">[text* first-name placeholder"שם"]</div>
<div class="column-half">[tel* your-phone placeholder"טלפון"]</div>

</div>

<div class="form-row">
<div class="column-half">[email* your-email placeholder"מייל"]</div>
<div class="column-half">[submit "צרפו אותי למשפחה"]</div>

</div>

ניתן במקרים מסוימים להוסיף עוד רכיבי עיצוב בצורה  על ידי הוספת מזהה נוסף לדוגמה:

• <div class="form-flat"> לפני הקוד
• </div> אחרי הקוד

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

לסיכום,

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