3 שדרוגים חכמים שכל בונה אתרים חייב להכיר בעקבות תיקון 13

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

1. להעביר את הצ’קבוקס אחרי הכפתור

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

הדביקו את הקוד הבא בלשונית 'מתקדם' של הטופס במקום הייעודי תחת 'CSS מותאם'.

				
					/* הגדרת כפתור השליחה לסדר 1 */
selector .elementor-field-group.elementor-field-type-submit {
  order: 2;
}

/* הגדרת שדה ההסכמה לסדר 3 */
selector .elementor-field-group.elementor-field-type-acceptance {
  order: 3;
  /*border-top: 2px solid #dddddd; /* הקו עצמו */
  /*padding-top: 20px; /* מרווח פנימי מתחת לכפתור */
  /*margin-top: 5px; /* מרווח חיצוני מתחת לקו */
}

/* איפוס הסדר של כל שאר השדות */
selector .elementor-field-group {
    order: 1;
}
				
			

2. להפוך את הצ’קבוקס לסוויצ’ר מגניב

במקום ריבוע סימון סטנדרטי, ניצור מתג מודרני (switch) שנראה מעולה גם בנייד וגם בדסקטופ.
הקוד כולל רק כמה שורות CSS וניתן להטמיע בכל אתר.

ע"י לחיצה על מקש F12 במקלדת תפתחו את חלון הקונסול של הדפדפן. תמצאו שם את הריבוע של הצ'קבוקס שבטופס אלמנטור ותחלצו מתוך ה-ID את רצף הספרות והסימנים הייחודיים של ה-ID הספציפי לצ'קבוקס הזה. העתיקו והדביקו לאורך הקוד בכל סלקטור ב-6 מקומות שסימנתי ב- *******

הדביקו את הקוד הבא בלשונית 'מתקדם' של הטופס במקום הייעודי תחת 'CSS מותאם'.

				
					/* 1) מנקים מראה דיפולטי ומכינים את הסוויץ’ */
#form-field-field_******* {
  -webkit-appearance: none;
  appearance: none;
  width: 54px;
  height: 30px;
  border-radius: 999px;
  margin-bottom: -8px;
  background: #e0e0e0; /* מצב כבוי: אפור בהיר */
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background .35s ease, box-shadow .3s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.1);
}

/* הכדור שבתוך הסוויץ’ */
#form-field-field_*******::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* מצב פעיל (מסומן) – צבעים חזקים עם גרדיאנט */
#form-field-field_*******:checked {
  background: linear-gradient(35deg, #4E7CBF, #263C97);
}

#form-field-field_*******:checked::after {
  transform: translateX(24px);
}

/* פוקוס נגיש */
#form-field-field_*******:focus-visible {
  box-shadow: 
    0 0 0 3px rgba(255,255,255,.6),
    0 0 0 6px rgba(78,124,191,.35);
}

/* הובר קטן */
#form-field-field_*******:hover::after {
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
				
			

3. לנעול את כפתור השליחה עד שכל השדות חובה מולאו

נגרום לכפתור להיראות בהיר (לא פעיל) עד שכל השדות סומנו, כולל הצ’קבוקס להסכמה.
ברגע שהכול תקין – הכפתור משנה צבע וניתן לשליחה.

הוסיפו תחת לשונית 'מתקדם' בעריכת הטופס את ה-ID הבא: my-contact-form

הדביקו את הקוד הבא בלשונית 'מתקדם' של הטופס במקום הייעודי תחת 'CSS מותאם'.

				
					/* עיצוב הכפתור כשהוא במצב "לא פעיל" */
#my-contact-form .elementor-button[disabled] {
    background-color: #cccccc !important; /* צבע רקע אפור */
    color: #666666 !important;           /* צבע טקסט עמום */
    cursor: not-allowed !important;      /* שינוי סמן העכבר לסימן "אין כניסה" */
    opacity: 0.7;                        /* שקיפות קלה */
}

/* (אופציונלי) עיצוב הכפתור כשהוא חוזר להיות פעיל */
#my-contact-form .elementor-button {
    transition: all 0.3s ease; /* אנימציה נחמדה למעבר בין המצבים */
}

				
			

מיד אחרי הטופס הוסיפו בעמוד ווידג'ט HTML והכניסו בו את הסקריפט הבא:

				
					<script data-minify="1" src="https://zvikaberman.com/wp-content/cache/min/1/ajax/libs/jquery/3.6.0/jquery.min.js?ver=1787402209"></script>
<script>
jQuery(document).ready(function($) {
    // ---- התאמה אישית ----
    var formID = '#my-contact-form'; // ודא שזה אותו CSS ID מהשלב הראשון
    // --------------------

    var form = $(formID);
    if (form.length === 0) {
        console.warn('Elementor form with ID "' + formID + '" not found.');
        return;
    }

    var submitButton = form.find('button[type="submit"]');
    var requiredFields = form.find('[required="required"]'); // בחירה מדויקת יותר של שדות חובה

    // פונקציה לבדיקת תקינות הטופס
    function checkFormValidity() {
        var isFormValid = true;
        
        requiredFields.each(function() {
            var field = $(this);
            var isCheckbox = field.is('input[type="checkbox"]');
            var isTextField = field.is('input:not([type="checkbox"]), textarea, select');

            // בדיקה עבור צ'קבוקס חובה
            if (isCheckbox && !field.is(':checked')) {
                isFormValid = false;
                return false; // יוצא מהלולאה כי מצאנו צ'קבוקס לא מסומן
            }
            
            // בדיקה עבור שדות טקסט, אימייל, טלפון וכו'
            if (isTextField && field.val().trim() === '') {
                isFormValid = false;
                return false; // יוצא מהלולאה כי מצאנו שדה טקסט ריק
            }
        });
        
        return isFormValid;
    }

    // פונקציה לעדכון מצב הכפתור
    function updateButtonState() {
        if (checkFormValidity()) {
            submitButton.prop('disabled', false); // הפעלת הכפתור
        } else {
            submitButton.prop('disabled', true); // השבתת הכפתור
        }
    }

    // השבתת הכפתור בטעינת העמוד
    updateButtonState();

    // האזנה לשינויים בשדות החובה
    requiredFields.on('keyup input change click', function() {
        updateButtonState();
    });
});
</script>
				
			

כתיבת תגובה

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

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