CSS

JS

תוויות מרחפות בטופס אלמנטור

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

מאת קובי שונברגר

קטע הקוד:

JS (jQuery) - מוסיף קלאס לתווית כאשר השדה בפוקוס.
ניתן לשים את הקוד בתוך ווידג'ט HTML בעמוד.

				
					<script>
    jQuery(document).ready(function($){
        $(".elementor-field").focus(function() {
            $(this).prev('.elementor-field-label').addClass("active-field-label");
        }).focusout(function() {
            if(!$(this).val()) {
                $(this).prev('.elementor-field-label').removeClass("active-field-label");
            }
        });
    });
</script>
				
			

CSS - מבצע את ריחוף התווית כאשר השדה בפוקוס.
יש לשים את הקוד בתוך ווידג'ט הטופס.
במידה והטופס באנגלית, יש להחליף right ב-left.
ניתן לשחק / להוסיף ערכים לקלאס החדש כדי להתאים את התוצאה לצורך שלכם!

				
					.elementor-form .elementor-field-label {
    position: absolute;
    right: 18px;
    transition-duration: .2s;
}

.elementor-field-label.active-field-label{
    transform: translateY(-20px);
    font-size: 16px !important;
}

.elementor-field{
    box-shadow: none !important;
}
				
			

וכך זה נראה בלייב:

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

  • אם הקוד נדרש לחול על כל העמוד, ניתן לשים אותו בהגדרות העמוד > מתקדם > CSS מותאם.

  • אם הקוד נדרש לחול על כל האתר, ניתן לשים אותו בהגדרות אתר > CSS מותאם,
    או בקבצי התבנית, תחת עיצוב > התאמה אישית > CSS מותאם,
    או בהגדרות אלמנטור, תחת Custom Code.
  • אם הקוד נדרש לחול בעמוד ספציפי ניתן לשים אותו בווידג'ט HTML בעמוד,
    או למקם אותו תחת הגדרות אלמנטור > Custom Code, ולהגדיר שיחול בעמוד/ים שנרצה.
 
  • אם הקוד נדרש לחול על כל האתר, ניתן למקם אותו בהגדרות אלמנטור > Custom Code.

שניכנס לתא הטייס?

שכחת סיסמה?

שחזור סיסמה:

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