יצירת עיצוב לטופס ב-Contact Form 7
נכתב ע"י יוחאי ירמיהו4 שאלות
תיאור קצר לשיעור: אחד החסרונות של Contact Form 7 זה שהוא מגיע ללא עיצובים מוכנים. בשיעור זה נלמד איך להוסיף עיצוב לטפסים שמופיעים בתוסף באמצעות קוד CSS בהתאמה אישית.
אורך השיעור: 2:05 דקות
קורסים המכילים את השיעור וידאו:
תוכן השיעור:
בשיעור הקודם למדנו איך ליצור טופס באמצעות Contact Form 7 ואחת הבעיות שיש לנו עם התוסף היא היכולת לשלוט על העיצוב שלו, בעיקר בגלל שהתוסף מגיע ללא עיצוב.
בשיעור הזה אשתף אתכם עם עיצוב מוכן ובסיסי לטופס יצירת קשר 7 הכולל גם את ההודעה וגם את הקוד CSS שעליכם להכניס לעמוד בשביל שהטופס יוצג קצת יותר טוב.
דרך אגב תבנית Astra העיצוב יעבוד בצורה טובה אבל בתבניות עיצוב אחרות כמו הלו העיצוב לא יעבוד בצורה טובה ולכן אנחנו נצטרך לטפל בזה.
קוד CSS התחלתי לשיפור העיצוב
מתחת אני הולך לשתף אתכם בקוד מוכן שיעזור לכם לעצב בצורה קצת יותר טובה טופס שנוצר באמצעות Contact Form 7.
מדובר על קוד CSS מותאם שבא לשפר במקצת את הצורה שבה העיצוב מופיע בעמוד ולתקן בעיות כמו למשל שהשדה של המייל מופיע בצד שמאל ולא בצד ימין בתוסף.
אין לך הרשאות גישה לתוכן של העמוד
מה שהקוד מעל יעשה יהיה ליצור לנו עיצוב דומה למה שאפשר לראות בתבנית אסטרה. אז לצורך הדוגמא אם אני משתמש בקוד טופס הבא אבל זה אמור להשפיע גם על סוגי שדות נוספים.
אין לך הרשאות גישה לתוכן של העמוד
העיצוב שאני אקבל בתוך העמוד בתבנית שלא תומכת בטופס יצירת קשר 7 היא התבנית עיצוב הבאה:
מה אם אני מחפש עיצוב אחר?
הנושא של טופס יצירת קשר 7 הוא קצת מורכב אם אין לכם ידע בשפות קוד. לצערי אני לא יכול לשתף פה כל סוג עיצוב קיים לטפסים אבל אם אתם רוצים ליצור עיצוב אחר אתם יכולים לחפש בגוגל בעברית "עיצוב ל-Contact Form 7" ואם האנגלית שלך סבבה חפשו "Contact Form 7 style" ותוכלו למצוא דוגמאות נוספות לעיצובים.
אם אתם ממש בתחילת הדרך ואין לכם ידע בקוד אז הייתי ממליץ להשתמש בטופס יצירת קשר באלמנטור במקום.
הצטרפו לקהילות המובילות של בוני האתרים בישראל
זה הזמן להצטרף לקהילה שלנו ולקבל סיוע ותמיכה בקבוצות המובילות בארץ לבוני אתרים בוורדפרס (-:
קורסים מקיפים ומומלצים ללימוד בניית אתרים
לבנות אתר ב-10 ימים
קורס מזורז שילמד אותך לבנות אתרים ב-10 ימים. נקודת כניסה מעולה לתחום של בניית אתרים במחיר משתלם.
- לבנות אתר ב-10 ימים 56 שיעורים שילמדו אותך הכל על בניית אתרים
- בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
- בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
- בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
- בונוס 4: אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
- בונוס 5: קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
- בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 7: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק
- גישה לכל החיים
- תעודה הכשרה בסיום הלימודים (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 1078 סטודנטים לפניך (-:
מסלול וורדפרס Expert
למעלה מ-10 קורסים מלאים ומעל 700 שיעורים שילמדו אותך הכל על בניית אתרים ברמה הגבוהה ביותר בארץ.- בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
- וורדפרס Beginner לימוד בניית אתרים למתחילים – (2,250 ₪)
- וורדפרס Tool Kit הצעת מחיר + אפיון + צ'ק ליסט + התנהלות עם לקוחות
- וורדפרס Next Level מחיר 2,500 ₪
- וורדפרס SEO התאמת אתרים לגוגל – (750 ₪)
- : אלמנטור Ninja הקורס שיהפוך אותך לנינג'ה באלמנטור – (999 ₪)
- אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה – (550 ₪)
- וורדפרס Rocket שיפור מהירות לאתר – (999 ₪)
- וורדפרס Security חיזוק אבטחה לאתר – (750 ₪)
- וורדפרס Global בניית אתרים דו לשוניים בכל השפות – (750 ₪)
- בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
- בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
- בונוס 6: Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- בונוס 7: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 8: אופטימיזציה לתמונות איך להעלות תמונות שיעזרו לאתר להתקדם בגוגל
- בונוס 9: יסודות העיצוב לבוני אתרים כל מה שצריך לדעת כדי לעצב את האתר המושלם
- בונוס 10: זכויות יוצרים בדיגיטל איך להימנע מתביעה משפטית כאשר בונים אתר
- בונוס 11: 20 אלף בחודש מבניית אתרים איך למצוא לקוחות ולייצר הכנסה מבניית אתרים
- בונוס 12: משיחת מכירה לכסף בחשבון איך לשפר את התהליך מכירה ולסגור יותר עסקאות
- בונוס 13: התנהלות עם לקוחות + ניהול פרויקטים איך מתנהל פרויקט בניית אתרים כולל תחזוקה לאתר
- בונוס 14: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
- 758 שיעורים למתחילים + למתקדמים
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 765 סטודנטים לפניך (-:
אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
עוסק בתחום של פיתוח אתרים ועיצוב גרפי למעלה מ-15 שנה. נינג'ה מומחה לוורדפרס, מפתח תוספים ותבניות בהתאמה אישית והמרצה שלכם בקורס הדיגיטלי המקיף והמוביל בישראל ללימוד בניית אתרים בוורדפרס בצורה נכונה.
שאלות ותשובות לשיעור
4 שאלות
באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס
שלום יוחאי,
אני מעוניין ליצר איזור של יצירת קשר דומה מאד למה שמופיע בתמונה (בפועל החץ הירוק לכוון הטלפון גם מהבהב עם חץ נוסף שמופיע אחריו).
מה שיש באלמנטור זה רק טופס אנכי שלא ניתן להפוך אותו לאופקי כפי שמופיע בתמונה.
האם ניתן לבצע זאת באמצעות טופס יצירת קשר 7, או שידועה לך אפשרות פשוטה אחרת?
היי ניר, אם יש לך רישיון לאלמנטור אז יהיה לך יותר קל ליצור את זה באלמנטור מאשר בטופס יצירת קשר 7 בגלל שבטופס יצירת קשר 7 אתה צריך ליצור את הקוד של העיצוב עם CSS בעצמך.
ובגדול רק העיצוב הוא באלמנטור, אתה מייצר 2 עמודות (הצד של השיחת ייעוץ עמוד ראשונה, והצד של הטופס עמודה שנייה).
ואתה משנה את הרוחב של השדות השונים בטופס ככה שהם כולם יכנסו בשורה אחת ככה שאתה יכול ליצור גם את מה שמופיע כאן.
אני ניסיתי לצמצם את רוחב הטופס, אך לא משנה עד כמה אצמצם אותו, הוא מוגדר להיות אנכי. לא הצלחתי בשום צורה להפוך אותו לאופקי.
בין אם אני מצמצם את רוחב הקונטיינר ובין אם את רוחב הווידג'ט "טופס יצירת קשר" שבתוך הקונטיינר. השדות של הטופס נשארות אנכיות.
אשמח לדעת את הפתרון לכך
היי ניר, אתה לא אמור לצמצם את הרוחב של כל הטופס.
אתה אמור לצמצם את הרוחב של כל שדה בנפרד כמו שאפשר לראות בתמונה.
לאחר מכן אתה תצטרך ללכת גם לכפתורים וגם שם לצמצם את הרוחב של השדה של הכפתור שליחה.