בית הספר לוורדפרס » עיצוב טופס יצירת קשר באלמנטור

עיצוב טופס יצירת קשר באלמנטור

נכתב ע"י יוחאי ירמיהו7 שאלות

Video

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

אורך השיעור: 9:15 דקות

איך לבנות אתר בחינם בשעה וחצי?

יש לי הצעה מעניית עבורך, יצרתי הדרכה מלאה של למעלה משעה וחצי שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.

תוכן השיעור:

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

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

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

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

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

הגדרת מרווחים, טקסט וצבעים

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

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

עיצוב שדות וכפתורים

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

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

צבע הודעות של טופס שנשלח

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

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

    הפתעות במחיר מנצח

    עוד לא צפיתם בהדרכה? זה בחינם!

    יש לי הצעה מעניינת יצרתי הדרכה מלאה של למעלה משעתיים שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.

    קורסים מובילים

    וורדפרס Beginner

    וורדפרס Beginner

    הקורס המושלם ללימוד העולם של בניית אתרים (מותאם למתחילים ללא ידע)

    • קורס וורדפרס Beginner קורס בניית אתרים למתחילים
    • קורס וורדפרס Tool Kit הצעת מחיר + אפיון + צ’ק ליסט + התנהלות עם לקוחות
    • בונוס 1: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
    • בונוס 2: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
    • בונוס 3: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
    • בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
    • בונוס 5: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
    • 303 שיעורים למתחילים
    • תמיכה לשאלות בעמודי השיעורים לשנה
    • גישה לקבוצת הפייסבוק
    • גישה לכל החיים
    • תעודה הכשרה בסיום הקורס (קובץ PDF)
    • גישה לעדכונים ושיעורים חדשים
    • 100% החזר כספי ל-30 ימים
    למידע נוסף
    וורדפרס Next Level

    וורדפרס Next Level

    הקורס המושלם לבוני אתרים מנוסים שרוצים להרחיב את הידע ולעלות רמה

    • קורס וורדפרס Next Level בניית אתרים למתקדמים
    • קורס וורדפרס SEO התאמת אתרים לגוגל
    • קורס: אלמנטור Ninja הקורס שיהפוך אותך לנינג’ה באלמנטור
    • קורס: אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה
    • קורס וורדפרס Rocket שיפור מהירות לאתר
    • קורס וורדפרס Security חיזוק אבטחה לאתר
    • קורס וורדפרס Global בניית אתר דו לשוניים בכל השפות
    • בונוס 1: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
    • בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
    • בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
    • בונוס 4: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
    • בונוס 5: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
    • 387 שיעורים למתקדמים
    • תמיכה לשנה לשאלות בעמודי השיעורים
    • גישה לקבוצת הפייסבוק של הקורס
    • גישה לכל החיים
    • תעודה הכשרה בסיום הקורס (קובץ PDF)
    • גישה לעדכונים ושיעורים חדשים
    • 100% החזר כספי ל-30 ימים
    למידע נוסף
    וורדפרס Expert

    באנדל וורדפרס Expert

    באנדל עם הקורס למתחילים + הקורס למתקדמים במחיר משתלם במיוחד

    • קורס וורדפרס Beginner קורס בניית אתרים למתחילים
    • קורס וורדפרס Tool Kit הצעת מחיר + אפיון + צ’ק ליסט + התנהלות עם לקוחות
    • קורס בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
    • קורס וורדפרס Next Level בניית אתרים למתקדמים
    • קורס וורדפרס SEO התאמת אתרים לגוגל
    • קורס: אלמנטור Ninja הקורס שיהפוך אותך לנינג’ה באלמנטור
    • קורס: אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה
    • קורס וורדפרס Rocket שיפור מהירות לאתר
    • קורס וורדפרס Security חיזוק אבטחה לאתר
    • קורס וורדפרס Global בניית אתר דו לשוניים בכל השפות
    • בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
    • בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
    • בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
    • בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
    • בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
    • בונוס 6: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
    • 587 שיעורים למתחילים + למתקדמים
    • תמיכה לשאלות בעמודי השיעורים לשנה
    • גישה לקבוצת הפייסבוק
    • גישה לכל החיים
    • תעודה הכשרה בסיום הקורס (קובץ PDF)
    • גישה לעדכונים ושיעורים חדשים
    • 100% החזר כספי ל-30 ימים
    למידע נוסף

    אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:

    יוחאי ירמיהו

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

    שאלות ותשובות לשיעור

    שאלות ותשובות

    7 שאלות

    1. שרגא קישון
      שרגא קישון

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

      עדכון:

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

      1. יוחאי ירמיהו
        יוחאי ירמיהו

        היי שרגא,
        אני רואה שהסתדרת אבל אני בכל זאת אענה למקרה שמישהו אחר יחווה את אותה בעיה.

        זה אמור להיות פעיל באופן ברירת מחדל אבל אפשר לנסות את הדבר הבא.

        תיכנס להגדרות של אלמנטור ובתפריט העליון של העמוד שנפתח תלחץ על הכפתור של מאפיינים.

        בעמוד הבא שייפתח תנסה למצוא את האפשרות של Form Submissions ותוודא שאתה משנה את האפשרות הזאת ממצב של ברירת מחדל או לא פעיל למצב של פעיל.

        אני לא בטוח בזה ב-100% אבל אני חושב שזה אמור לפתור את הבעיה.

        הוספת שמירת טפסים באלמנטור

    2. שרגא קישון
      שרגא קישון

      היי יוחאי וכולם,
      מעדכן שמה שפתר לי את הבעיה הוא כניסה להגדרות אלמנטור –< תחת לשונית מאפיינים, יש להעביר את הלידים למצב פעיל, אחרי שמבצעים, האופציה להוסיף ""שמירת לידים" בפעולות אחרי שליחה בטופס מתאפשרת. (ראו צילום מסך)
      בברכה,
      שרגא

      אזור לידים באלמנטור

      1. יוחאי ירמיהו
        יוחאי ירמיהו

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

    3. שרגא קישון
      שרגא קישון

      אני על גרסת 3.15.0 האחרונה שיצאה ב-31.7.2023

      1. יוחאי ירמיהו
        יוחאי ירמיהו

        כן גם אני על הגרסה הזאת, אז כנראה זה עניין של תרגום ואצלי זה פשוט מופיע באנגלית על Form Submissions (שאולי הם תרגמו את זה לעברית בתור לידים).

        דרך אגב בעתיד שאתה מגיב לתגובה תשתדל בבקשה להגיב על אותו שרשור של שאלה ולא לפתוח תגובה חדשה ככה שהתגובות באותו נושא יהיו מקושרות.

        תגובה לשאלה

        1. שרגא קישון
          שרגא קישון

          אופס, צודק
          סליחה ותודה
          שרגא

    באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס

    כלי נגישות