fbpx

הירשמו לקבלת עדכונים

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

500x500 Birthday 2022 Croco (1)

40% הנחה לכל חבילות קרוקובלוק

קופון הנחה: crocoturns4
סיום המבצע: 29/5/22

Cart Count

שורטקוד – הצגת כמות מוצרים בסל

קוד PHP המאפשר להציג איפה שתרצו את מספר הפריטים שיש כרגע בסל הקניות. יש להעתיק את הקוד לקובץ ה- functions.php שבתבנית הבת שלכם, על מנת

Text Scroll

CSS – תיבת טקסט עם גלילה

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

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

עיצוב הודעות השגיאה בטפסי אלמנטור
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

אלמנטור הוא אחד מבוני הדפים הפופולריים ביותר בעולם, עם למעלה מ- 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 תגובות
תגובות בגוף המאמר
צפה בכל התגובות
0
נשמח לשמוע מה אתה חושב, הגב כאן...x
()
x
דילוג לתוכן