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

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

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

גילוי נאות – הייתה לי הזכות הגדולה להיות חלק מהצוות הגדול הזה לזמן מה.

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

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

תצוגת שגיאות אימות

אלמנטור משתמשים כיום באימות טפסים עם HTML5 שלא נראים ממש טוב בלשון המעטה:

על מנת לשדרג טיפה את תצוגת השגיאות הכנתי לכם את הקוד הבא (הדביקו אותו בתוך קובץ functions.php בתבנית הבת שלכם):

				
					add_action( 'wp_footer', function () {
   ?>
    <script>
        (function () {
            let forms = document.querySelectorAll( '.elementor-form' );

            forms.forEach(function (form) {

                let inputs = form.querySelectorAll('.elementor-field');
                let submit = form.querySelector('button[type="submit"]');

                inputs.forEach(function(input) {
                    input.addEventListener('invalid', function(e) {
                        e.preventDefault();

                        let errorEl = document.createElement('div');
                        errorEl.classList.add('error');
                        errorEl.style.color = 'red';
                        errorEl.innerHTML = this.validationMessage;

                        this.parentElement.parentNode.insertBefore(errorEl, this.parentElement.nextSibling);
                    });
                });

                submit.addEventListener('click', function (e) {
                    removeErrors(form);
                });

                function removeErrors(form) {
                    form.querySelectorAll('.error').forEach(function (error) {
                        error.remove();
                    });
                }
            });
        })(jQuery);
    </script>
    <?php
});
				
			

כעת תוכלו לעצב שגיאות אלה בכל דרך שתרצו.

שימו לב – Post SMTP built-in email logger תומך בצורה מושלמת בטפסים של אלמנטור.

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

מפתח וורדפרס עם ניסיון של חמש שנים בפיתוח תוספים ותבניות לוורדפרס. היה לי העונג לעבוד מפרוייקטים קטנים עד לפרוייקטים גדולים לחברות הגדולות במשק. . מפתח התוספים Postman SMTP ו-Metrics Query.
מדריכים באותו נושא
בואו נדבר על זה
0 0 דירוגים
דירוג המאמר
הירשם
עדכן אותי על
guest
0 תגובות
הישנות ביותר
החדשות ביותר הכי פופולאריות
תגובות בגוף המאמר
צפה בכל התגובות
דילוג לתוכן