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

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

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

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

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

למה חשוב שהאתר יהיה עם חווית משתמש גבוהה

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

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

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

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

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

נוסיף טופס בתוך קונטיינר וב – css classes של הקונטיינר נוסיף את הקלאס הבא:  hide_container

הקלאס של הקונטיינר הראשי, היכן שמיקמנו את הטופס

לטופס שהוספנו נוסיף את הנתונים שצריך להיות בטופס, נוודא שה – ID של שדה השם מוגדר כ – "name",
ב – css classes של הטופס נוסיף את הקלאס הבא: hide_form

ה – ID של שדה השם בטופס
הקלאס של הטופס

נוסיף מתחת לטופס קונטיינר נוסף וניתן לו ב – css classes את הקלאס הבא: show_container

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

לקונטיינר נוסיף 2 כותרות המוגדרות כרוחב בתוך השורה, בכותרת ראשונה נרשום "שם" וניתן לו ב – CSS ID
וב – CSS class  את הקלאס: user_name כמובן שנוכל גם להוסיף אייקון או טקסט עם הודעה שהטופס נשלח בהצלחה.

2 כותרות המוגדרות כרוחב בתוך השורה
ה – ID והקלאס של בכותרת הראשונה

ב – CSS מותאם של הקונטיינר הפנימי נוסיף את הקוד שיסתיר לנו את הקונטיינר לפני שליחת ההודעה בהצלחה:

CSS
.show_container{
    display:none;
}

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

JavaScript
<script type 
= "text/javascript">
    
//dgtool-israel peer
//https://dgtool.co.il
    
    jQuery( document ).ready(function( $ ){
	$( '.hide_form' ).on('submit_success', function(){
	   

jQuery('.show_container').show();
jQuery('.hide_form').hide();
;
name = jQuery('#form-field-name').val();
jQuery('#user_name').show();
        
jQuery('#user_name').text(name);
        
	});
});
    
</script>


וככה זה נראה לאחר שהמשתמש שלח את הטופס בהצלחה

עיצוב הודעה שהשליחה נכשלה

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

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

השלב האחרון הוא להוסיף את קוד ה – Css לטופס.

CSS
.elementor-message.elementor-message-danger {
    padding: 3px 8px;
    background: #E00303;
    border-radius: 100px;
    width: fit-content;
}

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

7 תגובות

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

  2. איך אפשר לעשות שאחרי 5 שני' הקונטיינר יחזור שוב והטופס יחזור לקדמותו<

  3. תמחק את שורות 7 עד 20 ושים את הקוד הבא:

    jQuery(document).ready(function($) {
    $('.hide_form').on('submit_success', function() {
    $('.show_container').show(); // Show the container
    $('.hide_form').hide(); // Hide the form

    var name = $('#form-field-name').val();
    $('#user_name1').text(name).show(); // Display the user's name

    // Reverse the actions after 5 seconds
    setTimeout(function() {
    $('.show_container').hide(); // Hide the container
    $('.hide_form').show(); // Show the form
    }, 5000); // 5000 milliseconds = 5 seconds
    });
    });

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

ישראל פאר בניית אתרים
ישראל פאר
הבעלים של סטודיו פאר והמייסד של האתר דיגיטול – הבית לבוני אתרים בישראל, מתמחה בבניית אתרי חנות או קטלוג בדגש על חווית משתמש גבוהה, עובד בעיקר במשרד אבל לפחות פעם בשבוע יוצא לעבוד מבית קפה מעניין, נסו גם זה עובד.
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
ווקומרס
הגדלת מכירות באמצעות יצירת מוצרים קשורים עם ג'ט
במדריך זה נלמד איך להגדיל את המכירות באמצעות יצירת מוצרים קשורים עם ג'ט.
אלמנטור
יצירת אפקט מעבר צבע בכפתור אלמנטור
שדרגו את הנראות של הכפתורים באתרים שלכם.
אלמנטור
כפתורי יצירת קשר מתרחבים במעבר עכבר
רוצים להגדיל את ההמרות באתר? הוסיפו כפתורי יצירת קשר שנגללים עם העמוד!
אלמנטור
יצירת אפקט הופעה לאלמנטים במעבר עכבר עם אלמנטור
נמאס לכם להשתמש באותם עיצובים משעממים? המדריך הזה הוא בשבילכם.
ווקומרס
איך ליצור תוויות למוצרים בווקומרס עם ג'ט
הוספת תוויות חיווי למוצרים באתרי מכירות – משפר את חווית המשתמש ומגדיל את המכירות.
חיפוש חופשי
חיפוש חכם ע"י AI (בהרצה)
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).