contact form 7

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

אתרי אינטרנט, וורדפרס, טופס צור קשר  דייזי עיצוב גרפי7 תגובות

שתפו

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

טופס צור קשר הסטנדרטי של התוסף האהוב והוותיק contact form 7 מגיע בצורה אנכית כברירת מחדל ביצירה של כל טופס חדש, כלומר כל השדות ממוקמים אחד מתחת לשני בטופס (כפי שמוצג בתמונה).

contact form 7

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

שלב 1: יצירת טופס צור קשר חדש

דבר ראשון ניצור טופס צור קשר חדש ע"י כניסה לממשק הניהול של וורדפרס>צור קשר>הוספה (כמובן שלפני כן יש להתקין את תוסף contact form 7). לטופס החדש נקרא לצורך העניין "טופס יצירת קשר אופקי", (ניתן לשכפל טופס קיים או ליצור טופס חדש).

contact form 7

קוד ה-HTML ברירת המחדל של הטופס הוא כפי שמופיע להלן ונוכל לצפות בו כאשר נקליק "עריכה" במסך הטפסים תחת "צור קשר":

שלב 2: התאמת קוד ה-html של טופס צור קשר

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

שלב 3: הטמעת הטופס צור קשר בעמוד באתר

הדרך הפשוטה ביותר להטמיע טופס צור קשר CF7 הוא על ידי shortcode. את ה-shortcode של הטופס שלנו נמצא בקלות במסך טפסי צור קשר (ראו תמונה למעלה) והוא נראה כך:

** לכל טופס יש shortcode משלו.

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

  • להעתיקו בעמוד בו נרצה למקם את טופס הצור קשר האופקי כאשר נמצאים במצב של עורך טקסט.
  • להעתיקו לוידג'ט טקסט.
  • להעתיקו בתוך רכיב HTML במידה ועובדים עם אלמנטור.

שלב 4: css לעיצוב אופקי

עכשיו לשלב האחרון – דרוש קוד CSS על מנת לפרוס את הטופס בצורה אופקית.
הדרך הפשוטה ביותר להעתיק את ה-CSS היא להיכנס למסך "CSS מותאם" תחת "עיצוב>התאמה אישית>CSS מותאם" ולהדביקו שם.
ב-CSS עשיתי שימוש בפקודת flex שבעצם פורסת את כל האלמנטים בשורה בודדת. מכיוון שבמכשירי מובייל אסתטי יותר וגם נכון יותר להציג טפסים בצורה ורטיקלית (אנכית), אז התייחסתי ל-breakpoint ב-CSS כך שעד מסכים של 767px (מובייל+טבלט) הטופס יוצג ורטיקלית ואילו במסכים של768px ומעלה (desktop) הטופס יוצג אופקית.

contact form 7

טבלת breakpoints לשימושכם (קרדיט לאתר https://medium.freecodecamp.org)

שלב 5: הצגת טופס צור קשר אופקי באתר

התוצאה לפניכם – טופס צור קשר CF7 רספונסיבי שבנינו המופיע במצב אופקי במסכי desktop כאשר במסכי mobile ו-tablet יופיע במצב אנכי:

contact form 7

שימו לב כי פקודת flex לא מאפשרת לקבל תצוגת מובייל ע"י הקטנת גודל הדפדפן ב-desktop או ע"י תצוגת מובייל באלמנטור. לכן על מנת להבין כיצד הטופס יראה במסכים שונים, יש להיכנס למצב debugger בדפדפן ע"י מקש ימני> inspect element, ולבחור תצוגת מובייל מתאימה לפי סוג מכשיר או רזולוציה.

contact form 7

בהצלחה, דייזי עיצוב גרפי https://www.daisydesign.co.il


על הכותבת

דייזי עיצוב גרפי

Facebook Google+

דייזי עיצוב גרפי הוא סטודיו לעיצוב גרפי ומיתוג, עם ניסיון והתמחות של למעלה מ-15 שנים במגוון תחומי העיצוב הגרפי, ו-UX/UI (איפיון עיצוב ממשקי משתמש לאתרים ואפליקציות). הסטודיו נולד מאהבה גדולה ליצירתיות ולאפשרויות האינסופיות של הבאה לידי ביטוי והצגתו של הדמיון על המסך ועל הנייר.

שתפו

תגובות

  1. יפה, רק חבל ששכחת לשים label לכל פקד.
    זה חשוב.

    1. Author

      תודה על תגובתך.
      הורדת ה-label הייתה מכוונת. העדפתי להשתמש ב-placeholder כדי שהמראה יהיה יותר אלגנטי ולא יהיה כיתוב מעל השדות.

  2. Author

    יתכן כי שפת המערכת שלך היא אנגלית. יש 2 אפשרויות:
    להעביר שפת מערכת לעברית או לשנות ב css את flex-direction: row ל flex-direction: row-reverse
    מקווה שעזרתי.

להשארת תגובה