הודעה ברורה על מצב השליחה חשובה מאוד לחווית המשתמש משתי סיבות עיקריות:
- היא נותנת למשתמש משוב מיידי על הפעולה שהוא ביצע. זה עוזר למשתמש להבין אם הפעולה בוצעה בהצלחה, או אם יש צורך לבצע פעולה נוספת.
- היא מסייעת למשתמש להימנע ממצבים של אי ודאות. כאשר משתמש מבצע פעולה, הוא רוצה לדעת מה התוצאה של הפעולה. הודעת מצב ברורה עוזרת למשתמש להבין מה התרחש, ולנקוט בפעולה הבאה בהתאם.
לדוגמה, אם משתמש ממלא טופס באתר, הוא רוצה לדעת אם הטופס נשלח בהצלחה. הודעת מצב ברורה כמו "הטופס נשלח בהצלחה" או "יש לתקן שגיאות בטופס" עוזרת למשתמש להבין אם הטופס נשלח בהצלחה, או אם יש צורך לבצע פעולה נוספת.
למה חשוב שהאתר יהיה עם חווית משתמש גבוהה
חווית משתמש היא אחד הגורמים החשובים ביותר להצלחת אתר. משתמשים שמתמודדים עם חווית משתמש שלילית עשויים לעזוב את האתר מבלי להשלים את פעולתם, הסיבה מאוד ברורה, קיים קשר ישיר בין חווית משתמש גבוהה לבין הצלחת האתר.
לעיתים קרובות, משתמשים לא מבינים באופן מלא את המבנה של האתר ומעין שגיאה קטנה יכולה לגרום להם לעזוב. חשוב להבין כי חוויית המשתמש כוללת תחושה נכונה או לא נכונה על פעולות באתר, כמו למשל הזנת פרטים בטופס. במקרה זה, ניתן לספק למשתמש חוויות מסוימות הקשורות למצב שבו הושלמה או נכשלה השליחה.
לצערי בטפסים של אלמנטור, ההודעות על סטטוס השליחה מופיעות בדרך כלל בתחתית הטופס. זה יכול להיות מאתגר למשתמשים לראות את ההודעות, במיוחד אם הטופס ארוך.
במדריך היום אני נלמד איך להתאים את הודעת ההצלחה והודעת השגיאה כך שיהיה קל יותר למשתמשים לראות ולהבין האם הטופס נשלח או נכשל.
בנוסף ניצור פרסונליזציה כך כשהטופס נשלח בהצלחה נשתמש בשם האישי של המשתמש, אז יאללה בואו נתחיל.
עיצוב הודעה שהטופס נשלח בהצלחה
נוסיף טופס בתוך קונטיינר וב – css classes של הקונטיינר נוסיף את הקלאס הבא: hide_container
לטופס שהוספנו נוסיף את הנתונים שצריך להיות בטופס, נוודא שה – ID של שדה השם מוגדר כ – "name",
ב – css classes של הטופס נוסיף את הקלאס הבא: hide_form
נוסיף מתחת לטופס קונטיינר נוסף וניתן לו ב – css classes את הקלאס הבא: show_container
לקונטיינר נוסיף 2 כותרות המוגדרות כרוחב בתוך השורה, בכותרת ראשונה נרשום "שם" וניתן לו ב – CSS ID
וב – CSS class את הקלאס: user_name כמובן שנוכל גם להוסיף אייקון או טקסט עם הודעה שהטופס נשלח בהצלחה.
ב – CSS מותאם של הקונטיינר הפנימי נוסיף את הקוד שיסתיר לנו את הקונטיינר לפני שליחת ההודעה בהצלחה:
.show_container{
display:none;
}לאחר מכן נוסיף ווידגט HTML ושם נוסיף את הקוד שגורם לקונטיינר הפנימי להיות מוצג עם הודעה שהטופס נשלח בהצלחה בתוספת שם השולח, וכמובן הקוד גם יסתיר לנו את הטופס:
<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 לטופס.
.elementor-message.elementor-message-danger {
padding: 3px 8px;
background: #E00303;
border-radius: 100px;
width: fit-content;
}במדריך עברנו שלב אחרי שלב כך שהכל אמור לעבוד מצוין, נתקלתם בכל זאת בבעיה? תכתבו לי בתגובות ואשמח לעזור, אהבתם את המדריך? תפרגנו בתגובות. בהצלחה!
19 תגובות
כל מדריך שלך יותר מטורף מהקודם, תודה רבה לך
קיבלתי עדכון במייל מהניוזלטר וחייב להגיד לך שזה אחד המיילים המעוצבים שקיבלתי, וכמובן רוצה לפרגן על האתר שלך שהוא הכי מטורף בארץ ועם התכנים הכי שווים
את המיילים אני שולח ומעצב עם MailPoet, וכיף לשמוע שמצאת את האתר מועיל🙂
מדריכים מצוינים אחד אחד
אני שמח לשמוע🙂
איך אפשר לעשות שאחרי 5 שני' הקונטיינר יחזור שוב והטופס יחזור לקדמותו<
תמחק את שורות 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
});
});
למה נעלם לי לגמרי הקונטיינר תודה?
וכן אם אני רוצה שזה יופעל כפופאפ יש אפשרות לעשות את זה עם קוד?
היי ישראל,
ראשית תודה רבה על כל המדריכים המקסימים שלך.
אני עשיתי לפי המדריך רק בפופאפ
ומשום מה הוא לא מציג לי את השם של הפרטי מהטופס,
מה אני לא עושה נכון?
בפופאפ אני מאמין שזה לא יעבוד בגלל הדרך שהמידע נמשך, נסה לעבוד לפי המדריך של חיים בניסטי על מעבר לעמוד תודה,
יש מצב שזה יעזור לך
היי למה בעצם לא להשתמש עם פופאפ רגיל?
אפשר כמובן גם עם קוד אבל פה זה דרך יותר קלילה ואני חושב גם נכונה.
ניסיתי וכרגע עם הקוד הוא מושך את השם ללא עיצוב
ועם הקוד (בתגובות) שמרענן את העמוד זה לא מושך בכלל
מה יכולה להיות הבעיה?
זה לא עובד לי במובייל 🙁
נסה לבטל את הקאש ולראות, זאת בעיה שנתקלתי בה
תודה רבה על המענה! (וכמובן שגם על המדריך)
ביטלתי, עכשיו לא עובד בכלל..
יש לך רעיון נוסף?
מאוד מוזר, זה עובד לי בהרבה אתרים, עד היום נתקלתי רק בבעיית קאש,
נסי לעבור שוב על הכל מהתחלה, אולי משהו קטן התפספס
לי יש בעיה קצת שונה-
טופס ההתחברות וטופס ההרשמה לאתר נמצאים בפופאפ-
כיוון שרציתי שהמשתמשים יישארו על אותו עמוד שהם נמצאים ולא ינותבו לעמוד חדש.
לפופאפ מוגדר כנראה כברירת מחדל שכאשר יש לו טופס- בעת לחיצה על שליחת הטופס הפופאפ נסגר ללא הודעה נוספת,
וכך המשתמש לא רואה בכלל את ההודעות הנוספות שעולות לו,
ולא מקבל משוב האם ההתחברות הצליחה,
או נכשלה , ולמה.
אשמח לשמוע מה אפשר לעשות כדי למנוע את סגירת הפופאפ כאשר לא מתחבר בהצלחה.
תודה